Home>Web design tutorial>HTML tutorial

Tell us about how to use Modernizr

Author：Eve Cole Update Time：2025-08-23 02:32:01

There are already many Chinese introductions about Modernizr, you can search through Baidu or Gu Ge. You can also read it on Blue Ideal, this article is relatively comprehensive: Modernizr-born for HTML5 and CSS3;

What are the uses of Modernizr in addition to providing basic environment judgment and semantic support for HTML5 and CSS3? Let’s learn it together today.

1. Start by applying Modernizr

This part is explained in detail in Modernizr-Born for HTML5 and CSS3, including changes in HTML elements after Modernizr runs, etc. It is recommended that new students can read it carefully.

You can also go directly to the official website http://modernizr.com/docs/ for further information.

2. Use of Modernizr.load

1. Load jquery

Let’s first take a look at the methods and codes for loading jquery on the official website:

  1. Modernizr.load([{
  2. load:'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
  3. complete:function(){
  4. if(!window.jQuery){
  5. Modernizr.load('js/libs/jquery-1.7.1.min.js');
  6. }
  7. }
  8. }]);

This code has been tested and found that if you cannot access the cdn provided by Google normally, the browser will report an error, and the message is

  1. GEThttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404(NotFound)
  2. modernizr.custom.js:4ResourceinterpretedasImagebuttransferred with MIMEtypeapplication/x-javascript:js/libs/jquery-1.7.1.min.js.

From the feedback information, we can see that the file format parsed by Modernizr when reloading local jQuery is incorrect. I don’t know if this will happen, but this does affect the use. Among all Chinese search results, no explanation or research on this phenomenon was found, and personal abilities were limited, so it was impossible to investigate in depth. I just got a temporary solution from stackoverflow, the code is as follows:

  1. <scripttype=text/javascript>//<![CDATA[
  2. Modernizr.load([{
  3. load:'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
  4. complete:function(){
  5. if(!window.jQuery){
  6. Modernizr.load([{
  7. load:'js/jquery.min.js',
  8. callback:function(url,result,key){
  9. //console.log('jqueryonlocalwasloaded!');
  10. init();
  11. }
  12. }]);
  13. }else{
  14. //console.log('jqueryongoglewasloaded!');
  15. init();
  16. }
  17. }
  18. }]);
  19. functioninit(){
  20. jQuery(document).ready(function(){
  21. $('body').prepend('helloworld!');
  22. });
  23. }
  24. //]]></script>

2. Support for lower version IE intercepted PNG diagrams

In the documentation description of yepnopejs, there is a section about the use of plug-ins for ie! Prefix.

Most of the time when we are making front-end interface compatibility, we have to consider the details of different versions of IE. Although we are now emphasizing the abandonment of IE6, most clients are still using this version. In order to ensure the consistency of the interface, we can usually see the following format code:

  1. <!--[ifltIE7]><htmlclass=ie6><![endif]-->
  2. <!--[ifIE7]><htmlclass=ie7><![endif]-->
  3. <!--[ifIE8]><htmlclass=ie8><![endif]-->
  4. <!--[ifIE9]><htmlclass=ie9><![endif]-->
  5. <!--[if(gtIE9)|!(IE)]><!--><!--<![endif]-->

This is a conditional format statement for filtering filtering allowed in html. Through filtering, we can achieve some css hacks for different versions of IE. This part of the content can be read and studied at paulirish.com.

There are many solutions to transparent png diagrams. Here are some attempts to introduce the JS code segment to solve transparent png through modernizr. The specific code is as follows:

  1. <scripttype=text/javascript>//<![CDATA[
  2. Modernizr.load([
  3. {
  4. load:'js/yepnope.ie_prefix.js',//Load yepnope's ie!prefix plugin
  5. complete:function(){
  6. yepnope([{
  7. load:'ielt8!js/ie_png.js',//The plug-in can only be filtered after it is loaded normally (load ie_png.js for versions below IE8)
  8. complete:function(){
  9. ie_png.fix('img');
  10. }
  11. }]);
  12. }
  13. }
  14. ]);
  15. //]]></script>

This is an interesting attempt.

3. Determine the browser's support for css3 or html5

This part is the basic feature of modernizr. Using these basic features, we can not only try new features of css3 or html5, but also ensure that we give friendly prompts in unsupported environments. Take a look at the following code:

  1. <scripttype=text/javascript>//<![CDATA[
  3. Modernizr.load({
  4. test:Modernizr.csstransforms3d&#038;&Modernizr.csstransitions,//Judge whether the current client supports 3-dimensional variants and gradient transitions
  5. yep:['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'],//If supported, load related js
  6. nope:'css/fallback.css',//Other load the relevant styles used for friendly reminders
  7. callback:function(url,result,key){//Callback content
  9. if(url==='js/jquery.hoverfold.js'){//If the path of the last loaded js file is the same, the application
  10. $('#grid').hoverfold();
  11. }
  13. }
  14. });
  16. //]]></script>

This code is cut from a paragraph in the presentation document in 3D Thumbnail Hover Effects. By analyzing and experiencing the tutorials produced by the author, we can not only learn some of the use of modernizr, but also experience some of the powerful and dazzling effects of css3.

The above content is still very roughly organized, and the purpose is to use it to learn and understand the characteristics and usage methods of Modernizr (YepNope). At the same time, we must also enhance the learning and attention of css3 and html5.

The whole text is over.

Related Articles