modernizr 支持html5,Html5系列（二十）学习之 Html5功能判断插件 Modernizr

---恢复内容开始---

Modernizr 浏览器对HTML5和CSS3开发的功能检测类库

由于当前用户使用的浏览器版本较多，对H5和CSS3的支持也各不相同。前端的开发者，在使用一些新的特性的时候，就比较的麻烦。需要去兼容各种浏览器，判断这些浏览器是否支持这些新的特性。

Modernizr可以帮助前端的开发者很好的解决这一问题。

Modernizr是什么？

用官网的话说，Modernizr是一个JavaScript库，在用户的浏览器中监测对HTML5和CSS3功能支持。这也是我们的目的所在。

下面我们来通过一个简单的例子来说明一下不同浏览器对HTML5和CSS3的支持。

比如对于的HTML5的Canvas标签的支持。就目前的浏览器来说，Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持标签。但是ie9以下的版本是不支持Canvas的。

如果你的浏览器支持Canvas以下这段代码的效果就是下面的红色矩形图

Modernizr

您的浏览器不支持Canvas

如果不支持，就会显示一段话：您的浏览器不支持Canvas;

Madernizr 是怎么检测浏览器对HTML5和CSS3的功能支持呢？

只需要简单的引入Madernizr.js 。类库可以从官网下载到。分为压缩版和未压缩版。

下载下来后，我们只要在页面引用既可。

然后打开页面。从运行后的代码页面我们可以看到在html 标签里面多出了一些东西。这写就是Modernizr监测你所使用的浏览器对HTML5和CSS3的支持情况。

仔细看一下会发现，在touch属性前面多出了一个"no-"的标签。这个就表示所使用的浏览器不支持touch属性。但是当我使用浏览器的开发工具模拟手机浏览器时，这边我模拟的是ipone 4，touch属性前面就没有"no-"的标签。因为现在的触屏手机浏览器都是支持touch属性的。

知道了Modernizr可以监测到浏览器对HTML5和CSS3的支持情况。下面再看一下我们怎么用Modernizr。

我们就以touch属性为例。Modernizr在页面加载初始化后，会创建一个名为MNodernizr的对象。对象的每个属性都是检测浏览器对HTML5和CSS3的属性支持的布尔值。

Modernizr

if(Modernizr.touch) { alert("浏览器支持touch"); }else{ alert("浏览器不支持touch"); }

另外不仅可以通过Javascript进行判断，还可以通过css的类名来进行判断。

Modernizr

.yes,.no{display:none}.touch .yes{display:block;}.no-touch .no{display:block;}

支持touch属性

modernizr 支持html5,Html5系列（二十）学习之 Html5功能判断插件 Modernizr相关推荐

数据与广告系列二十二：智能化投放中扩量场景的技术实现策略
作者·黄崇远公众号『数据虫巢』全文8968字题图ssyer.com " 人不够,系统给你凑." 这个系列上一篇<数据与广告系列二十一:关于品牌广告,奔涌吧后浪> ...
自然语言处理系列二十二》词性标注》词性标注原理》词性介绍
注:此文章内容均节选自充电了么创始人,CEO兼CTO陈敬雷老师的新书<分布式机器学习实战>(人工智能科学与技术丛书)[陈敬雷编著][清华大学出版社] 文章目录自然语言处理系列二十二词性 ...
数据与广告系列二十四：效果广告后定向时代如何逆流而上
作者·黄崇远『数据虫巢』全文共4338字题图ssyer.com " 在效果广告的发展历程中,当前已经处于后定向时代,或者说是弱定向时代,我们是应该顺应潮流还是应该逆流而上?" ...
Reflex WMS入门系列二十六：合并托盘
Reflex WMS入门系列二十六:合并托盘仓库管理业务实践中,对于仓库里的库存,将几个零托合并成一个托,也是比较常见的作业.Reflex WMS系统自然要能支持这种合并托盘(Merge HDs)的 ...
数据与广告系列二十六：知识迁移的Embedding应用，智能化定向的解药
作者·黄崇远『数据虫巢』全文共4348字题图ssyer.com " 效果广告后定向时代,虽有千般万难,我们一样还得解决定向智能的问题." 需要提前说明的是,这一篇会涉及到本系 ...
数学之美系列二十－自然语言处理的教父马库斯
数学之美系列二十 -自然语言处理的教父马库斯 2007年4月13日下午 07:03:00 <script language=javascript> uT("time1176 ...
GoLang之map底层系列二(浅显学习)
文章目录 GoLang之map底层系列二(浅显学习) 1.map++ 2.map引用传递 3.map不是并发安全 4.map的value为空接口 5.map的value为切片 6.value,ok=m ...
Reflex WMS入门系列二十五：将叉车纳入系统进行管理
Reflex WMS入门系列二十五:将叉车纳入系统进行管理据笔者所知,SAP WM 模块里是不对仓库里常用的叉车等仓库管理工具进行管理的.笔者发现,Reflex WMS系统则会在很多仓库部门日常操作 ...
Reflex WMS入门系列二十二：物料库存报表
Reflex WMS入门系列二十二:物料库存报表在Reflex WMS系统上,我们可以通过物料号查询它的HD列表,或者IPG列表.通过在其HD/IPG信息得知其库存数据.当然还可以通过如下方式直接获 ...

modernizr 支持html5,Html5系列（二十）学习之 Html5功能判断插件 Modernizr

modernizr 支持html5,Html5系列（二十）学习之 Html5功能判断插件 Modernizr相关推荐

最新文章

热门文章

modernizr 支持html5,Html5系列（二十） 学习之 Html5功能判断插件 Modernizr

modernizr 支持html5,Html5系列（二十） 学习之 Html5功能判断插件 Modernizr相关推荐

最新文章

热门文章

modernizr 支持html5,Html5系列（二十）学习之 Html5功能判断插件 Modernizr

modernizr 支持html5,Html5系列（二十）学习之 Html5功能判断插件 Modernizr相关推荐