前端插件

最新推荐文章于 2024-06-24 22:14:24 发布

黎色癫狂

最新推荐文章于 2024-06-24 22:14:24 发布

阅读量849

点赞数

分类专栏： CSS 文章标签： css3 前端

本文链接：https://blog.csdn.net/facecrazy/article/details/53424522

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Modernizr.js

是什么？

Modernizr 是用于探测浏览器是否支持某种新特性（HTML5 和 CSS3 ）的 JavaScript 库。

如何使用

1，modernizr.js下载：官网下载||中文网地址||自定义下载
2，在页面的 head 标签中引用:

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

3,加载页面之后你会看到 html 标签的 class 中多出了很多类。在 class 中列出了所有当前浏览器支持的 html5&css3 的一些特性，如果是不支持的，则会在 class 中显示一个以 no- 开头的类,像下面这样:

<html class=" js no-touch svg inlinesvg svgclippaths no-ie8compat js no-touch rgba backgroundsize opacity cssanimations csstransitions video localstorage positionfixed fullscreen no-ipad no-iphone no-ipod no-appleios no-highresdisplay">

当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。
ps:我们也可以在console口中查看是否支持某一特性。true：支持。false：不支持。

demo

实例演示：在线地址

Chrome下：
这里写图片描述

IE下：
这里写图片描述

其他实例

如果浏览器支持CSS columns，它就会把列表完美的分为2栏，如果不支持，通过Modernizr为添加的“no-csscolumns”类我们也可以用浮动的方式使得列表变为两栏，虽然不那么完美，但也比直接来一个长串的单栏列表强[来源]。

.csscolumns ol.features {
    -moz-column-count: 2;
    -webkit-columns: 2;
    -o-columns: 2;
    columns: 2;
  }  

.no-csscolumns ol.features {  //通过插件获取类“no-csscolumns”
    float: left;
    margin: 0 0 20px;
  }  

.no-csscolumns ol.features li {
    float: left;
    width: 180px;  
}

参考：Modernizr.js入门指南
modernizr： github地址

黎色癫狂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端插件

Modernizr.js是什么？ Modernizr 是用于探测浏览器是否支持某种新特性（HTML5 和 CSS3 ）的 JavaScript 库。如何使用1，官网下载:modernizr.js||中文网地址||自定义下载 2，在页面的 head 标签中引用: <script src="js/Modernizr.js" type="text/javascript"></script>
复制链接

扫一扫

专栏目录