Analysis of elegant website degradation based on Modernizr_html5 tutorial skills

Nowadays, the content displayed on a web page is becoming more and more abundant, including some HTML5 and CSS3 functional effects. So if the client's browser supports HTML5. Page access works very well with no issues. What if HTML5 is not supported, or is it IE6, 7, 8 and other browsers? This time is often a very headache for a front-end staff, compatibility.

Compatible at this time. It is nothing more than allowing users to look and use it as consistently as possible in all browsers. But the page uses HTML5 tags and CSS3 styles. What should I do if the client browser does not support HTML5? For this problem, we can only support as much as we can. If you can't support it, please give friendly tips and suggestions. Let users upgrade to a newer version of the browser. Therefore, during the coding process, we need to perform some functional tests. Suppose we want to make a rounded corner effect. Using 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 titleh1>header>
 <p >This place is the contentp>
 article>

The effect is the same as we expected

What if the client browser does not support HTML5? Let’s test it using 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 this problem. So there is no way, more work needs to be done for browsers that do not support HTMl5. How to solve the compatibility of such a rounded corner effect? It must be a judgment on browsers that do not support HTMl5. If HTML5 rounded corners are not supported, we use third-party rounded corners js to do it. The problem comes again? How to judge such a rounded corner function? At this time, he hesitated again. Is there a more efficient, comprehensive and concise function judgment js for HTML5?

http://modernizr.com/ Modernizr is an HTML5 feature detection plug-in.

Still the top rounded corner effect, slightly modified

Note: pie.js is a third-party rounded 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>我的标题h1>header>
            <p>我的内容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>

Let’s see the effect: Browser that supports HTML5

Next, IE7, a browser that does not support HTML5, will be tested

So it is very convenient to use Modernizr to do function detection of HTMl5 pages. But there is still a problem? If you make a rich canvas special effect, how to make it compatible? At this time, let's go back to the sentence at the beginning, the function is downgraded, support as much as it can support, and give friendly tips if it cannot be supported. We still hope that domestic users will soon upgrade to browsers that support HTML5, so that developers will not be in such pain.