Modernizr——为HTML5和CSS3而生！

时间 2019-11-13

标签 modernizr html5 html css3 css 栏目 HTML5 繁體版

原文原文链接

Modernizr——为HTML5和CSS3而生！

Tags : HTML5 CSS3 译文 JS 03-10 / 20112 commentscss

原文地址：http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/html

堂主译文地址：http://www.osmn00.com/translation/221.htmlhtml5

转载请尊重原做者及译者劳动，附带以上信息，谢谢合做~css3

-------------------- 分割线，如下是正文 --------------------git

10年前，只有最尖端的网站设计师会为网页的布局和修饰使用CSS。那时的浏览器对CSS进行布局的支持即不完善又漏洞百出，因此这些人在坚持WEB标准化的同时，也不得不采用hacks来使得他们的页面在全部浏览器中都能正常显示。其中一个被使用的愈来愈多的hack技术是浏览器嗅探（browser sniffing），使用Javascript里的navigator.userAgent属性来判断用户使用的是什么品牌哪一个版本的浏览器。浏览器嗅探技术能够快捷的将代码进行分支，以便针对不一样的浏览器应用不一样的指令。github

今天，以CSS为基础进行的布局已经很是广泛，浏览器们对它的支持也很是的坚实。可是如今CSS3和HTML5来了，历史转了个圈又回到了原地——各个浏览器对这些新技术的支持又开始变得良莠不齐了。咱们早都习惯了书写整洁的符合标准的代码，也不会再使用CSS hacks或者浏览器嗅探这些不靠谱又低级的技术。咱们也相信愈来愈多的用户会认同网站没必要在全部浏览器里都看起来同样的理念。那面对当下这个熟悉的情形（浏览器支持的不一样），咱们该怎么作呢？简单：使用特征检测（feature detection），这意味着咱们没必要经过问浏览器“你是谁？”来作出不靠谱的推测。取而代之，咱们问浏览器“你能作这个或那个吗”。这么来检测浏览器的能力是很简便的，但一个个的花时间去手工测试依然使人厌烦。此时Modernizr能够帮助咱们。web

Modernizr：专为HTML5和CSS3开发的功能检测类库

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

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

Modernizr是基于渐进加强理论来开发的，因此它支持并鼓励开发者一层一层的建立他们的网站。一切从一个应用了Javascript的空闲地基开始，一个接一个的添加加强的应用层。由于使用了Modernizr，因此你容易知道浏览器都支持什么。下面咱们来看一个经过应用Modernizr来建立尖端网站的实例。session

从应用Modernizr开始

首先从www.modernizr.com下载Modernizr的最新的稳定版（目前国内封了Modernizr的官网，咱们能够从github上下载。或者更简单点，能够从堂主这里下载最新的1.7版的脚本文件），在官网上你还能够看到它支持检测的全部特性的清单（本文末位会给出这些清单，以便翻不了墙的童鞋能够知道都支持哪些）。下载完最新版本之后（做者写这篇文章的时候用的是1.5版），把它加入页面的<head>区域：

<!DOCTYPE html>  
<html>  
<head>  	
<meta charset="utf-8">  	
<title>My Beautiful Sample Page</title>  	
<script src="modernizr-1.5.min.js"></script>  
</head>  
…

接下来，向<html>元素添加“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">

Modernizr同时还会建立一个JS对象，被命名为“Modernizr”，其内容是为每个检测完的特性给出的布尔值结果组成的列表。若是浏览器支持新的canvas元素，那么“Modernizr.canvas”的值就是true；若是浏览器不支持这个新元素，那它对应的值就是false。这个JS对象针对某些功能还会包含更为详细的信息，如“Modernizr.video.h264”会告诉你浏览器是否支持这个特殊的编解码器。“Modernizr.inputtypes.search”会告诉你当前浏览器是否支持新的search input类型，等等。

咱们的未加工的简单小页面看起来有点像一个准测试系统了，但它具有更好的语义性和可访问性。让咱们为它添加一点基本的样式：一点文字格式、颜色和布局以使它更好看。目前位置，没什么新东西，只是为一个语义化结构的HTML页面添加表现样式，看看添加了样式后的页面。

