Shulou(Shulou.com)06/01 Report--

This article mainly explains how to gracefully downgrade the website based on Modernizr. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to gracefully downgrade the website based on Modernizr.

Nowadays, the content of a web page is getting richer and richer, including some special effects of HTML5 and CSS3. So if the client's browser supports HTML5. The page access effect is very good, no problem. What if HTML5 is not supported or when browsers such as IE6,7,8 are supported? This time is often a headache as a front-end personnel, compatible.

Compatibility at this time. It is nothing more than allowing users to look and use the same in all browsers as much as possible. But the page uses the HTML5 tag and the CSS3 style. Client browsers do not support HTML5, what should I do? For such a problem, we can only support as much as we can. If you can't support it, you have to give a friendly hint and advice. Let the user upgrade to a later version of the browser. So in the production of the coding process, we need to carry out some functional testing. Let's say we're going to do a fillet effect. CSS3,HTML5 is very convenient to use.

Article

{

Background: lightblue

Margin: 20px

Padding: 5px

Width: 350px

Border-radius: 10px

Box-shadow: 4px 4px 10px rgba (0,0,0,0.5)

}

Article H2 {font-size: 12px;}

My title

This place is the content.

The effect is the same as we expected.

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

Note: both browser mode and document mode must be selected

The page effect is very cruel in browsers that do not support HTML5.

We must fix such a problem. So there is no way to do more work for browsers that do not support HTMl5. How to solve the compatibility of such a fillet effect? Must be judging browsers that don't support HTMl5. If the HTML5 fillet is not supported, we use the third-party fillet js to do it. Is the problem again? How to make such a round corner function to make a judgment? I hesitated again at this time. Is there a more efficient, comprehensive and concise functional judgment js for HTML5?

Http://modernizr.com/ Modernizr is a HTML5 feature detection plug-in.

Or the special effect of the upper fillet, slightly modified

Note: pie.js is a third-party fillet plug-in

Article

{

Background: lightblue

Margin: 20px

Padding: 5px

Width: 350px

Border-radius: 10px

Box-shadow: 4px 4px 10px rgba (0,0,0,0.5)

}

Article H2 {font-size: 12px;}

My title

My content

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)

});

}

}])

At this point, I believe you have a deeper understanding of "how to make the website elegant downgrade based on Modernizr". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.