检测浏览器对HTML5和CSS3支持情况的利器——Modernizr
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标签
- 检测CSS3,如果浏览器不支持某个功能,那么相应类的名称用
no-
作前缀。
举例:判断是否支持box-shadow,如果不支持使用另外一种样式。
.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }
下载地址:https://modernizr.com/download?setclasses
检测浏览器对HTML5和CSS3支持情况的利器——Modernizr的更多相关文章
- Javascript检测浏览器对CSS属性的支持 /* supports */
//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...
- 检测浏览器对HTML5新input类型的支持
HTML5新增加了很多input元素类型,比如color,date,datetime,datetime-local,email,month,number,range,search,tel,time,u ...
- 努力学习 HTML5 (4)—— 浏览器对语义元素的支持情况
经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> ...
- 老式浏览器兼容HTML5和CSS3的问题
1.让老式浏览器支持HTML5 HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因 ...
- 利用es-checker检测当前node对ES6的支持情况
ode.js发展非常快,对es6特性的支持也越来越良心,但node.js版本很多,各版本对es6的支持度都不一样,为了能清晰的了解各版本对es6特性的支持,需要有一个工具能提供比较清晰的支持说明,甚至 ...
- 介绍一个比较了各种浏览器对于HTML5 等标准支持程度的网站
可以选择浏览器种类,版本,比较的功能 网站地址:https://caniuse.com/#comparison
- 测试浏览器对HTML5标签的支持
使用相应的浏览器打开链接 https://html5test.com/即可在该页面查看到测试结果.
- HTML5 API 浏览器支持情况检测
HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏.网站.应用也是层出不穷.而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 H ...
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
随机推荐
- Android_Gallery
xml布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...
- rust haskell
http://www.rust-lang.org <null>
- mfc简易加法
利用vs2013只做一个只有加法的计算器: 一.新建项目,然后如下图所示,进行选择,并创建. 二.下一步. 三.选择基于对话框,之后直接点完成 四.在整个编译器的最左边找到工具箱,并点击. /** 为 ...
- LVM的添加与删除
#############################创建 fdisk -l查看分区情况 fdisk /dev/xvdb pvcreate /dev/xvdb1 vgextend VolGroup ...
- FPGA设计—UVM验证篇 Hello world
这里就不赘述UVM为何物了,做了半年多的FPGA设计验证工作,按需求一直是用VHDL编写测试程序,最近看了几天UVM验证方法学的书,感觉这是一种很好的验证工具,现在开始UVM的学习,于是准备用Mode ...
- 浅谈SqlCommand
初学asp.net 的菜鸟应该都会像我一样想尝试一下前后台的交互吧!特别是与数据库的交互.下面就来说一下自己的个人经历. SqlCommand 首先需要引入system.Date.SqlClient命 ...
- Controller中利用RedirectToRoute重定向的问题
先看看我们例子用到的路由表 routes.MapRouteWithName( name: "ProductDetail", url: "{Platform}/Produc ...
- Android 使用BaseAdapter 插入不同类型数据
在使用过程有时要在listview中插入不同类型的数据,比如说position=0的位置插入,广告,其它列表显示数据的情况. 一定要重写两种方法 @Override public int getIte ...
- NSdata 与 NSString,Byte数组,UIImage 的相互转换
1. NSData 与 NSString NSData-> NSString NSString *aString = [[NSString alloc] initWithData:adataen ...
- iOS创建UUID
- (NSString *)getUUID { CFUUIDRef uuidObj = CFUUIDCreate(nil); //create a new UUID NSString * uuidSt ...