Home > Developer > Web Develop
---restore content starts---
Modernizr Browser to Functional detection libraries developed by HTML5 and CSS3Support for H5 and CSS3 varies due to the large number of browser versions currently used by the user. Front-end developers, when using some of the new features, are more troublesome. Need to be compatible with a variety of browsers to determine whether these browsers support these new features.
MODERNIZR can help front-end developers to solve this problem very well.
What is Modernizr?In the words of the official website,Modernizr is a JavaScript library that monitors support for HTML5 and CSS3 functions in the user's browser. That's what we're aiming for.
Let's take a simple example to illustrate the different browsers ' support for HTML5 and CSS3.
For example, for the support of the HTML5 canvas tag. For current browsers, Internet Explorer + +, Firefox, Opera, Chrome, and Safari support <canvas> tags. However, the following versions of IE9 do not support canvas.
if your browser supports canvas, the effect of this piece of code is the following red rectangular chart
<!DOCTYPE HTML><HTML><Head> <title>Modernizr</title> <MetaCharSet= "Utf-8" /> </Head><Body> <canvas style= "background-color:red;">Your browser does not support canvas</Canvas></Body></HTML>
If not, a message will appear: Your browser does not support canvas;
How does Madernizr detect browser support for HTML5 and CSS3 features?Simple introduction of madernizr.js is required. The class library can be downloaded from the official website. It is divided into compressed version and uncompressed version.
After downloading it, we just have to reference it on the page.
Then open the page. From the running code page we can see that there is something extra in the HTML tag. This is written to Modernizr monitor your browser's support for HTML5 and CSS3.
A closer look will reveal that there is a "no-" label in front of the touch attribute. This means that the browser you are using does not support touch properties. But when I use the browser's development tool to simulate my mobile browser, I'm simulating the ipone 4,touch property without the "no-" tag in front of it. Because the touchscreen phone browser now supports touch properties.
Yes, Modernizr can monitor the browser's support for HTML5 and CSS3. Now look at how we use Modernizr.
Let's take the touch attribute as an example. Modernizr after the page load is initialized, an object named Mnodernizr is created. Each property of an object is a Boolean value that detects browser support for HTML5 and CSS3 properties.
<!DOCTYPE HTML><HTML><Head> <title>Modernizr</title> <MetaCharSet= "Utf-8" /> <Scripttype= "Text/javascript"src= "Modernizr.js"></Script> <Scripttype= "Text/javascript"> if(Modernizr.touch) {alert ("Browser Support Touch"); }Else{alert ("The browser does not support touch"); } </Script></Head><Body></Body></HTML>
In addition, it can be judged not only by JavaScript, but also by the class name of CSS.
<!DOCTYPE HTML><HTML><Head> <title>Modernizr</title> <MetaCharSet= "Utf-8" /> <Scripttype= "Text/javascript"src= "Modernizr.js"></Script> <styletype= "Text/css">. yes,.no{Display:None}. Touch. Yes{Display:Block;}. No-touch. No{Display:Block;} </style></Head><Body><Divclass= "Yes">Support for touch properties</Div><Divclass= "No">Touch properties are not supported</Div></Body></HTML>
Page very simple answer, when the page load Modernizr class library, if the browser supports touch, the page will display "Support touch Properties", and conversely, "do not support touch properties."
Other browsers support HTML5 tags, but the properties of the tags are not supported, only a subset of them are supported. Like the audio tag.
Audio can implement OGG,MP3,WAV,M4A 4 of the basic video format, if some browsers only support one of them, or 2 formats, then we can use the Modernizr to solve.
<Scripttype= "Text/javascript"> varAudio= NewAudio (); AUDIO.SRC=Modernizr.audio.ogg? 'Xxx.ogg': Modernizr.audio.mp3? 'Xxx.mp3': Modernizr.audio.wav? 'Xxx.wav': 'xxx.m4a';</Script>
First we create an audio object and then attach the SRC attribute to the object. Judged by the modernizr.audio.ogg,mp3,wav,m4a. Then assign values for the video file.
Although the advent of HTML5 can allow us to use a large number of new tags, but at present many users have not upgraded to the latest browser, in order to better user experience, our front-end developers need to be compatible with some browsers that do not support the new features.
For example, an application needs to achieve a user's latitude and longitude information, here we can use the Golocation function of HTML, only for some older versions of the browser, is not possible. We need to use a local control or service to implement it. such as Baidu, Google provides some of the interface.
In order for developers not to care about browser-level compatibility issues, the need to implement a HTML5 Golecation application interface with the same code package, Modernizr in this area also provides the corresponding load support, the sample code is as follows:
Modernizr.load ({ test:Modernizr.geolocation,//Judging condition yep: ' geo.js ', //Support geolocation loaded script nopt: ' Get-polyfill.js ' //does not support geolocation loaded scripts})HTML5 Learning Html5 function judgment plugin Modernizr
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