下面，咱们要加强这个页面使得它更有意思。我想为头部的h1应用一个奇特的文字效果，把关于检测特性的列表分为两栏，而后将带有一张照片的关于Modernizr的部分的一切都弄到右边去。我还要把围绕页面内容的边框变美点。如今，更给力的CSS3使你能够对一条规则添加更多的属性，若是浏览器不支持这些属性，它会忽略它们。配合使用CSS的层叠（继承），你能够没必要依赖Modernizr而使用像“border-radius”这样的新属性。不过，使用Modernizr能够为你提供一些既有手段提供不了的功能：根据浏览器对新东西支持的差别动态修改的<html>的类名。我会经过对咱们的页面添加2条新的规则来讲明这点：

.borderradius #content {
  	border: 1px solid #141414;
  	-webkit-border-radius: 12px;
  	-moz-border-radius: 12px;
  	border-radius: 12px;  
}  
.boxshadow #content {
  	border: none;
  	-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  	-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  	box-shadow: rgba(0,0,0, .5) 3px 3px 6px;  
}

第一条规则为“#content ”元素添加了一个12像素的圆角。但在既有的页面里咱们已经为“#content ”元素设置了一个属性值为“2px outset #666”的边框，这在box是直角的时候是蛮好看的，但在圆角状况下就不是了。感谢Modernizr，我能够在浏览器支持“border-radius”的状况下给box设置一个1px的实边。

第二条规则更进步了一点，咱们为“#content ”元素添加了一个阴影，而且针对支持“box-shadow”属性的浏览器一并移除了border属性。为何呢？由于大部分浏览器并不为“边框附带边角”的组合外加阴影这样的效果提供一个好的表现（这是一个应该被注意的浏览器的瑕疵，但咱们如今却必须忍受它）。同不使用阴影只使用边框相比，我宁肯只使用阴影包围元素。采用这种方式，我能够拥有全世界最好的，准确点的，最好的一种CSS表现：在支持“box-shadow”属性的浏览器里将会呈现一个美妙的阴影；只支持“border-radius”属性的浏览器将会呈现一个好看的圆角薄边框；对于那些这2者都不支持的破烂浏览器，咱们会看到一个2像素的直角边框。

下面咱们要为header应用一个自定义的特殊字体，下面的是咱们目前针对h1的声明，没改动版的：

h1 {
  	color: #e33a89;
  	font: 27px/27px Baskerville, Palatino, "Palatino Linotype",
  	"Book Antiqua", Georgia, serif;
  	margin: 0;
  	text-shadow: #aaa 5px 5px 5px;  
}

这些声明在咱们的基础网页里工做良好，27像素的文字大小也很适合咱们为h1设置的那些字体的展现。但对于我要用的名叫“Beautiful”的字体来讲，27像素就过小了。下面咱们要添加其余的规则来使用这个自定义字体：

@font-face {
  	src: url(Beautiful-ES.ttf);
  	font-family: "Beautiful";  
}  

.fontface h1 {
  	font: 42px/50px Beautiful;
  	text-shadow: none;  
}

首先，咱们添加“@font-face”声明，并在其中为咱们的自定义字体指定路径、文件名和字体名。以后咱们用一条CSS语句为咱们的h1选择字体样式。你会看到，我这里选择了一个很大的字号，那是由于“Beautiful”字体自己就比其余字体的文字要小不少，因此咱们必需要指示浏览器在展现咱们自定义字体的时候，给予h1一个很大的字号。

此外，咱们漂亮的手写体文字在文字阴影方面存在一些渲染问题，因此咱们要在浏览器决定使用自定义文字时取消文字的阴影。另外，关于检测特征部分的列表还须要被分为两栏。为了达到目的，我要使用牛叉的CSS columns 属性，这一属性会使浏览器把列表智能分栏而不会打乱它的顺序，而咱们的列表，虽然没有数字序号，却也是按照字母顺序排列的。固然，不是全部的浏览器都支持这一属性，对于那些不支持的浏览器，咱们使用浮动来达到2栏的目的——使用了浮动后列表在视觉上不会再按照字母顺序排列，但那也好过什么都没有。

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

