Modernizr使用
来源:互联网 发布:喷涂往复机怎么编程 编辑:程序博客网 时间:2024/06/04 15:32
Modernizr 是一套 JavaScript 函式库,用来侦测浏览器是否支援次世代的网站技术,这些新的网站技术是来自仍在持续发展的 HTML5 与 CSS3 规格。
目录
[隐藏]- 1 概要
- 2 运作原理
- 3 执行
- 4 范例
- 5 相关条目
- 6 参考资料
- 7 外部链接
概要[编辑]
许多 HTML5 与 CSS 3 的功能已经在许多主流的浏览器中实作出来。Modernizr 能够告诉开发者,浏览器是否已经实作他们想要的功能[1][2][3][4]。这让开发者在浏览器上可以充分利用这些新功能,或者尝试制作解决方案来支援那些老旧的浏览器。
运作原理[编辑]
Modernizr不同于传统透过解析浏览器的用户代理的识辨方式,认为这种方式亦不可靠,例如使用者可以手动更改它们浏览器的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>
- Modernizr使用
- 如何使用Modernizr
- modernizr的使用
- modernizr的使用
- modernizr插件使用心得
- Modernizr.js-使用
- Modernizr
- Modernizr
- modernizr
- Modernizr
- Modernizr的介绍和使用
- Modernizr的介绍和使用
- Modernizr的介绍和使用
- Modernizr的介绍和使用
- Modernizr的介绍和使用
- Modernizr的介绍和使用
- Modernizr的介绍和使用
- Modernizr的使用和原理
- mac上搭建openfire服务器
- Windows SharePoint Services 默认母版页
- 用socketpair()进行进程间的全双工通讯
- 今天看到一份资料上有讲到Oracle分页优化
- c# 委托与多线程
- Modernizr使用
- Objective-C语法之代码块(block)的使用
- 使用异步 I/O 大大提高应用程序的性能
- 【算法导论】链表队列
- 第十五周上机实践项目——带姓名的成绩单
- PPP协议全面分析
- 冒泡排序
- javaw - javaw.exe - 进程信息
- Google Analytics in ADF using javascript