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. shell数组处理

    linux shell在编程方面比windows 批处理强大太多,无论是在循环.运算.已经数据类型方面都是不能比较的. 下面是个人在使用时候,对它在数组方面一些操作进行的总结.   1.数组定义   ...

  2. ie11浏览器不显示vbs脚本

    最初接触学习vbs在浏览器上运行,老不显示vbscript脚本语言,所以找了很久,最后就用这个方法吧,比较简单有效 原因:新版IE不再支持 VBScript,就是因为微软已经放弃把VBScript作为 ...

  3. udp单播，广播，多播实现（ReceiveFromAsync，SendToAsync）

    注意:客户端和服务器实现基本一致,本地host和port和多播的host和port可以一样 (1)多播 1.将本地host加入多播组中,只有加入多播组的成员才能接受同组的节点发送的多播 Multica ...

  4. 模块化开发之Amd规范和Cmd规范

    CMD规范:是SeaJS 在推广过程中对模块定义的规范化产出的. AMD规范:是 RequireJS 在推广过程中对模块定义的规范化产出的 // CMD define(function(require ...

  5. Series拼接回DataFrame

    从这样的表,如何计算一行汇总层拼接回去

  6. 第四章 Jinja2模版

    模板简介: 在之前的章节中,视图函数只是直接返回文本,而在实际生产环境中的页面大多是带有样式和复杂逻辑的HTML代码,这可以让浏览器渲染出非常漂亮的页面.目前市面上有非常多的模板系统,其中最知名好用的 ...

  7. Java xml和map,list格式的转换-摘抄

    import java.io.ByteArrayOutputStream; import java.util.ArrayList; import java.util.HashMap; import j ...

  8. effective c++ （四）

    条款10:令operator=返回一个reference to *this 为了实现“连锁赋值”,赋值操作符必须返回一个reference指向操作符的左侧实参,这是你为classes实现赋值操作符时应 ...

  9. C#实现代码生成器

    最近在用layui做后台管理,增删改查这些一成不变的东西写起来浪费大量时间,于是做了个简单的代码生成器快速生成 代码生成器的原理其实很简单,都是基于模板实现替换,Razor是个不错的选择(或者Nvel ...

  10. Postman请求运行顺序及Workflow

    作为一款接口调试利器, Postman的更新迭代速度很快, 不断加入了很多新的功能.使的api设计,测试,监控, Mock,以及团队协作更加方便. 修改执行顺序 在遇到有接口依赖的情况, 我们往往需要 ...