.no-csscolumns ol.features {
  	float: left;
  	margin: 0 0 20px;
  }  

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

我又一次使用了Modernizr来针对不一样的状况设置不一样的属性。若是浏览器支持CSS columns，它就会把列表完美的分为2栏，若是不支持，经过Modernizr为<html>添加的“no-csscolumns”类咱们也能够用浮动的方式使得列表变为两栏，虽然不那么完美，但也比直接来一个长串的单栏列表强。

这里您可能注意到了我为属性添加了不一样的前缀（-moz-、-webkit-、-o-），这是由于不一样的浏览器厂商对该功能的实现有不一样的定义，因此要实现该功能须要针对不一样的浏览器加上它们对应的前缀。

通过这些改变，咱们新的页面看起来更好了。

咱们将为咱们的页面添加进更多的渐进式加强效果来结束这篇教程。基于WebKit的浏览器支持一些更牛叉的特效，如CSS变换、动画和三维转换等。而且我想在最后一个阶段的页面中应用一些这类特效。再一次的，这些属性会被添加进咱们既有的CSS中并在不支持它们的浏览器中给忽视。因此，针对这种一方面是渐进加强一方面是不被支持的状况，使用Modernizr是恰当的。

首先设置的：

@-webkit-keyframes spin {
  	  0% { -webkit-transform: rotateY(0); }
  	100% { -webkit-transform: rotateY(360deg); }  
}  

.csstransforms3d.cssanimations section {
  	-webkit-perspective: 1000;  
}

@keyframes规则是新的CSS animations规范中的一部分，目前只有WebKit支持。它允许你针对任何属性声明一个完整的动画路径，并在你喜欢的任何阶段改变它们。想知道关于animations的更多知识，请阅读 W3C Working Draft specification。

下面咱们添加使得咱们一个元素在三维空间里旋转的代码：

.csstransforms3d.cssanimations section h2 {
  	background-image: url(modernizr-logo.png);
  	overflow: hidden;
  	-webkit-animation: spin 2s linear infinite;  
}

由于logo要转动，且又但愿它转的时候和背景相处的融洽些，因而这里用了一个png格式的文件。我还采用了一个“overflow:hidden”属性来隐藏设置了缩进-9999像素的header里的文字。使元素以3D的形式旋转虽然有趣却并不太美观。最终，咱们选择使用animation规则，设置它的旋转周期为2秒钟，沿着自身的中轴线旋转，永不中止。

最终的页面看起来很给力，甚至还针对WebKit浏览器设置了好玩的动画。我但愿到如今你能明白使用Modernizr可使你对网站控制的手腕变得多么牛叉，以及它能够令真正的渐进加强变得多么简单。这还不只仅是Modernizr的所有好处，它还能够帮你创建基于JS的fallbacks以及能够帮你应用html5那些牛掰的新特性。

附，Modernizr检测清单：

1. @font-face
2. Canvas
3. Canvas Text
4. WebGL
5. HTML5 Audio
6. HTML5 Audio formats
7. HTML5 Video
8. HTML5 Video formats
9. rgba()
10. hsla()
11. border-image
12. border-radius
13. box-shadow
14. text-shadow
15. Multiple backgrounds
16. background-size
17. opacity
18. CSS Animations
19. CSS Columns
20. CSS Gradients
21. CSS Reflections
22. CSS 2D Transforms
23. CSS 3D Transforms
24. Flexible Box Model
25. CSS Transitions
26. Geolocation API
27. Input Types
28. Input Attributes
29. localStorage
30. sessionStorage
31. Web Workers
32. applicationCache
33. SVG
34. Inline SVG
35. SVG Clip paths
36. SMIL
37. Web SQL Database
38. IndexedDB
39. Web Sockets
40. hashchange Event
41. History Management
42. Drag and Drop
43. Cross-window Messaging
44. Touch Events