Home > Developer > Web Develop
The rapid development of HTML5 and CSS3 has brought us great convenience, such as never having to spend a lot of time just to design the effect of a rounded corner.
But! We can't control all of them like a machine. All of them are upgraded to modern browsers overnight, because the HTML5 and CSS3 have not yet been formally launched when the browsers are not modern enough.
So, our problem is: For those browsers that do not support the new features, do we give up these user groups directly, or directly without these new features, and honestly use the image to spell out the fillet effect?
I think the answer is obvious. We can't give up on the reasons why they can't upgrade their browser users, but they can't afford to use these cool techniques to write code.
Before jquery 1.9 was released, jquery built a jquery.browser function to detect the browser version, which returns information about the browser based on the user agent. We can get the user browser version according to the result, so it's like patching some fallback for these old browsers.
But when JQuery 1.9 was released, the API was canceled (of course you can use the Jquery.migrate plugin), and the official documentation explains that we should use the feature (Jquery.support) to determine if we need fallback. After all, user agent forgery is too easy. For example, the Chrome mobile version will be added to Safari's user agent, which is one of the real reasons why the mobile browser market Safari dominates first.
This article introduces you to the library of Modernizr.js, which can be said to have nothing to do with jquery.support, but the level of function and maturity is second to none in the whole field.
Modernizr helps us detect whether a browser implements a feature, and if so, developers can take advantage of this feature to do some work, or not implement a developer or provide a fallback. So, what we need to understand is that Modernizr just helps us detect if feature is supported, and it can't add feature to the browser that would otherwise not be supported.
Modernizr won the. NET Award for Open Source App in 2010 and 2011, to know that its competitors are heavyweight players like WordPress and Drupal. Also in 2011, its chief developer, Paul Irish, won the developer of the Year award.
In fact, this kind of library is very simple to use, as you can see the Official document (single page) from beginning to end to fully understand how it is used. Next, I'll make a brief introduction.
Setting-up MODERNIZROn the official website (http://modernizr.com) We can see that there are two download options, development and production versions. In fact, they will be directed to the same download page, but the former will help us to pre-check the options.
Usually we need to detect the new features are basically included in these options, we can according to their own needs, customized selection needs to detect the feature.
After downloading, we can refer to this class library in. Since Modernizr helped us build the Html5shiv class library, we had to <body> refer to the class library before loading. Of course, if you are targeting a ie9+ browser, then large can be introduced after the page element is loaded, but there will be fouc such a very unfriendly effect appears.
Finally, we need to add classes to the tag no-js so that JavaScript is not disabled by the browser.
Working with ClassesAfter using MODERNIZR, the rendered HTML code in the page looks like this:
There are many classes with no prefix, but most of them do not have this prefix. In fact, if a class name is prefixed with no, such as no-touch This means that the browser does not support touch features, this is one of the two feature that the latest version of Chrome does not support:
Modernizr has a test page that detects features that are supported by the current browser. Chrome is currently one of the best browsers to support HTML5 and CSS3 new features.
Anyway When we introduce the Modernizr.js class library, the tag's Class property is assigned a value to show whether the browser supports a certain type of CSS property. For example, under IE6, does not support the Boderradius feature, then the tag will appear in the no-borderradius class, we can do some fallback work:
Div{ /*--do some hacks here--*/}
Browser Feature TestTo detect whether a browser supports an attribute, we can use this syntax:
Modernizr.featuretodetect
The Modernizr object is a global variable created by the class library that we can use anywhere in the page. For example, we need to detect if the browser supports WEBGL, so we can do this:
if (MODERNIZR.WEBGL) {/ * Support WebGL */} else{*/not support WebGL */}
Modernizr.load ()Based on Yepnope.js, Modernizr.load () dynamically chooses to load CSS and JavaScript based on some conditional judgments, which is undoubtedly helpful to avoid unnecessary resource loading.
You can find fallback solutions for almost any new feature here (HTML5 cross Browser polyfills).
Modernizr. Load ( test:Modernizr.webgl, ' three.js ', ' jebgl.js ');
When the browser supports WEBGL, it introduces the Three.js class library to do some 3D effects. When the browser does not support WEBGL, you can use Jebgl.js to do some fallback operations.
There is also a cool example from the official documentation. This is usually the case when we are using the jquery class library:
<src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" ></script> <script>window.jquery | | document.write (' <script src= ' js/libs/jquery-1.7.1.min.js ' >\x3C/ Script> ')</script>
Now use Modernizr.load () to write this:
Modernizr. Load ([ { '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js ', complete:function () { if (!window.jquery) { Modernizr. Load (' Needs-jquery.js '}]);
SummaryModernizr has done the most complicated step for us, and we just need to assemble the code like a module. Of course, Modernizr has some other uses, such as the Modernizr.mq () method to detect media query, which can be a lot of help for responsive design. Such APIs are covered in official documentation and are recommended to be carefully understood when used.
Modernizr is undoubtedly successful, at the bottom of the homepage, it clearly identifies its famous users:
When we created the Web application in Visual Studio, the Modernizr.js class library was introduced in the default template.
Since the modernizr.js, developers have been able to happily encode, even if our mouths still chatter about the "not friendly" browser.
But who really cares?
Http://www.tuicool.com/articles/UVnEVj
Modernizr.js Getting Started Guide (HTML5&CSS3 browser compatible plugin)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
