用下面的代码写html5 和css3

• Canvas^†
• rgba()
• hsla()
• border-image:
• border-radius:
• box-shadow:
• Multiple backgrounds
• opacity:
• CSS Animations
• CSS Columns^†
• CSS Gradients
• CSS Reflections
• CSS Transforms
• CSS Transitions

var Modernizr = (function(){
    var tests = {
        canvas: true,
        rgba: true,
        hsla: true,
        multiplebgs: true,
        borderimage: true,
        borderradius: true,
        boxshadow: true,
        opacity: true,
        cssanimations: true,
        csscolumns: true,
        cssgradients: true,
        cssreflections: true,
        csstransforms: true,
        csstransitions: true
    };
    var passed = {};
    var groups = {
        canvas: ["canvas"],
        rgba: ["rgba"],
        hsla: ["hsla"],
        multiplebgs: ["multiplebgs"],
        borderimage: ["borderimage"],
        borderradius: ["borderradius"],
        boxshadow: ["boxshadow"],
        opacity: ["opacity"],
        cssanimations: ["cssanimations"],
        csscolumns: ["csscolumns"],
        cssgradients: ["cssgradients"],
        cssreflections: ["cssreflections"],
        csstransforms: ["csstransforms"],
        csstransitions: ["csstransitions"]
    };
    var enablehtml5 = true;
    var enableNoClasses = true;
    var m = document.createElement("modernizr");
    var detectFeature = function(feat){
        var supported = false, prop, i, tmp;
        switch (feat) {
            case "canvas":
                supported = !!document.createElement("canvas").getContext;
                break;
            case "rgba":
                m.style.cssText = "background-color: rgba(150,255,150, .5)";
                supported = !!(m.style.backgroundColor.indexOf("rgba") !== -1);
                break;
            case "hsla":
                m.style.cssText = "background-color: hsla(120,40%,100%, .5)";
                supported = !!(m.style.backgroundColor.indexOf("rgba") !== -1);
                break;
            case "multiplebgs":
                m.style.cssText = "background: url(m.png), url(a.png), #f99 url(m.png);";
                tmp = m.style.background;
                i = 0;
                while (tmp.indexOf("url(") !== -1) {
                    i++;
                    tmp = tmp.substring(0, tmp.indexOf("url(")) + tmp.substring(tmp.indexOf("url(") + 4)
                }
                supported = !!(i === 3);
                tmp = i = null;
                break;
            case "borderimage":
                prop = ["borderImage", "webkitBorderImage", "MozBorderImage", "mozBorderImage", "oBorderImage", "msBorderImage"];
                m.style.cssText = "border-image: url(m.png) 1 1 stretch; -webkit-border-image: url(m.png) 1 1 stretch; -moz-border-image: url(m.png) 1 1 stretch; -o-border-image: url(m.png) 1 1 stretch; -ms-border-image: url(m.png) 1 1 stretch;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "borderradius":
                prop = ["borderTopRightRadius", "webkitBorderTopRightRadius", "MozBorderTopRightRadius", "mozBorderTopRightRadius", "oBorderTopRightRadius", "msBorderTopRightRadius"];
                m.style.cssText = "border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -o-border-top-right-radius: 10px; -ms-border-top-right-radius: 10px;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined && prop[i].indexOf("orderTopRight") !== -1) {
                        supported = true;
                        break
                    }
                }
                break;
            case "boxshadow":
                prop = ["boxShadow", "webkitBoxShadow", "MozBoxShadow", "mozBoxShadow", "oBoxShadow", "msBoxShadow"];
                m.style.cssText = "box-shadow: #000 1px 1px 3px; -webkit-box-shadow: #000 1px 1px 3px; -moz-box-shadow: #000 1px 1px 3px; -obox-shadow: #000 1px 1px 3px; -ms-box-shadow: #000 1px 1px 3px;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "opacity":
                m.style.cssText = "opacity: .5;";
                supported = !!(m.style.opacity.indexOf("0.5") !== -1);
                break;
            case "cssanimations":
                prop = ["animationName", "webkitAnimationName", "MozAnimationName", "mozAnimationName", "oAnimationName", "msAnimationName"];
                m.style.cssText = "animation: 'animate' 2s ease 2; -webkit-animation: 'animate' 2s ease 2; -moz-animation: 'animate' 2s ease 2; -o-animation: 'animate' 2s ease 2; -ms-animation: 'animate' 2s ease 2; position:relative;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "csscolumns":
                prop = ["columnCount", "webkitColumnCount", "MozColumnCount", "mozColumnCount", "oColumnCount", "msColumnCount"];
                m.style.cssText = "column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; -ms-column-count: 3;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "cssgradients":
                m.style.cssText = "background-image: gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -webkit-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -moz-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -o-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -ms-gradient(linear, left top, right bottom, from(#9f9), to(white));";
                supported = !!(m.style.backgroundImage.indexOf("gradient") !== -1);
                break;
            case "cssreflections":
                prop = ["boxReflect", "webkitBoxReflect", "MozBoxReflect", "mozBoxReflect", "oBoxReflect", "msBoxReflect"];
                m.style.cssText = "box-reflect: right 1px; -webkit-box-reflect: right 1px; -moz-box-reflect: right 1px; -o-box-reflect: right 1px; -ms-box-reflect: right 1px;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "csstransforms":
                prop = ["transformProperty", "webkitTransform", "MozTransform", "mozTransform", "oTransform", "msTransform"];
                m.style.cssText = "transform: rotate(3deg); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg);";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "csstransitions":
                prop = ["transitionProperty", "webkitTransitionProperty", "MozTransitionProperty", "mozTransitionProperty", "oTransitionProperty", "msTransitionProperty"];
                m.style.cssText = "transition: all .5s linear; -webkit-transition: all .5s linear; -moz-transition: all .5s linear; -o-transition: all .5s linear; -ms-transition: all .5s linear;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            default:
                supported = false
        }
        m.style.cssText = "";
        tmp = i = prop = null;
        return supported
    };
    function init(){
        if (enablehtml5 &&
        !(!        /*@cc_on!@*/
        0)) {
            var e = "abbr article aside audio bb canvas datagrid datalist details dialog figure footer header mark menu meter nav output progress section time video".split(" "), i = e.length;
            var n;
            while (i--) {
                n = document.createElement(e[i])
            }
            n = null
        }
        for (var feat in tests) {
            if (tests[feat]) {
                passed[feat] = detectFeature(feat)
            }
        }
        var passedgroup, len;
        var classes = [];
        for (var group in groups) {
            passedgroup = true;
            for (i = 0, len = groups[group].length; i < len; i++) {
                feat = groups[group][i];
                if (!passed[feat]) {
                    passedgroup = false;
                    if (!enableNoClasses) {
                        break
                    }
                }
            }
            if (passedgroup) {
                classes.push(group)
            }
            else {
                if (enableNoClasses) {
                    classes.push("no-" + group)
                }
            }
        }
        passed._enablehtml5 = enablehtml5;
        passed._enableNoClasses = enableNoClasses;
        document.getElementsByTagName("body")[0].className += " " + classes.join(" ");
        classes = null;
        return passed
    }
    return init()
})();