Modernizr与HTML5

最新推荐文章于 2021-11-24 17:50:44 发布

wjtlht928

最新推荐文章于 2021-11-24 17:50:44 发布

阅读量413

点赞数

分类专栏： js html5

本文链接：https://blog.csdn.net/wjtlht928/article/details/45271991

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

其实modernizr就是为HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库，著名的HTML5/CSS3浏览器兼容性网站FindmeByIP就是基于该框架实现的。

modernizr的功能其实很简单，就是用js检测浏览器对HTML5/CSS3的特性支持情况，支持某个属性，就在页面的标签上添加一个相应的class，不支持的话就添加一个no-前缀的class，比如，如果检测的浏览器支持video标签，modernizr就会在标签上添加video类，否则，添加no-video类。

查看FindMeByIP的源码或者用firebug之类的工具查看页面代码，就可以看到标签中的class。

另外，modernizr也提供了另外一种用法，就是单独的检测浏览器对某个特性的支持情况，例如：

if (Modernizr.video) { }

通过类似的接口检测浏览器对HTML5的支持情况，是比较安全的。

浏览器检测：UA VS 特性

其实大家通常都会用UA去检测一个浏览器，当然ua也提供了更丰富的信息，UA不是万能的，它也有一些弱点，比如，用户浏览器的UA伪装，某些落后浏览器提供的UA信息太少，这些都会影响到对浏览器信息的判断。更重要的是，对于HTML5特性来说，用UA去判断一个浏览器是否支持某个特性，实现太复杂而且不靠谱。

当然，关于UA和特性检测的争论一直都有，我这里想说的是，具体问题具体分析，在网站中使用HTML5来检测特性支持要比UA更靠谱、更方便～～
使用Modernizr

modernizr的用法很简单，仅仅在页面中引入库的js文件即可：

<script type="text/javascript" src="modernizr-1.5.js"></script>

运作原理

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>

wjtlht928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Modernizr与HTML5

其实modernizr就是为HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库，著名的HTML5/CSS3浏览器兼容性网站FindmeByIP就是基于该框架实现的。modernizr的功能其实很简单，就是用js检测浏览器对HTML5/CSS3的特性支持情况，支持某个属性，就在页面的标签上添加一个相应的class，不支持的话就添加一个no-前缀的class，比如，如果检
复制链接

扫一扫

专栏目录