Modernizr allows the website to be elegantly downgraded

Source: Internet
Author: User

Nowadays, the content displayed on a web page is becoming richer and richer, with some special effects of HTML5 and css3. If the browser on the client supports HTML5. Page access works well. What if HTML5, IE6, 7, 8, and other browsers are not supported? At this time, it is often a headache for people in the previous section. It is compatible.

Compatibility at this time. It is nothing more than making the user look like it in all browsers as much as possible. However, HTML5 labels and css3 styles are used on the page. The client browser does not support HTML5. What should I do? For such a problem, we can only do the following: How much can we support. Friendly tips and suggestions cannot be provided. Upgrade your browser to a later version. Therefore, we need to perform some functional tests during the coding process. Suppose we want to make a rounded corner effect. With css3, HTML5 is very convenient.

 

< Style >
Article
{
Background : Lightblue ;
Margin : 20px ;
Padding : 5px ;
Width : 350px ;
Border-radius : 10px ;
Box-shadow : 4px 4px 10px rgba (0, 0, 0, 0.5) ;
}
Article H1 { Font-size : 12px ;   }
</ Style >
< Article >
< Header > < H1 > My title </ H1 > </ Header >
< P > This is the content. </ P >
</ Article >

 

 

We expected the same results.

What if the client browser does not support HTML5? Let's test it with IE's F12 tool.

Note: Both the browser mode and document mode must be selected.

 

In browsers that do not support HTML5, the page effect is cruel.

 

We must fix this problem. Therefore, there is no way to do more work for browsers that do not support HTML5. How can this problem be solved? It must be a judgment on browsers that do not support HTML5. If HTML5 rounded corners are not supported, we use third-party rounded corner Js. The problem is coming again? How can we determine such a rounded corner function? At this time, I hesitated again. Is there a function to judge Js for HTML5 that is more efficient, comprehensive, and concise?

Http://modernizr.com/modernizr an HTML5 function detection plug-in.

Or the above rounded corner effect, slightly modified

Note: pie. JS is a third-party corner plug-in.

< Script Type = "Text/JavaScript" SRC = "Scripts/modernizr-2.0.6.min.js" > </ Script >
< Style >
Article
{
Background : Lightblue ;
Margin : 20px ;
Padding : 5px ;
Width : 350px ;
Border-radius : 10px ;
Box-shadow : 4px 4px 10px rgba (0, 0, 0, 0.5) ;
}
Article H1 { Font-size : 12px ;   }
</ Style >
< Article >
< Header > < H1 > My title </ H1 > </ Header >
< P > My content </ P >
</ Article >
< Script >
Modernizr. Load ([{
Load: ' Scripts/jquery-1.6.1.min.js ' ,
Complete: Function (){
If ( ! Window. jquery ){
Modernizr. Load ( ' Scripts/jquery-1.6.1.min.js ' );
}
}
},
{
Test: modernizr. borderradius | Modernizr. boxshadow,
Nope: ' Scripts/pie. js ' ,
Callback: Function (){
$ ( ' Article ' ). Each ( Function (){
Pie. Attach ( This );
});
}
}]);
</ Script >

 

Result: HTML5 browsers are supported.

 

Next, we will test IE7, a browser that does not support HTML5.

 

Therefore, it is very convenient to use modernizr to detect HTML5 pages. But there is still a problem? How can we achieve compatibility with a wide array of canvas effects? In this case, back to the start sentence, the function is downgraded, the number of supported items, and the friendly prompt is not supported. We still expect domestic users to quickly upgrade their HTML5 browsers, so that developers will not suffer.

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.