建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

用于检测用户浏览器中的HTML5和CSS3功能的JS库Modernizr

来源:易助科技浏览量:12收藏

简介


Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。 它比传统检测浏览器名称(浏览器嗅探)的方式更为可靠。 一整套测试的执行时间仅需几微秒。 此外,Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测,从而实现效率优化。

当使用 Modernizr 检测 CSS3 支持情况时,你无需具备任何 JavaScript 的知识。 你仅需在网页中插入文件,它随即根据浏览器的功能情况在页面的<html>标签上添加一组类。 相应类的名称已经符合标准化的要求并浅显易懂。 例如,如果浏览器支持 box-shadow 属性,则需要添加相应的 boxshadow 类;否则,添加一个 no-boxshadow类即可。 你所要做的一切只不过是创建一个使用这些类的式样表,以便为相应浏览器提供合适的式样。

Modernizr 可轻松实现 JavaScript 解决方案,即人们熟知的 polyfills——它模拟HTML5 相关功能和技术,如地理定位。 然而,你的确需要对 JavaScript 有基本了解以便使用这些功能和技术。 术语polyfill 来源于一种填补裂缝的黏土的英国品牌Polyfilla(即美国人熟知的填泥料)。 这里,polyfill 用来填补浏览器功能上的漏洞。 有时,Modernizr 可无缝地执行这项任务。 但本质上,这只是一种修补工作,所以,不能依赖它产生无漏洞浏览器所实现的完全相同结果。



使用


Modernizr.load是一个资源加载程序(CSS和JavaScript),专门用于与Modernizr并行工作。它在您的构建中是可选的,但如果您正在加载polyfill,它很有可能为您节省一些带宽并提高性能。

Modernizr.load语法通常很容易理解,因此我们将从一个基本示例开始:


Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});


在本例中,我们决定根据主机浏览器是否支持地理定位来加载不同的脚本。通过这样做,可以避免用户下载浏览器不需要的代码。这提高了页面性能,并为您的polyfill提供了一个清晰的抽象空间(“geo.js”和“geopolyfill.js”对应用程序的其他部分来说似乎是一样的,即使它们的实现方式不同)。

你很可能对现在的脚本下载速度并不感到非常不满,但你会很高兴地知道Modernizr.load不会减慢任何速度,有时可以通过异步和并行加载脚本来小幅提高性能。这方面有很多变量需要权衡,所以我们建议你尝试一些事情,以确保你在特定情况下获得最大的表现。

Modernizr.load很小也很简单,但它可以为你做很多繁重的工作。这里有一个稍微复杂一点的例子,当您的脚本依赖于多个Modernizr功能测试时,使用Modernizr.load。一个好的技术是将多个polyfill脚本打包为一个“oldbrowser”类型的脚本,这样就不会一次加载太多脚本。以下是可能的工作方式:


// Give Modernizr.load a string, an object, or an array of strings and objects
Modernizr.load([
  // Presentational polyfills
  {
    // Logical list of things we would normally need
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    // Modernizr.load loads css and javascript by default
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // Functional polyfills
  {
    // This just has to be truthy
    test : Modernizr.websockets && window.JSON,
    // socket-io.js and json2.js
    nope : 'functional-polyfills.js',
    // You can also give arrays of resources to load.
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // Run this after everything in this group has downloaded
      // and executed, as well everything in all previous groups
      myApp.init();
    }
  },
  // Run your analytics after you've already kicked off all the rest
  // of your app.
  'post-analytics.js'
]);


Modernizr.load的一个很酷的特性是它完全解耦了脚本的加载和执行。这对您来说可能意义不大,但HTML5 Boilerplate的用户可能熟悉jQuery回退的Google CDN副本。它看起来像这样:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>


它的工作原理是尝试在脚本中加载,然后立即测试jQuery对象是否可用。如果不是,那么他们加载jQuery的本地副本作为后备。这在脚本加载程序中通常不那么容易,但Modernizr.load已经为您提供了帮助。您可以使用相同的逻辑,Modernizr.load将为您处理执行顺序:


Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.7.1.min.js');
      }
    }
  },
  {
    // This will wait for the fallback to load and
    // execute if it needs to.
    load: 'needs-jQuery.js'
  }
]);


不过,需要注意的是:只将此技术用作回退的方法,因为它会强制脚本以串行方式而不是并行方式加载,从而影响性能。

Modernizr.load也是可扩展的。您可以为脚本加载自己的前缀和筛选器。有关这方面的更多高级信息,您可以查看yepnopejs.com主页上的文档。您甚至可以替换加载过程的整个步骤,并用自定义逻辑替换它们。因此,开始使用它并保存那些宝贵的字节。



相关链接


官网地址 :  https://modernizr.com/

GitHub 地址 :  https://github.com/Modernizr/Modernizr

npm 地址 :  https://www.npmjs.com/package/modernizr