Analyze the graceful degradation of websites based on Modernizr

Comments: 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.

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> <P> 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> <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.