Modernizr
Modernizr是一套JavaScript 函式库，用来侦测浏览器是否支持HTML5与CSS3等规格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。
 | |
| 原作者 | Faruk Ateş |
|---|---|
| 开发者 | Faruk Ateş, Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, and contributors |
| 首次发布 | 1 July 2009[1] |
| 当前版本 | 3.3.1[2]（15 January 2016） |
| 源代码库 | |
| 编程语言 | JavaScript |
| 类型 | JavaScript 函式库 |
| 许可协议 | MIT; 它是MIT-BSD双许可协议,自2010年6月14日[3] - 2012年9月15日[4] |
| 网站 | modernizr |
概要
许多HTML5与CSS 3的功能已经在许多主流的浏览器中实作出来。Modernizr能够告诉开发者，浏览器是否已经实作他们想要的功能[5][6][7][8]。这让开发者在浏览器上可以充分利用这些新功能，或者尝试制作解决方案来支援那些老旧的浏览器。
运作原理
Modernizr不同于传统透过解析浏览器的用户代理（User agent）的识辨方式，认为这种方式亦不可靠，例如使用者可以手动更改它们浏览器的User agent、即便是相同的网页解析引擎，在不同的浏览器中也不一定支援相同的功能。因此Modernizr通常会建立一个特定样式的元件，然后立刻尝试改写这些元素的设定，若在支援的浏览器上，元件会回传有意义的值。但在不支援的浏览器则会回传空值或“undefined”。Modernizr利用这些结果来判断浏览器是否支援这些功能。
Modernizr能测试超过100种以上的旧版非主流浏览器功能。测试的结果会储存在一个名为“Modernizr”的物件里，里面包含了测试结果的布林值。并且根据支援或不支援的功能，新增class名称给HTML标签元件。
在说明文件内提供了许多测试的小段程式码样本，让开发者可以在他们的网站开发工作流程中使用这些测试。
执行
Modernizr会自动执行。不需要呼叫modernizr_init()之类的函式。执行时会建立一个名为Modernizr的元件，里面包含了一组测试结果是否支援的布林值。举例来说，如果浏览器支援Canvas API，Modernizr.canvas属性的值就会是true；如果浏览器不支援Canvas API，Modernizr.canvas属性的值就会是false：
if (Modernizr.canvas) {
// 開始畫圖吧！
} else {
// 瀏覽器不支援原生的畫板。
}
范例
Modernizr JavaScript范例：
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Modernizr - Javascript Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
if(Modernizr.websockets) {
$("#result").html('你的瀏覽器支援Web Sockets');
} else {
$("#result").html('你的瀏覽器不支援Web Sockets');
}
});
</script>
</head>
<body>
<p id="result"></p>
</body>
</html>
Modernizr CSS范例：
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Modernizr - CSS Example</title>
<style type="text/css" media="screen">
div.wsno, div.wsyes { display: none }
.no-websockets div.wsno { display: block }
.websockets div.wsyes { display: block }
</style>
<script src="modernizr.js" type="text/javascript"></script>
</head>
<body>
<div class="wsno">
你的瀏覽器不支援WebSockets。
</div>
<div class="wsyes">
你的瀏覽器支援WebSockets。
</div>
</body>
</html>
相关条目
参考资料
- ^ Faruk Ateş. Proudly Announcing Modernizr. 1 July 2009 [2012-09-02]. （原始内容存档于2016-08-01）.
- ^ Modernizr 3.3.1. 14 January 2016 [2016-09-13]. （原始内容存档于2020-09-26）.
- ^ Modernizr 1.5: new features, unit tests added. Modernizr. 14 June 2010 [30 July 2013]. （原始内容存档于2020-09-27）.
- ^ Remove BSD license and improve readme. GitHub. 15 September 2012 [30 July 2013]. （原始内容存档于2020-11-04）.
- ^ Faruk Ateş. Taking Advantage of HTML5 and CSS3 with Modernizr. June 22, 2010. （原始内容存档于2013-01-22）.
- ^ Gil Fink. Detecting HTML5 Features Using Modernizr. Jan 10, 2011. （原始内容存档于2016-03-03）.
- ^ Daniel Sellergren. Using Modernizr to Determine HTML5 CSS3 Support. Feb 2011. （原始内容存档于2011-08-14）.
- ^ David Powers. Using Modernizr to detect HTML5 and CSS3 browser support. （原始内容存档于2015-02-08）.
外部链接
- 官方网站
- Drupal integration with Modernizr. [2012-09-02]. （原始内容存档于2019-08-09）.
- W3C HTML5（页面存档备份，存于互联网档案馆）
- W3C geolocation（页面存档备份，存于互联网档案馆）
- Web workers
- Web worker basics（页面存档备份，存于互联网档案馆）
- [1]
- Creating Cross Browser HTML5 Forms Now（页面存档备份，存于互联网档案馆）
- webdesignernote（页面存档备份，存于互联网档案馆）
- HTML Boilerplate in Ajaxian Archives（页面存档备份，存于互联网档案馆）
- Faruk Ateş. Proudly Announcing Modernizr. [2012-09-02]. （原始内容存档于2016-08-01）.
- Speeding Up With Modernizr. [2012-09-02]. （原始内容存档于2012-09-15）.