I hope you are already familiar with HTML’s <form> element. HTML5 form has extended its usability up to a larger extent by introducing many new input types, attributes and elements. However...
Time required to study: 30 mins
Tools Required: A basic text editor, notepad will work fine
HTML5 Browser support detection is an easy task even for those who are not a part of the web development industry. There are many online applications freely available to accomplish this purpose. But these applications do not provide information about HTML5 support of every browser present in the market.
Now, suppose you are a web developer and want to build an application based on some specific feature of HTML5 like canvas, audio, video, etc. and thus you want a particular set of browsers (not supported by those online applications) to be checked for that particular element support. How will you do that?
Well, Modernizr is the solution. In this article, you will get familiar to what is it and how it works.
Table of contents
- What is Modernizr?
- How Modernizr works?
- Where/How to get Modernizr?
- Installing Modernizr.
- Using modernizr to detect HTML5 support of a browser.
Let us start;
What is Modernizr?
How Modernizr works?
Where/How to get Modernizr?
You can download the latest version from their official website. It is always good to use the latest version. Follow these steps to download it:
STEP 1: Navigate to the download link on their website.
STEP 2: Check the desired features you want to detect as shown in figure below:
STEP 4: Now click on the Generate button below.
All done! You will get your customized file in a fraction of seconds. Rename it to modernizr.js.
Modernizr is nothing else but a *.js file. Thus, its installation just requires a script tag added into the head section of an HTML file with source reference pointing towards the location where you have stored this file on your local drive/web server. Didn’t get the point? No problem, just follow the steps given below:
STEP 1: If you don’t already have an HTML file for testing purpose, then
- Copy the following code.
- Open notepad or any other text editor.
- Paste the code there.
- Save the file as Test.htm in a directory named HTML5Test anywhere on your Hard drive.
Else, If you want to try it on an existing project, then:
- Open any file of your project.
- Jump to STEP 2.
DOCTYPE html> Modernizr Test File
STEP 2: Make a folder named js alongside your Test.htm file and paste a copy of modernizr.js there. You can see the complete hierarchy in the image below:
STEP 3: Now add the script tag pointing towards modernizr.js between the head section of your test.htm as shown below:
Okay! Ready for the test drive? Fasten your seatbelts and get started!
Finally, Let us start detection now
STEP 1: Insert the code shown below into your test.htm file (Ideally just before closing of head or body element)
STEP 2: Now we need a trigger to call this function, a button’s onclick event will be okay for that. Copy the code shown below and paste it anywhere between body section of your test.htm file.
<body> <button onclick="DetectCanvas();"> Do You Support Canvas </button> </body>
This was an example to detect canvas element. You can similarly test for other features like:
Here is Complete documentation for further reference!
It does not end here. Modernizr is big, it works for CSS3 and SVG too. It is very useful tool for those who are willing to work with technologies like HTML5 and CSS3 in future. This was a concise post about what Modernizr can be used for. Soon you will find a detailed post series about Modernizr and its usage here on Genius Insight. Till then, keep enjoying our articles. And don’t forget to subscribe if you don’t wanna miss the useful stuff!