HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。

该技术通过组合 HTML、CSS 和 JavaScript 可以开发出桌面应用具有的效果。

尽管 HTML5 承诺很多，但现实中对 HTML5 支持的浏览器以及 HTML5 标准本身的完善程度都还没有到一个很成熟的程度。

现在完全不担心浏览器支持是不现实的，还需要时间，因此当我们决定要采用 HTML5 技术开发 Web 应用的时候，我们需要对浏览器所支持的特性进行检测。

而 Modernizr 就可以帮助你完成对浏览器所支持 HTML5 特性的检查。

下面代码检测浏览器是否支持 Canvas：

下面代码检测浏览器是否支持本地存储：

上面的两个例子中我们可以很直观的对浏览器的特性进行检查以确保我们在对应的浏览器上应用的功能能否正常运作。
而使用 Modernizr 的好处还在于你不需要这样一项项去检查，还有更简单的方法，下面我们开始：当我第一次听到 Moderizr 这个项目时，

我以为这是一个让一些老的浏览器能支持 HTML5 的 JS 库，事实上不是，它主要是检测的功能。
Modernizr 可以通过网址 http://modernizr.com 来访问，该网站同时还提供一个定制脚本的功能，你可以确定你需要检测什么特性，

并依此来生成相应的 JS 文件，这样可以减少不必要的 JS 代码。

一旦下载了 Modernizr 的 JS 文件后，就可以通过 <script> 标签引入到网页中。

检测 HTML 元素一旦我们在页面上引入了 Modernizr 后就可以立即使用，我们可以在 <html> 元素中声明不同的 CSS 类，这些类定义了所需要支持或者不支持的特性，不支持的特性其类名一般是 no-FeatureName，例如 no-flexbox。下面是一个在 chrome 上可运行的例子：

还可以这样来判断浏览器是否启用了 JavaScript 支持：

