• 　　Modernizr是什么？

　　Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。 它比传统检测浏览器名称（浏览器嗅探）的方式更为可靠。 一整套测试的执行时间仅需几微秒。

  • 　　如何检测?

　　在页面中引入modernizr.js，当打开页面时Modernizr会根据浏览器的支持情况在html标签中添加了一组类，通过这些类就可以判断当前浏览器对html5和CSS3的 支持情况。

下面是个简单的html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="modernizr.js"></script>
</head>
<body>
    Hello World!
</body>
</html>

用chrome浏览器打开页面后按F12，

图1：html标签

  1. 　　检测CSS3，如果浏览器不支持某个功能，那么相应类的名称用no-作前缀。

举例：判断是否支持box-shadow，如果不支持使用另外一种样式。

.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }

Modernizr中文文档

下载地址：https://modernizr.com/download?setclasses

检测浏览器对HTML5和CSS3支持情况的利器——Modernizr的更多相关文章

  1. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  2. 检测浏览器对HTML5新input类型的支持

    HTML5新增加了很多input元素类型,比如color,date,datetime,datetime-local,email,month,number,range,search,tel,time,u ...

  3. 努力学习 HTML5 （4）—— 浏览器对语义元素的支持情况

    经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> ...

  4. 老式浏览器兼容HTML5和CSS3的问题

      1.让老式浏览器支持HTML5   HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因 ...

  5. 利用es-checker检测当前node对ES6的支持情况

    ode.js发展非常快,对es6特性的支持也越来越良心,但node.js版本很多,各版本对es6的支持度都不一样,为了能清晰的了解各版本对es6特性的支持,需要有一个工具能提供比较清晰的支持说明,甚至 ...

  6. 介绍一个比较了各种浏览器对于HTML5 等标准支持程度的网站

    可以选择浏览器种类,版本,比较的功能 网站地址:https://caniuse.com/#comparison

  7. 测试浏览器对HTML5标签的支持

    使用相应的浏览器打开链接 https://html5test.com/即可在该页面查看到测试结果.

  8. HTML5 API 浏览器支持情况检测

    HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏.网站.应用也是层出不穷.而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 H ...

  9. HTML5与CSS3基础教程第八版学习笔记11~15章

    第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...

随机推荐

  1. axel源码学习(1)——重要流程细节

    前面一篇文章的流程太过于简单,基本没有触及到axel的核心,因此本文将要把axel中的几个重要的主要的操作流程单独弄出来看看,还是按照main函数的执行顺序来展开,略去错误处理之类的流程仅仅着眼于最重 ...

  2. GitHub帮助文档翻译1——helloWorld

    工欲善其事必先利其器 ,都不知道 GitHub到底是什么,还怎么玩?因为总是会读了第一句就忘了下一句,形成不了感觉,所以希望把读GitHub的帮助文档都翻译出来,总是看大段大段的东西,谁都会懵圈的.希 ...

  3. Android 自学之相对布局 RelativeLayout

    相对布局(RelativeLayout),相对布局容器内子组件的位置总是相对兄弟组件.父容器来决定的. RelativeLayout的XML属性及相关方法说明 XML属性 相关方法 说明 androi ...

  4. 关于Eclipse中的一些基本知识

    Eclipse中寻找JRE的顺序是:vm参数指定的JRE--->elipse目录下的JRE--->操作系统中默认的JRE,利用这个特性也可以用vm参数来解决当本机安装有多个JRE的情况. ...

  5. 关于Spring中AOP的理解

    AOP简介[理解][重点] 1.AOP(Aspect Oriented Programing)面向切面/方面编程 2.AOP隶属软件工程的范畴,指导开发人员如何制作开发软件,进行结构设计 3.AOP联 ...

  6. Matlab中plot、fplot、ezplot的使用方法和区别

    函数plot 是绘制二维图形的最基本函数,它是针对向量或矩阵的列来绘制曲线的.也就是说,使用plot 函数之前,必须首先定义好曲线上每一点的x 及y 坐标; 常用格式为: (1)plot(x) 当x ...

  7. js数组求和

    array1.reduce(callbackfn[, initialValue]) callback : 函数执行在数组中每个值 initialValue : 对象作为第一个参数回调的第一次调用使用 ...

  8. PHP输入流php://input介绍

    在使用xml-rpc的时候,server端获取client数据,主要是通过php输入流input,而不是$_POST数组.所以,这里主要探讨php输入流php://input 对一php://inpu ...

  9. Mongodb集群节点故障恢复场景分析

    http://blog.csdn.net/zhangzhaokun/article/details/6299527 一个适当配置的Mongodb分片集群是没有单点故障. 本文描述了分片集群中存在的几种 ...

  10. Html5时钟的实现

    最近准备把自己的博客装修一下,首先,先为自己设计一个时钟吧,希望博客园能够尽快发放给我使用js的权限! 自从看见了苹果设计的那款因为侵权而赔钱了时钟,我就决定我的时钟一定是要参考这个来设计了! 不得不 ...