使用Modernizr探测HTML5/CSS3新特性的示例代码分享-H5教程-PHP中文网

首页

web前端

H5教程

使用Modernizr探测HTML5/CSS3新特性的示例代码分享

黄舟

Mar 21, 2017 pm 03:16 PM

HTML5, CSS3以及相关技术（例如canvas和web sockets）带来了非常有用的特性，可以让我们的web程序提升一个新的level。这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面。HTML5虽然提供了很多新特性，但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实，老版本浏览器已经使用了很多年，我们依然需要考虑这些版本的兼容性问题。本文要解决的问题就是：在我们使用HTML5/CSS3技术的时候，如何更好地处理不支持HTML5/CSS3特性的旧版本浏览器问题。

尽管我们可以自己写代码来判断浏览器是否支持某些HTML5/CSS3特性，但是代码都不是很简单。例如：写代码判断浏览器支付支持canvans，我们的代码可能和下面的类似：

<script>
    window.onload =  () {
 (canvasSupported()) {
            alert(&#39;canvas supported&#39;);
        }
    };

 canvasSupported() {
 canvas = document.createElement(&#39;canvas&#39;);
 (canvas.getContext && canvas.getContext(&#39;2d&#39;));
    }
</script>

如果要判断是否支持本地存储（local storage），代码可能和下面的类似，但是很容易再Firefox下产生bug。

<script>
    window.onload =  () {
 (localStorageSupported()) {
            alert(&#39;local storage supported&#39;);
        }
    };

 localStorageSupported() {
 {
 (&#39;localStorage&#39;  window && window[&#39;localStorage&#39;] != );
        }
(e) {}
 ;
    }
</script>

前面2个例子都是分别检查一个特性，如果有很多HTML5/CSS3特性的话，我们不得不写多份代码来判断，不过还算幸运的是这些代码没有依赖顺序。Modernizr可以让你用很少的代码来实现上述复杂的功能，让我们来看一下Modernizr的一些重要特性：

开始使用Modernizr

第一次我听到Modernizr的时候，我以为它的意思是modernized，可以在旧版本浏览器上添加一些HTML5/CSS3的新特性。事实上，Modernizr不是干这个的，它是帮助我们提高开发实践的，使用一个非常时髦的方法来帮助探测浏览器是否支持某种新特性，甚至可以加载额外的script脚本。如果你是一个web开发人员的话，那对你来说它就是一件很牛逼的兵器。

Modernizr官方站点：http://modernizr.com，2个类型的脚本你都可以使用（开发版和自定义的生产版本）。网站提供了一个自定义需求的工具来生成仅仅你需要的探测功能，而不是一个什么都可以探测的大而全的版本，就是说你可以让你的脚本最小化。下图是官方网站生成工具的界面，可以看到很多HTML5/CSS3和相关技术的探测功能都可以选择上。

下载完你自定义的脚本以后，你就可以像引用普通js文件一样引用它了，然后就可以用了。

<script src="Scripts/Modernizr.js" type="text/javascript"></script>

Modernizr和HTML元素

添加完Modernizr引用以后，它就立即生效了。运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox）。下面这段代码是运行在Chrome下的效果：

<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">=" js flexbox canvas canvastext webgl no-touch geolocation postmessage <br/>              websqldatabase indexeddb hashchange history draganddrop websockets <br/>　　　　　　　　rgba hsla multiplebgs backgroundsize borderimage borderradius <br/>　　　　　　　　boxshadow textshadow opacity cssanimations csscolumns cssgradients<br/>　　　　　　　　cssreflections csstransforms csstransforms3d csstransitions fontface <br/>　　　　　　　  generatedcontent video audio localstorage sessionstorage webworkers <br/>              applicationcache svg inlinesvg smil svgclippaths"</span><span style="color: #0000ff;">></span>

下面这段代码是运行在IE9下的效果：

<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">=" js no-flexbox canvas canvastext no-webgl no-touch geolocation <br/>              postmessage no-websqldatabase no-indexeddb hashchange no-history <br/>　　　　　　　　draganddrop no-websockets rgba hsla multiplebgs backgroundsize <br/>　　　　　　　　no-borderimage borderradius boxshadow no-textshadow opacity <br/>　　　　　　　　no-cssanimations no-csscolumns no-cssgradients no-cssreflections<br/>　　　　　　　　csstransforms no-csstransforms3d no-csstransitions fontface <br/>　　　　　　　　generatedcontent video audio localstorage sessionstorage <br/>　　　　　　　　no-webworkers no-applicationcache svg inlinesvg smil svgclippaths"</span><span style="color: #0000ff;">></span>

使用Modernizr，有可能会出现下面代码的情况（添加no-js名称到class里）：

<html class="no-js">

你可以访问(http://html5boilerplate.com)站点查看HTML5 Boilerplate相关的内容，或者(http://initializr.com)查看Initializr相关的内容，添加no-js class到html元素下，是告诉浏览器是否支持JavaScript，如果不支持就显示no-js，如果支持就把no-js删掉。非常爽，对吧？

结合HTML5/CSS3特性一起使用

你可以直接使用Modernizr在100db36a723c770d327fc0aef2ce13b1元素里生成的class名称，在你的css文件里定义相应的属性以便支持当前浏览器。例如，下面的代码可以属性，在支持shadow阴影的浏览器显示shadow，不支持的浏览器显示标准的边框：

{:;:;:;}{:;}

因为如果浏览器支持box-shadows的话，Modernizr就会将boxshadow class添加到100db36a723c770d327fc0aef2ce13b1元素，然后你可以将它管理到一个相应的p的id上。如果不支持，Modernizr就会将no-boxshadow class添加到100db36a723c770d327fc0aef2ce13b1元素，这样显示的就是一个标准的边框。这样我们就可以很方便地在支持CSS3特性的浏览器上使用CSS3新功能，不支持的浏览器上继续使用以前的方式。

Modernizr除了添加相应的class到100db36a723c770d327fc0aef2ce13b1元素以外，还提供一个全局的Modernizr JavaScript对象，该对象提供了不同的属性来表示某种新特性在当前浏览器下是否支持。例如，下面的代码可以用于判断浏览器是否支持canvas和local storag。对于多个开发人员在多版本浏览器下开发测试的时候很有好处的，大家可以统一代码。

$(document).ready( () {
 (Modernizr.canvas) {
    }

 (Modernizr.localstorage) {
    }
});

全局的Modernizr对象也可以用来探测是否支持CSS3特性，下面的代码用于测试是否支持border-radius 和CSS transforms:

$(document).ready( () {
 (Modernizr.borderradius) {
        $(&#39;#Myp&#39;).addClass(&#39;borderRadiusStyle&#39;);
    }

 (Modernizr.csstransforms) {
        $(&#39;#Myp&#39;).addClass(&#39;transformsStyle&#39;);
    }
});

其它的一些CSS3特性可以探测到结果，例如：opacity, rgba, text-shadow, CSS animations, CSS transitions, multiple backgrounds等等

使用Modernizr加载Script脚本

在某些不支持新特性的浏览器上，Modernizr不仅仅提供了上述方式告诉你，也提供了load功能允许你加载一些shim/polyfill脚本来达到支持的目的。Modernizr提供了一个脚本加载器来判断一个功能，如果不支持就加载相应的脚本。单独的脚本也可以在http://yepnopejs.com找到。

可以使用Modernizr的load()函数来动态加载脚本，该函数的test属性是表明要测试是否支持的新特性，如果测试成功支持的话，就加载yep属性设置的脚本，如果不支持就加载nope属性设置的脚本，不管是否支持，both属性里设置的脚本都会加载的。例子代码如下：

Modernizr.load({
    test: Modernizr.canvas,
    yep:  &#39;html5CanvasAvailable.js’,
    nope: &#39;excanvas.js’, 
    both: &#39;myCustomScript.js&#39; 
});

在该例子里，Modernizr会判断当前浏览器是否支持canvas特性，如果支持，那就会加载html5CanvasAvailable.js和myCustomScript.js这两个脚本，如果不支持，就会加载excanvas.js（用于IE9之前的版本）脚本文件以让该浏览器支持canvas功能，然后再加载myCustomScript.js脚本。

因为Modernizr可以加载脚本，所以你还可以用于其它的用途，比如，如果你引用的第三方脚本（例如提供CDN服务的Google和Microsoft提供jquery的托管）加载失败的情况下，可以加载备用的文件。下面的代码是Modernizr提供的一个加载jquery的示例：

Modernizr.load([
    {
        load: &#39;//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js&#39;,
        complete:  () {
 (!window.jQuery) {
                Modernizr.load(&#39;js/libs/jquery-1.6.4.min.js&#39;);
            }
        }
    },
    {
                load: &#39;needs-jQuery.js&#39;
    }
]);

该代码会首先从Google CDN加载jQuery文件，如果下载或加载失败，complete函数就会执行，首先判断jQeury对象是否存在，如果不存在，Modernizr就会加载定义好的本机js文件，如果连 complete里的文件都加载不成功，就会加载needs-jQuery.js文件。
总结：

如果你正在使用最新的HTML5/CSS3来构建你的程序，Modernizr绝对是一个必需的工具。使用它你可以节约很多代码以及测试工作量，甚至可以对一些不支持新特性的浏览器通过额外加载脚本的形式来实现相应的新特性。

以上是使用Modernizr探测HTML5/CSS3新特性的示例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5代码示例：实际应用和教程Apr 25, 2025 am 12:10 AM

H5提供了多种新特性和功能，极大地增强了前端开发的能力。1.多媒体支持：通过和元素嵌入媒体，无需插件。2.画布（Canvas）：使用元素动态渲染2D图形和动画。3.本地存储：通过localStorage和sessionStorage实现数据持久化存储，提升用户体验。

H5和HTML5之间的连接：相似性和差异Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一个版本，包含新元素和API；H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码，H5应用则需要容器运行并通过JavaScript与原生代码交互。

H5代码的基础：密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等，用于构建现代网页。1.定义头部内容，2.用于导航链接，3.表示独立文章内容，4.组织页面内容，5.展示侧边栏内容，6.定义页脚，这些元素增强了网页的结构和功能性。

HTML5和H5：了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别，H5是HTML5的简称。1.HTML5是HTML的第五个版本，增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用，适用于各种移动设备。

HTML5：现代网络的基础（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本，由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强，提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签，如、、、等，使网页结构更清晰，SEO效果更好。HTML5支持多媒体元素和，无需第三方插件，提升了用户体验和加载速度。HTML5增强了表单功能，引入了新的输入类型如、等，提高了用户体验和表单验证效率。

H5代码：编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码？答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等，提升代码可读性和SEO效果。2.保持代码结构化和可读性，使用适当缩进和注释。3.优化性能，通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误，如标签未闭合，确保代码有效性。