Modernizr.js，~让css兼容性跟历史说再见！(上篇)

最新推荐文章于 2024-05-30 11:27:58 发布

chuigu0767

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量91

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/8946a/blog/723200

版权

什么是Modernizr？

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

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

Modernizr 简单易用，但不是万能的。成功使用 Modernizr 很大程度上取决于你的 CSS 和 JavaScript 技能。

使用HTML 5和CSS 3的主要问题不是普及程度和浏览器之间的差异，而在于首先了解这些差异是什么。一旦搞清楚，开发人员就能够采用优雅降级(graceful degradation)技术解决这些局限性。为此，许多开发人员求助于开源项目Modernizr。

Modernizr的原理

Modernizr 使用 JavaScript 检测浏览器所支持的功能，但是，它并不是使用 JavaScript 动态地加载不同的样式表，而是使用非常简单的技术将类添加到页面的标签。然后作为设计者由你决定使用 CSS 层叠为目标元素提供合适的样式。

例如，如果页面支持 box-shadow 属性，那么 Modernizr 会添加 boxshadow 类。如果不支持，那么它用 no-boxshadow 类作为替代进行添加。

由于浏览器忽略它们无法识别的 CSS 属性，因此你可以放心地按照你的基本样式规则使用 box-shadow 属性，然而需要按照下面的格式为旧版本的浏览器添加单独的 descendant selector ：

.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }

只有不支持 box-shadow 的浏览器才会有 no-boxshadow 类，因此其它的浏览器不会应用这个样式规则。

开始给大家分析那个自己制作页面的心得，

<script src="modernizr-custom.js"></script>

首先你要有一个框架，可以在github上进行下载

https://github.com/Modernizr/Modernizr/downloads ，要下载最新的版本哦！

好接下来我们开始进行测试，既然我引入了框架，那我应该如何看到是否成功呢，接下来请往下看

!doctype html>
<html lang="en" class="no-js">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>modernizr</title>
  <script src="modernizr-custom.js"></script>
 </head>
 <style>
 
 .div_1{width:300px;height:150px;background:red;box-shadow:5px 5px 5px green;}
 .no-div.div_1{boxshadow:5px 5px 5px green;}
 </style>
 
 <body>
  <div class="div_1">
  
  </div>

 </body>
</html>

大家请注意这里面的

 <html lang="en" class-="no-js">

这里面的

 <html class-="no-js">

这个东西是当Modernizr运行的时候，它会把这个“no-js”的类变为“js”来使你知道它已经运行。Modernizr并不仅仅只做这一件事情，它还会为所有它检测过的特性添加class类，如果浏览器不支持某个特性，它就为该特性对应的类名加上“no-”的前缀。所以，你的<html>元素可能会变得看起来像下面这个样子：

<html class="js canvas canvastext no-geolocation rgba hsla   
multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns   
cssgradients cssreflections csstransforms csstransforms3d csstransitions video   
audio localstorage sessionstorage webworkers applicationcache fontface">

这个是在DW里面才会出现的结果，PS 我用的并没有这么一大段代码，

那，，大家看记事本里面就不存在那么一大段代码

转载于:https://my.oschina.net/8946a/blog/723200

chuigu0767

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Modernizr.js，~让css兼容性跟历史说再见！(上篇)

什么是Modernizr？ Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些...
复制链接

扫一扫