2024年 3月
 123
45678910
11121314151617
18192021222324
25262728293031

近期发布

近期评论

    2024 年 3 月 29 日

    Neusofts

    科技改变生活,创新引领未来

    Modernizr

    Modernizr是一个开源的专为HTML5和CSS3开发的功能检测的JS类库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。

    当你在网页中嵌入Modernizr的脚本时,它会检测当前浏览器是否支持CSS3的特性,比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等,同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的 <input>标签的类型和属性等。在获取到这些信息的基础上,你可以在那些支持这些功能的浏览器上使用它们,来决定是否创建一个基于JS的fallback,或者对那些不支持的浏览器进行简单的优雅降级。另外,Modernizr还可以令IE支持对HTML5的元素应用CSS样式,这样开发者就可以立即使用这些更富有语义化的标签了。

    浏览器:

    Chrome 版本 33.0.1750.117 m

    示例:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Modernizr example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
    </head>
    <body>
    <div id="supported"><h1>Supported?</h1></div>
    <script>
    var div = document.getElementById("supported");
    for (var i in Modernizr) {
    var x = eval('Modernizr.' + i)
    if (typeof x == "boolean") {
    div.innerHTML += '<b>' + i + ': </b>' + x + '<br />';
    }
    }
    </script>
    </body>
    </html>
    

    输出:

    Supported?

    flexbox: true
    canvas: true
    canvastext: true
    webgl: true
    touch: false
    geolocation: true
    postmessage: true
    websqldatabase: true
    indexeddb: true
    hashchange: true
    history: true
    draganddrop: true
    websockets: true
    rgba: true
    hsla: true
    multiplebgs: true
    backgroundsize: true
    borderimage: true
    borderradius: true
    boxshadow: true
    textshadow: true
    opacity: true
    cssanimations: true
    csscolumns: true
    cssgradients: true
    cssreflections: true
    csstransforms: true
    csstransforms3d: true
    csstransitions: true
    fontface: true
    generatedcontent: true
    localstorage: true
    sessionstorage: true
    webworkers: true
    applicationcache: true
    svg: true
    inlinesvg: true
    smil: true
    svgclippaths: true