前端的瑞士军刀:Modernizr

发布日期:2015-09-16 17:22:32
在线社区总能发现各种浏览器的兼容性问题,并不断为我等凡人贡献解决方案,这一点让我既赞叹又着迷。我们在第 4章简要介绍过 Modernizr,到了最后一章又一次讲到它。
Modernizr是一个用于检测浏览器功能的开源JavaScript库。 Modernizr的第一版由Fauk Ate?开发,目前由 Alex Sexton和才华横溢的 Paul Irish担当首席开发人员。一些知名的公司已经开始使用这个工具,包括 Twitter、微软和谷歌。我说这些不只是为了吹捧 Modernizr的开发团队(他们确实值得吹捧) ,更重要的是想说明 Modernizr是 JavaScript杰作,绝不会昙花一现。坦率地说,它是一个值得深入理解和学习的工具。
那它到底做了什么?既能给老版本浏览器打补丁,又能保证新浏览器渐进增强的用户体验,它是怎么做到的,而我们又如何使其听任差遣呢?好好听着……

从实际操作来看, Modernizr默认做的事很少, 除了 (在你选择的情况下) 给不支持 HTML5标签的浏览器如 IE6、7、8追加一点由 Remy Sharp开发的 HTML5垫片脚本,使其可以识别 <aside> 、 <section> 等 HTML5元素之外,它主要做的就是浏览器“功能检测” 。
因此,它知道浏览器是否支持各种 HTML5和 CSS3特性。这就为我们根据浏览器特性采取不同行动提供了依据,剩下的事情就是我们如何具体实施了。所以,我们来给页面加入 Modernizr来试试效果。
第一步,下载 Modernizr

接下来,将文件保存在某个适当位置(和之前一样,我保存在根目录下的 js文件夹中) ,然后在页面的 <head> 中调用:
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-
scale=1" />
<title>北京网页设计</title>
<link href="css/main.css" rel="stylesheet" />
<script src="js/modernizr.js"></script>
</head>
使用了 Modernizr 之后,再通过 Firebug 或类似开发工具查看页面源代码时,就会看到HTML标签上追加了一堆不同的类名。在 Firefox v9.01中查看的示例效果如下:
<html class="js flexbox geolocation postmessage indexeddb history websockets rgba
hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow
opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms
no-csstransforms3d csstransitions fontface generatedcontent video audio
localstorage sessionstorage applicationcache" lang="en">
这种做法很棒。北京网站设计这样就可以区别具体的浏览器,告知我们它检测了那些特性,其中该浏览器支持哪些,不支持哪些(对不支持的特性,对应的类名前有 no- 前缀) 。基于此我们就可以做两件事:在 CSS 文件中逐个特性地修正样式,以及按需加载额外的 CSS 或 JS文件。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计