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. 网络编程实现简单的ssh

    客户端:客户端实例  --->  建立连接 ----> 发送内容 ---> 接受内容. import socket client = socket.socket() client.c ...

  2. win10家庭版设置移动热点出现“我们无法设置移动热点”

    寝室wifi卡到爆炸,  买了一个360随身WiFi,可是360随身WiFi烧坏了  ...然后我就一个星期没玩游戏了 今天本来想开电脑的wifi试一试,结果发现无法设置热点 纳闷了 百度一下,发现都 ...

  3. vim文本编辑及文件查找应用3

    文件查找 locate,find两个命令 在文件系统上查找符合条件的文件: 实现工具:locate,find locate命令: 依赖于事先构建好的索引库,索引库可以由下边两种方式构建 系统自动实现( ...

  4. Golang对方法接收者变量的自动“取引用”和“解引用”

    原文:https://blog.csdn.net/u014633283/article/details/83826413 --------------------------------------- ...

  5. JS 时间差计算 XX秒前、XX小时前、XX天前

    //时间差 function GetTime(time) {//di作为一个变量传进来 //如果时间格式是正确的,那下面这一步转化时间格式就可以不用了 var dateBegin = new Date ...

  6. 【洛谷P2480】古代猪文

    题目大意:求 \[ G^{\sum\limits_{d|N}\binom{n}{k}} mod\ \ 999911659 \] 题解:卢卡斯定理+中国剩余定理 利用卢卡斯定理求出指数和式对各个素模数的 ...

  7. 4-windows启用账户锁定计数器

    1.打开本地策略编辑器 命令:gpedit.msc 2.找到账户锁定策略 3.右键属性,设置登录无效次数 注:这个策略修改完后,不需要重新服务器就能生效

  8. django + ckeditor + 七牛云，图片上传到七牛云

    传送门 本人使用的是 Django 的自带的管理后台,安装 ckeditor 富文本编辑器后,上传图片的时候直接传到七牛云的.

  9. 洛谷P1282 多米诺骨牌【线性dp】

    题目:https://www.luogu.org/problemnew/show/P1282 题意: 给定n个牌,每个牌有一个上点数和下点数.可以通过旋转改变交换上下点数. 问使得上点数之和和下点数之 ...

  10. 【Android-关闭所有Activity】关闭activity之前的所有activity，重启actibity

    Android关闭activity之前的所有activity,重启actibity 直接关闭一个activity之前的所有Activity页面 解决方法:清理activity堆栈 Intent ine ...