modernizr插件使用心得

    xiaoxiao2021-03-25  160

    Modernizr.js 是一个很小的用来检测下一代 Web 技术原生实现可用性的 JavaScript 库。(大白话就是用来兼容HTML5和css3的JS库)

    HTML5 和 CSS3 都引入了各自的新特性,但是同时也有很多浏览器不支持这些新特性。

    Modernizr 提供了一种简单的方式检测任意新特性,从而让我们可以采取相应的操作。比如,浏览器还不支持视频特性,那么我们可以显示一个简单的页面。

    我们还可以基于某个特性的可用性来创建 CSS 规则,如果浏览器不支持某个新特性,那么这些规则将会自动应用到网页上(自动帮助友好处理),其官网可以自助选择需要兼容的选项。

    官网下载地址:https://modernizr.com

    引入:

    <script type="text/javascript" src="js/modernizr.js"></script>

    处理兼容和不兼容的css3属性示例:

    /* In your CSS: */ .no-audio #music { display: none; /* Don't show Audio options */ } .audio #music button { /* Style the Play and Pause buttons nicely */ } <!-- In your HTML: --> <div id="music"> <audio> <source src="audio.ogg" /> <source src="audio.mp3" /> </audio> <button id="play">Play</button> <button id="pause">Pause</button> </div> 要处理的浏览器还不支持的特性或者属性使用 “no-” 前缀。

    通过 JavaScript 检测特定属性的语法:

    if (Modernizr.audio) { /* properties for browsers that support audio */ }else{ /* properties for browsers that does not support audio */ }

    Modernizr 提供的特性检测:

    转载请注明原文地址: https://ju.6miu.com/read-7643.html

    最新回复(0)