你可以在 HTML5 Boilerplate (http://html5boilerplate.com) 或者是 Initializr (http://initializr.com) 看到一些入门的例子，根据上面的步骤，增加 no-js 类可以判断浏览器是否启用了 JavaScript 支持。
使用 HTML5 和 CSS3 特性你为 <html> 标签增加的 CSS 属性，可以直接在 CSS 中定义所需要的样式，例如：

如果浏览器支持 box-shadows 的话，将会为 <html> 元素增加 boxshadow 这个 CSS 类，否则的话就使用 no-boxshadow 这个类。这样假设浏览器不支持 box-shadow 的话，我们可以使用其他的样式来进行定义。
另外我们也可以使用 Modernizr 的对象来操作这个行为，例如下面的代码用来检测浏览器是否支持 Canvas 和 本地存储：

全局的 Modernizr 对象同样可用于测试 CSS3 特性是否支持：

使用Modernizr加载脚本

在出现了浏览器不支持某些功能的的情况下,你不仅可以提供一个不错的备用方案,还可以加载shim/polyfill脚本在适当情况下填补缺失的功能 (想了解更多关于shims/polyfills的信息,请查看 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Modernizr拥有一个内置的脚本加载器,可以用来测试一个功能,并在功能无效的时候加载另一个脚本. 脚本加载器是内置在Modernizr中的,并且是有效的独立yepnope(http://yepnopejs.com)脚本. 脚本加载器非常容易上手,它根据特定浏览器功能的可用性,真的会简化加载脚本的过程.
你可以使用Modernizr的load()方法来动态加载脚本,该方法接受定义被测功能的属性(test属性), 如测试成功后要加载的脚本(yep属性), 如测试失败后要加载的脚本(nope属性), 和无论测试成功还是失败都要加载的脚本(both属性). 使用load()及其属性的示例如下:

在这个例子中Modernizr在加载脚本时还会测试是否支持canvas功能 . 如果目标浏览器支持HTML5 canvas就会加载html5CanvasAvailable.js脚本及 myCustomScript.js脚本 (在这个例子中使用yep属性有点牵强  – 这只是为了演示load()方法中的属性如何使用 ). 否则的话, 就会加载 excanvas.js这个 polyfill脚本来为IE9之前版本的浏览器添加功能支持 . 一旦excanvas.js被加载,myCustomScript.js也会接着被加载.

由于Modernizr会处理加载脚本, 所以你可以用它来做些别的事情. 比如, 在Google或微软提供的第三方CDN不管用的时候，你可以用Modernizr来加载本地的脚本. Modernizr文档中提供了在CDN挂掉后提供本地jQuery后备过程的示例:
代码会先尝试从Google CND加载jQuery. 一旦脚本下载完成(或者下载失败)就会调用某个方法. 这个方法会检查jQuery对象是否有效,如果无效就加载本地的jQuery脚本. 并在其后加载一个名为needs-jQuery.js的脚本.
最后想说的是，如果你打算开发基于 HTML5 和 CSS3 的 Web 应用的话，那 Modernizr 就是你必不可少的工具，除非，除非你确认你所有客户所使用的浏览器支持你所写的代码。
---------------------
作者：yeana1
原文：https://blog.csdn.net/yeana1/article/details/51820472

怎么去检测浏览器支不支持html5和css3？的更多相关文章

  1. Safari支不支持HTML5录音？ 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。

    先放结论:Safari支不支持HTML5录音? ——据我调查,不支持. 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API. 可是当使用Can I us ...

  2. js解决IE8不支持html5，css3的问题（respond.js 的使用注意）

    IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js  是用来让ie8 ...

  3. 让 VS2010 支持 HTML5 和 CSS3.0

    现在的热门话题之一是HTML5 和 CSS3.好的, 它们都很时髦,它们也必然会影响网络开发的未来. 让我们尝尝鲜,花点时间安装设置一下,尽快让Visual Studio2010支持HTML5 和 C ...

  4. 让VS2010也支持html5和css3语法验证

    让VS2010也支持html5和css3语法验证 步骤: 首先打开VS2010或者可自行下载均可,我这里是利用VS的扩展器 弹出如下画面,然后选在,联机库,在右上角输入css3,即可看到下面,然后选中 ...

  5. 解决浏览器不支持HTML5和CSS3

    Modernizr插件可用于解决:<响应式web设计>提及! 其他: 第一种方法:IE9以下版本的IE将创建HTML5标签, 非IE浏览器会忽略这段代码,因此不会发生http请求,也就不影 ...

  6. 老式浏览器支持html5和css3

    在IE页面的head标签里面加入   <!-[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/ ...

  7. 老式浏览器支持html5与css3

      html5低版本浏览器兼容方式 <!--[if IE]> <script src=”http://apps.bdimg.com/libs/html5shiv/3.7/html5s ...

  8. 判断浏览器是否支持html5和css3属性

    本文章内容是由一个前辈写的. CSS3特有的属性moz-Transform //判断是否具有相应属性 testProps: function (props) { var i; for (i in pr ...

  9. Html5shiv ---- 让IE低版本浏览器识别并支持HTML5标签

    Html5shiv.js是针对IE浏览器的 javaScript 补丁,作用如题 该脚本的下载链接 使用使在head标签中使用script标签引用即可

随机推荐

  1. 通过mysql 连接远程数据库时，输入密码后，提示10060错误

    能提示输入密码,说明网络能够连接,而且能连到服务器.输入密码后提示错误,说明应该是权限问题 解决方法: ​一.进入mysql数据库命令行 ​二.输入use mysql; ​三.设置root账号密码为1 ...

  2. django的几种缓存配置

    前言 首先说,为什么要用缓存的,由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存 ...

  3. SQLite3学习笔记(2)

      SQLite 创建表 SQLite 的CREATE TABLE 语句用于在任何指定的数据库创建一个新表. 创建新表,涉及到命名表.定义列及每一行的数据类型. CREATE TABLE 的基本语法如 ...

  4. VS---《在VS2010中 使用C++创建和使用DLL》（003）

    VS---<在VS2010中 使用C++创建和使用DLL>(003) 这里实现一下,之前写好的一个工程(定义一个函数f + main函数调用),转成DLL.调用DLL测试.在两个工程里,分 ...

  5. SVN建立分支和合并代码

    1.SVN建立分支正确SVN服务器上会有两个目录:trunk和branches.trunk目录下面代码就是所谓的主版本,而branches文件夹主要是用来放置分支版本.分支版本是依赖于主版本的,因此建 ...

  6. 2sum问题求解

    什么是2sum问题呢?举个例子就明白了:对于数列:[0.1.2.3.4.5.6.7.8.9],求两数相加=9的所有两数的组合,所以结果为:[0.9],[1.8],[2.7],[3.6],[4.5].所 ...

  7. linux基础_vi和vim快捷键

    (1)拷贝当前行 yy,拷贝当前行向下5行 5yy,并粘贴. (2)删除当前行 dd, 删除当前行向下的5行 5dd. (3)在文件中查找某个单词.[在命令行下使用 /+关键字,回车查找,输入n就是查 ...

  8. CF487E Tourists[圆方树+树剖(线段树套set)]

    做这题的时候有点怂..基本已经想到正解了..结果感觉做法有点假,还是看了正解题解.. 首先提到简单路径上经过的点,就想到了一个关于点双的结论:两点间简单路径上所有可能经过的点的并等于路径上所有点所在点 ...

  9. C# 截取屏幕方法

    this.Visible = false; System.Threading.Thread.Sleep(); Bitmap bit = new Bitmap(Screen.PrimaryScreen. ...

  10. mysql 主从复制不一致，不停库不锁表恢复主从同步

    注意: 进行此操作时,确认在之前已经开启了MySQL的bin-log日志,如果没有则无法实现 为了安全考虑,我们授权一个用户进行数据备份: [root@7con ] mysql -uroot -p m ...