Article introduction of Wulin.com (www.vevb.com): Modernizr and HTML5.
OK, HTML5 is popular now, so I will add HTML5 to its title :)
In fact, modernizr is born for HTML5 - it is a JS library that detects browser support for HTML5 and CSS3 features. The famous HTML5/CSS3 browser compatibility website FindmeByIP is based on this framework.
You can see that there is a link to Modernizr on the green button in the lower right corner.
Features of ModernizrThe function of modernizr is actually very simple. It is to use js to detect the browser's support for HTML5/CSS3 features. If it supports a certain attribute, add a corresponding class to the <html> tag of the page. If it does not support it, add a no-prefix class. For example, if the detected browser supports the video tag, modernizr will add a video class to the <html> tag, otherwise, add a no-video class.
Check the source code of FindMeByIP or use a tool like firebug to view the page code, and you can see the class in the <HTML> tag.
In addition, modernizr also provides another usage, which is to detect the browser's support for a certain feature alone, such as:
It is relatively safe to detect the browser's support for HTML5 through similar interfaces.
Browser detection: UA vs FeaturesIn fact, everyone usually uses UA to detect a browser. Of course, ua also provides richer information. UA is not omnipotent, and it also has some weaknesses, such as the UA disguise of the user's browser and the lack of UA information provided by some backward browsers will affect the judgment of browser information. More importantly, for HTML5 features, using UA to determine whether a browser supports a certain feature is too complex and unreliable.
Of course, there have always been debates about UA and feature detection. What I want to say here is that specific analysis of specific issues, using HTML5 to detect feature support in the website is more reliable and convenient than UA~~
Using ModernizrThe usage of modernizr is very simple, just introduce the library's js file into the page:
>/script>
Modernizr is open source, but for some reason it was blocked by G-FW.
Modernizr @ gitThe modernizr project is hosted in git, you can get it at the following address:
The author also provides a simple output page in git:
And a detailed test page:
Extended reading:detecting HTML5 features
Safely Deploy HTML5 and CSS3 with Modernizr