modernizr

柴瀚昂

2023-12-01

HTML5Shiv允许就浏览器识别出HTML5元素，并可以为其添加样式—-它只是简单地创建了HTML5对象，让CSS和JavaScript可以应用在元素本身。Modernizr做了同样的事情，并且在此基础上还添加了特性检测。它会告诉你特征存在与否，该怎么处理还是开发者自己决定的。

HTML5Shiv会使像<video>这样的标签生效，但是它并不会使HTML5的视频在就浏览器得以播放。虽然这个标签是可用的，并能够添加样式，然而视频并不能在这些浏览器里播放。Modernizr不仅能够让video标签可用，并且能够为不支持该特性的浏览器提供备选方案。在视频例子中，你能够用Modernizr在不支持视频的浏览中降级为使用Flash去播放视频。（直接提醒用户升级浏览器吧。。。）

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="modernizr-2.8.3.min.js"></script>
</head>
<body>
  <span class="span-svg">support</span>
  <span class="span-no-svg">not support</span>

  <script>
    if(Modernizr.svg) {
      alert(1)
    } else {
      alert(2);
    }
  </script>
</body>
</h

在head标签中添加modernzr的script，并且在html标签上添加类 “no-js”。在浏览器打开，可以发现，html标签上添加了很多类。如果浏览器支持该特性（比如svg），就会在html标签添加类svg；如果不支持svg，就会添加类no-svg。其他特性也是如此。所以我们就可以根据不同的类定制样式。

.svg span {display: none;}
.svg .span-svg {display: inline;}
.no-svg .span-no-svg {display: inline}

此外，可以在脚本中检测modernizr支持的特性，以便动态生成页面。脚本中生成了一个全局变量Modernizr。如果支持该特性，返回值是true；不支持时返回值是false。

if(Modernizr.svg) {

} else {}

另外一个有用的特性是Modernizr.load和yepnope，后者是一个资源加载器，默认集成在modernizr中。

<script>
  Modernizr.load({
    test: Modernizr.svg,
    yep: 'svg.css', //支持该特性，加载资源
    nope: 'no-svg.css' //不支持该特性，加载资源 
  })
  // 测试多个的写法
  Modernizr.load([
    {
      test: Modernizr.svg,
      yep: ['svg.css', 'svg.js'], 
      nope: 'no-svg.css'
    },
    {
      test: Modernizr.opacity,
      yep: ['opacity.css', 'opacity.js'],
      nope: 'no-opacity.js'
    }
  ])
</script>

modernizr

相关阅读

相关文章

相关问答