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

时间 2019-11-13

标签 modernizr.js modernizr css 兼容性历史再见上篇栏目 JavaScript 繁體版

原文原文链接

什么是Modernizr？javascript

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

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

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

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

Modernizr的原理git

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

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

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

.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 我用的并无这么一大段代码，

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