奥门新浦京官方网站js库Modernizr的介绍和使用

陪伴着当年九月初HTML5标准版的文告,未来使用HTML5的情景会越多,那是令web开辟者欢乐尉勉的作业。但是有叁个切实可行大家不能不看清,那正是IE体系浏览器还据有一大学一年级部分市场占有率,以IE8、9为主,windows8.1的客商已经用上了IE10/11,而考虑国内的国情,IE6、7照样存留不少。在我们甩手用HTML5花费的时候,新特征援助度检查实验便是必备的了。风流倜傥种办法是用navigator.userAgent或navigator.appName来检验浏览器类型和版本,但是这种方法不是很保障,浏览器对于有些新特色也是在渐渐扶植,无法一定说某些浏览器100%支撑了HTML5。并且,IE11做了贰个恶心的音容笑貌:在UA中去掉了“MSIE”标识,把appName改为了“Netspace”,并且起初支持-webkit-前缀的css属性,那是确实要伪装成chrome的点子。所以,HTML5/CSS3协理性的检查实验,依然靠特征检查实验(figure
detection)大概说手艺检查评定越来越好些。本篇就来介绍一下常用的检查测量试验方法都有怎样。

什么是 CSS hack

出于分歧厂家(如Internet Explorer,Safari,Mozilla
Firefox,Chrome等)、差别版本(如IE6和IE7)的浏览器,对CSS的剖析认知不完全相似,因此会促成变化的页面效果区别,得不到大家所急需的页面效果。
其不经常候咱们就须求针对不一样的浏览器去写不相同的CSS,让它能在不一致的浏览器中也能博得我们想要的页面效果。
一句话来说,CSS
hack的目标正是使您的CSS代码宽容区别的浏览器。当然,我们也能够扭转利用CSS
hack为分化版本的浏览器定制编写分化的CSS效果。

js库Modernizr的牵线和采纳

   Modernizr是二个开源的JS库,它使得那个基于访客浏览器的两样(指对新标准扶助性的间隔State of Qatar而支付不相同品级体验的设计员的干活变得更为轻巧

  古板浏览器近来不会被全然代表,令你为难将流行的 CSS3 或 HTML5
功效嵌入你的网址。 Modernizr 正是为缓慢解决那风度翩翩难点应际而生,作为二个开源的
JavaScript 库,Modernizr 检查测量检验浏览器对 CSS3 或 HTML5 功能支撑景况。
Modernizr
而不是试图加多老版本浏览器不协助的功能,而是让你通过创办可选风格配置改进页面设计。
它也足以通过加载定制的脚本来模拟老版本浏览器不帮助的意义。

  什么是Modernizr?

  Modernizr是叁个开源的JS库,它使得那三个基于访客浏览器的不等(指对新专门的职业帮忙性的间隔卡塔尔国而开垦不相同品级体验的设计员的行事变得尤其轻易。它使得设计师能够在支撑HTML5和CSS3的浏览器中足够利用HTML5和CSS3的表征开展付出,同一时间又不会捐躯别的不辅助这一个新技艺的浏览器的垄断。

  当你在网页中放到Modernizr的脚本时,它会检查评定当前浏览器是还是不是帮助CSS3的表征,比如@font-face、border-radius、 border-image、box-shadow、rgba(卡塔尔等,同临时间也会检查评定是或不是扶助HTML5的 特性——举个例子audio、video、当地储存、和新的
标签的等级次序和总体性等。在赢得到那些消息的根基上,你能够在这里三个扶植那么些效应的浏览器上选拔它们,来调整是或不是创建八个依据JS的
fallback,恐怕对那叁个不辅助的浏览器实行简要的温婉降级。别的,Modernizr仍然为能够令IE扶植对HTML5的成分运用CSS样式,那样开垦者就足以立时利用这么些更具备语义化的价签了。

奥门新浦京官方网站 ,  Modernizr 简单易用,但不是才高意广的。 成功使用 Modernizr
超大程度上取决你的 CSS 和 JavaScript 技术。

  使用HTML 5和CSS
3的基本点难点不是推广程度和浏览器之间的歧异,而在于首先了然那一个差异是怎么着。风流洒脱旦搞明白,开辟人士就可以预知采用雅淡降级(graceful
degradation卡塔尔技艺解决那个局限性。为此,多数开荒人员求助于开源项目Modernizr。

  Modernizr不是检查测量检验user-agent字符串,而是使用一花样好些个测验来推断浏览器的特征。在几微秒内它就可见实施超过40种测量试验并将结果作为质量记录在名称叫Modernizr的对象中。开辟职员能够通过这么些信息检查评定他们希图利用的某个性是还是不是被浏览器帮忙并作出相应的拍卖。

  在Modernizr 2.0版中,
它扩大了多少个照准JavaScript和CSS的准绳能源加载器(conditional resource
loader卡塔尔国。该财富加载器选取多少个参数,第二个是表达式,列举了所需的特征。第一个参数是若是表达式再次来到true则加载的JavaScript和
CSS文件列表。第多少个参数是所需特征官样文章的动静下备用的文本列表。

  除了高雅降级,加载器还可用来引进polyfill。
请允许自身向那二个还不太熟知pollyfill的情人解释一下,pollyfill是“生龙活虎种JavaScript垫片(shimState of Qatar,为老版本浏览器模拟了标准API”。固然这种艺术不总是值得推荐介绍,可是pollyfill能够用来增添(Modernizr检查评定到的卡塔尔国大好多HTML
5特色的支撑。这里,polyfill 用来补充浏览器功用上的尾巴。 偶然,Modernizr
可无缝地施行那项任务。
但本质上,这只是生龙活虎种修补工作,所以,不可能信任它爆发无漏洞浏览器所完结的完全肖似结果。

  为了精耕细作品质,开荒人士能够定制Modernizr来举办网址所需的测量试验。那足以因而Modernizr下载页面来完毕,该页面相同的时候显示了能够检查测试的性状列表。在github网址上还标有无法检验的特征和可能的驱除办法。

  Modernizr是基于渐进加强理论来开辟的,所以它支持并慰勉开采者意气风发层生龙活虎层的开创他们的网址。一切从八个利用了Javascript的空闲地
基开首,八个接四个的拉长巩固的应用层。因为运用了Modernizr,所以您轻便领悟浏览器都帮忙什么。

  Modernizr的原理

  Modernizr 使用 JavaScript 检查评定浏览器所支撑的功效,可是,它并非洲开发银行使
JavaScript
动态地加载差别的样式表,而是采纳极度轻易的本事将类增加到页面包车型地铁竹签。然后作为设计者由你决定使用
CSS 层叠为目的成分提供适宜的样式。

  例如,借使页面协理 box-shadow 属性,那么 Modernizr 会加多 boxshadow
类。假设不扶助,那么它用 no-boxshadow 类作为代替进行增多。

  由于浏览器忽视它们不可能辨别的 CSS
属性,因而你能够放心地遵循你的主干样式准绳使用 box-shadow
属性,可是要求根据下面包车型地铁格式为旧版本的浏览器增加单独的 descendant
selector :

  .no-boxshadow img { /* styles for browsers that don’t support
box-shadow */ }

  唯有不帮助 box-shadow 的浏览器才会有 no-boxshadow
类,由此别的的浏览器不会使用那些样式准绳。

  下表列举了 Modernizr 使用的类名称以证明对 CSS3 的帮助。
要是某些效用不扶持,那么相应类的称号用no-作前缀。

CSS 功能

Modernizr 类(属性)

@font-face fontface
::before and ::after pseudo-elements generatedcontent
background-size backgroundsize
border-image borderimage
border-radius borderradius
box-shadow boxshadow

CSS animations

cssanimations

CSS 2D transformations

csstransforms

CSS 3D transformations

csstransforms3d

CSS transitions

csstransitions

flexible box layout

flexbox

gradients

cssgradients
hsla() hsla

multi-column layout

csscolumns

multiple backgrounds

multiplebgs
opacity opacity

reflection

cssreflections
rgba() rgba
text-shadow textshadow

  无论在哪对特定的CSS属性实行测量试验,类的称号和属性名称都是千篇后生可畏律的,然则那必要去除任何连字号或是括号。
此外类是鲁人持竿它们参照他事他说加以考察的CSS3模块而命名。

  Modernizr的使用

  1. 下载

  首先从www.modernizr.com下载Modernizr的前卫的牢固版。把它参预页面包车型地铁区域:

   2. 向元素增加“no-js”的类

  

  

  当Modernizr运行的时候,它会把那几个“no-js”的类变为“js”来让你驾驭它早就运转。Modernizr并不止只做那生机勃勃件专门的工作,它还大概会为
全数它检查实验过的风味增添class类,借使浏览器不协助某脾性子,它就为该特性对应的类名加上“no-”的前缀。

  增加no-js
class到html成分下,是报告浏览器是还是不是帮衬JavaScript,要是不帮忙就展现no-js,假设扶持就把no-js删掉

  当时意气风发经运用Dreamweaver 的Live
Code,能够看见Modernizr增加了汪洋的标记浏览器功用的类,如下图

奥门新浦京官方网站 1

  如图所示, no-js 类已经被js类替代,那标记 JavaScript 已经启用。

  若是你的 Dreamweaver 版本未有 Live Code(也许你正选择区别的 HTML
编辑器卡塔尔,那么你能够使用大比超多新颖浏览器提供的开荒工具恐怕 Firefox
浏览器提供的 Firebug 检查生成的代码。

  3.
行使案例1——在扶植shadow阴影的浏览器显示shadow,不帮衬的浏览器展现专门的学业的边框

  复制代码 代码如下:

  .boxshadow #MyContainer { border: none; -webkit-box-shadow: #666
1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;

  } .no-boxshadow #MyContainer { border: 2px solid black;

  }

  因为只要浏览器帮助box-shadows的话,Modernizr就能将boxshadow
class加多到成分,然后你可以将它管理到三个应和的div的id上。假使不帮忙,Modernizr就能将no-
boxshadow
class加多到成分,那样显示的就是八个专门的工作的边框。那样我们就足以很有利地在扶助CSS3性子的浏览器上接受CSS3新功用,不扶助的浏览器上大浪涛沙使用从前的点子。

  4. 使用案例2——对本土存款和储蓄进行测试

  Modernizr除了丰硕相应的class到成分以外,还提供一个大局的Modernizr
JavaScript对象,该指标提供了不一致的质量来表示某种新天性在当下浏览器下是不是匡助。举个例子,下边包车型大巴代码能够用于剖断浏览器是不是扶持canvas和
local storag。对于两个开荒人士在多版本浏览器下支付测量检验的时候很有裨益的。

  ?

1

2

3

4

5

6

7

8

9

10

<script> window.onload = function () { if (localStorageSupported()) {

alert(‘local storage supported’);

}

};

 

  function localStorageSupported() {

  try {   return (‘localStorage’ in window && window[‘localStorage’] != null);

  }catch(e) {}

   return false;

} </script>

  大家能够统一代码

  ?

1

2

3

4

5

6

7

8

9

$(document).ready(function () {

if (Modernizr.canvas) { //Add canvas code }

if (Modernizr.localstorage) {

//script to run if local storage is

} else {

// script to run if local storage is not supported

 

}

});

  全局的Modernizr对象也得以用来探测是或不是帮助CSS3本性,下边包车型客车代码用于测验是或不是扶助border-radius
和CSS transforms:

  ?

1

2

3

4

5

6

$(document).ready(function () { if (Modernizr.borderradius) {

$(‘#MyDiv’).addClass(‘borderRadiusStyle’);

} if (Modernizr.csstransforms) {

$(‘#MyDiv’).addClass(‘transformsStyle’);

}

});

  audio 和 video
来讲,再次回到值是四个字符串,它标识着浏览器能够管理特定项目标置信水平。
根据 HTML5 标准,空的字符串表示该项目不帮忙。
假如帮助该品种,那么重返值是“maybe”或是“probably”。 举个例子:

  ?

1

2

3

if (Modernizr.video.h264 == "") {

// h264 is not supported

}

  4. 选择案例3——使用 Modernizr 验证 HTML5 必须的表单字段

  HTML5 增加了比很多新的表单属性,例如autofocus,当页面第4回加载时它会自行地将光标放在某些内定的字段。
另壹个有效的属性是 required,
若是有些必须的字段留有空白,那么它将阻碍HTML5分外的浏览器提交表单。

奥门新浦京官方网站 2

  图1. 脚本检查评定到不扶植新属性的浏览器中的必得字段

奥门新浦京官方网站 3

  图2. 脚本检查评定到不帮忙新属性的浏览器中的必须字段

  提交表单前,HTML5 宽容的浏览器会检查必须字段是或不是填写

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

window.onload = function() { // get the form and its input elements   var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field   if (!Modernizr.input.autofocus) { //因如果不支持 autofocus,那么该条件的求值结果为 true,并且 inputs[0].focus() 将光标放在第一个输入字段      inputs[0].focus(); }

    // if required not supported, emulate it      if (!Modernizr.input.required) {

      form.onsubmit = function() {

        var required = [], att, val;

        // loop through input elements looking for required         for (var i = 0; i < inputs.length; i++) {

           att = inputs[i].getAttribute(‘required’);           // if required, get the value and trim whitespace             if (att != null) {

              val = inputs[i].value; // if the value is empty, add to required array                 if (val.replace(/^s+|s+$/g, ”) == ”) {

                  required.push(inputs[i].name);

                }

            }

         } // show alert if required array contains any elements     if (required.length > 0) {

      alert(‘The following fields are required: ‘ + required.join(‘, ‘));

      // prevent the form from being submitted       return false;

    }

  };

 }

}

  代码发生了一个函数,当提交表单时它可以遍历全体的输入成分,以便于找到具备required 属性的字段。
当它找到有个别字段时,它会从值中除去开首和末段的空域,何况只要结果是三个空的字符串,那么它会把结果增加到
required 数组中。
在富有的字段都早就获得检查后,如若数组中包罗某个因素,那么浏览器会突显贰个与缺点和失误字段名称有关的警示,并堵住提交表单。

  创造自定义版本

  当您准备好对您的网址举办布置时,推荐成立四个 Modernizr 的自定义
production 版本,它只含有那个你其实须求的要素。 那可以依照你所选的意义将
Modernizr 库的大小从 44KB 减弱到 2KB。当前挑选的约束如图所示。

奥门新浦京官方网站 4

  如:

  单击. 那将会展开如上图所示的分界面。

  在 CSS3 分类中,选中box-shadow 和 CSS columns.

  在 HTML5 分类中,选中 Input Attributes.

  在 Extra 分类中,撤除选用 HTML5 Shim/IEPP.

  确定保障 Extra 分类中如下的选项被选中(它们应该早已自行地被选中卡塔尔。

  Modernizr.load(yepnope.js)

  Add CSS Classes

  Modernizr.testProp()

  Modernizr.testAllProps()

  Modernizr._domPrefixes

  单击Generate按钮。

  当自定义脚本筹算好(日常在蓬蓬勃勃到两秒内State of Qatar时,在 Generate
按钮旁边会并发叁个 Download 按键。 单击 Download
开关并在范例网址的js文件夹中保留该公文。 下载页面会给 production
脚本提供一个文书名,举例modernizr.custom.79475.js,不过你大概会愿意给它一个更是有含义的称谓。
在楷模文件中,作者使用的名称是 modernizr.adc.js。

  用自定义 production 脚本的链接替换 modernizr.js in css_support.html
和 required.html 的链接。 注意 production 脚本独有 5KB,而不是development 版本的44KB。

  单击 css_support.html 中的 Live Code(只怕利用你的浏览器中的
development 工具卡塔尔。 今后,如下图所示,最初的标签唯有四个类。

奥门新浦京官方网站 5

Modernizr是八个开源的JS库,它使得那多少个基于访客浏览器的例外(指对新规范扶持性的差别卡塔尔国而开辟分歧等第体验的设计…

HTML5部分

检查实验HTML5新特色的艺术主要有以下两种:

  1. 反省全局对象(window或navigator)上有没有对应的属性名

  2. 成立四个元素,检查成分上有未有对应的习性

3.
开立叁个元素,检查评定成分上有没有办法名称,然后调用该方式,看行不行准确实践

4.
创建一个元素,为成分的呼应属性赋三个值,然后再拿到此属性的值,看看赋值是不是见到效果

鉴于差别浏览器的两样行为,检验一些特征的时候,大概会用到上述多少个主意的结缘,接下去用地方的形式做一下常用天性的检查实验:

谈一谈浏览器宽容的笔触

  • 要不要做:
    成品的角度:(成品的受众、受众的浏览器比例、效果优先依旧基本作用优先)
    资金财产的角度: (有无供给做有些事State of Qatar
  • 成功怎么着水平:
    让哪些浏览器匡助什么效率
  • 如何做
    1.基于包容必要接受技术框架/库(jqueryState of Qatar
    2.依据宽容须要选用特别工具(html5shiv.js、respond.js、css
    reset、normalize.css、Modernizr)
    3.采纳条件注释、CSS Hack、js 工夫检测做一些修修补补。

canvas

function support_canvas(){
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}

日常来说,创制canvas成分并检查getContext属性就可以,可是在局地浏览器下相当不足标准,所以再检查评定一下elem.getContext(’2d’卡塔尔(قطر‎的试行结果,就足以完全分明。以上代码摘自Modernizr:

至于canvas,有某个要补偿的,那便是fillText方法,就算浏览器帮助canvas,大家并不可能符合的鲜明它扶植fillText方法,因为canvas
API经验了种种纠正,有风流倜傥部分历史由来,检验帮助fillText的方式如下:

function support_canvas_text(){
    var elem = document.createElement('canvas');
    var context = elem.getContext('2d');
    return typeof context.fillText === 'function';
}

历数5种以上浏览器宽容的写法

  1. 属性前缀法(即类内部Hack卡塔尔(قطر‎:举个例子 IE6能辨别下划线””和星号” *
    “,IE7能识别星号” *
    “,但不能够分辨下划线””,IE6~IE10都认识”9″,但firefox前述多个都无法认知
  2. 慎选器前缀法(即选拔器HackState of Qatar:举例IE6能识别*html
    .class{},IE7能识别+html .class{}
  3. IE条件注释法(即HTML条件注释Hack卡塔尔(قطر‎:针对具备IE(注:IE10+已经不复扶助标准化注释卡塔尔:
    ;针对IE6及以下版本:。那类Hack不仅仅对CSS生效,对写在认清语句里面包车型地铁有所代码都会生效。
  4. 行使应用Modernizr工具:
    运营的时候它会在html成分上增多一堆CSS的class名称,这个class名称标识当前浏览器帮忙什么特征和不扶持什么特点,扶持的风味就一向呈现该天性格的称谓作为几个class(例:canvas,websockets),不帮衬的性状呈现的class是“no-性情名称”。即便class里面有no-名称的,能够在css里面增多(.no-名称)相应的性质来完结部分任何功效。
  5. 使用ie条件注释和html5shiv.js,respond.js结合

<!--[if lt IE9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![end if]-->

video/audio

function support_video(){
    return !!document.createElement('video').canPlayType;
}

function support_audio(){
    return !!document.createElement('audio').canPlayType;
}

video和audio的写法肖似。

要检查实验video/audio帮助的能源格式,能够调用canPlayType方法来开展自作者评论,具体如下:

unction support_video_ogg(){
    var elem = document.createElement('video');
    return elem.canPlayType('video/ogg; codecs="theora"');
}
function support_video_h264(){
    var elem = document.createElement('video');
    return elem.canPlayType('video/mp4; codecs="avc1.42E01E"');
}
function support_video_webm(){
    var elem = document.createElement('video');
    return elem.canPlayType('video/webm; codecs="vp8, vorbis"');
}

function support_audio_ogg(){
    var elem = document.createElement('audio');
    return elem.canPlayType('audio/ogg; codecs="vorbis"');
}
function support_audio_mp3(){
    var elem = document.createElement('audio');
    return elem.canPlayType('audio/mpeg;');
}
function support_audio_wav(){
    var elem = document.createElement('wav');
    return elem.canPlayType('audio/wav; codecs="1"');
}

要注意的是,canPlayType的重临值并非布尔类型,而是字符串,取值有以下两种:

  • “probably”:浏览器完全扶助此格式
  • “maybe”:浏览器大概帮忙此格式
  • “”:空串,表示不帮助

以下工具/名词是做什么样的

  • 标准注释
    规范注释是于HTML源码中被 IE 有原则解释的言语。条件注释可被用来向
    IE提供及藏匿代码。
  • IE Hack
    针对IE浏览器编写分裂的CSS的让IE能够在不相同的例行渲染的长河
  • js 才具检查测量试验
    检查实验浏览器的本事检验对象不是检验特定的浏览器,而是检查评定浏览器的力量。那样,只须求检查测试浏览器是或不是扶植特定的手艺,就足以交到特定的解决方案。这一片段质量评定是解决浏览器包容难点的机要检查评定。
  • html5shiv.js
    由于IE6/IE7/IE8还有不小片段顾客,为了让网址浏览者都能符合规律的访谈HTML5网址,设计方案就有上面
    动用Javascript来使不补助HTML5的浏览器帮助HTML标签。近些日子差不离网址使用的这种办法(Bootcss官方例子也是那样)。
    运用脚本document.createElement(“”State of Qatar创制对应的台本,CSS选择器便可科学利用到该标签。
    伪造到IE9是支撑html5的,所以从来在HTML页面包车型大巴head标签中加多脚本引用就能够。
  • respond.js
    Respond.js让不协理css3 Media
    Query的浏览器包涵IE6-IE8等别的浏览器帮忙查询,达成响应式网页设计
  • css reset
    重新设置浏览器的默许样式,更规范说正是因而重复定义标签样式,“覆盖”浏览器的CSS私下认可属性。
  • normalize.css
    是叁个方可定制的CSS文件,它让分化的浏览器在渲染网页成分的时候情势更统风流倜傥。
    尤为重要意义:
    护卫得力的浏览器暗中同意样式实际不是截然去掉它们
    常常化的样式:为大多数HTML成分提供
    修补浏览器本身的bug并保障各浏览器的意气风发致性
    优化CSS可用性:用有个别小手艺
    说西汉码:用注释和详细的文书档案来
  • Modernizr
    Modernizr 会在页面加载后即时检查实验性子;然后创造一个分包检测结果的
    JavaScript 对象,同期在 html 成分参加有益你调节 CSS 的 class 名
    Modernizr是八个开源的JS库,它使得那两个基于访客浏览器的两样(指对新专门的学问帮衬性的差别)而支付分歧品级体验的设计员的做事变得更其简易。它使得设计员可以在帮助HTML5和CSS3的浏览器中足够利用HTML5和CSS3的特色开展支付,同一时间又不会牺牲其他不协助这么些新技巧的浏览器的主宰。
    当你在网页中放置Modernizr的本兔时,它会检验当前浏览器是不是协理CSS3的天性,比方@font-face、border-radius、 border-image、box-shadow、rgba(State of Qatar等,同期也会检测是还是不是扶持HTML5的
    天性——比方audio、video、本地储存、和新的
    标签的花色和属性等。在取获得那个新闻的基本功上,你能够在那多少个援救那个效率的浏览器上应用它们,来决定是或不是创立一个基于JS的
    fallback,或许对那个不扶持的浏览器举办轻便的文雅降级。其余,Modernizr还足以令IE帮忙对HTML5的要素接收CSS样式,那样开垦者就能够登时选取那个更兼具语义化的标签了。
  • postCSS
    postCSS自个儿是贰个功力比较单纯的工具。它提供了黄金年代种方法用 JavaScript
    代码来管理 CSS。它担任把 CSS 代码深入深入分析成肤浅语法树构造(Abstract
    Syntax Tree,AST),再交由插件来进行管理。插件基于 CSS 代码的 AST
    所能进行的操作是多姿多彩的,譬喻能够支撑变量和混入(mixin),扩展浏览器相关的扬言前缀,或是把利用以往的
    CSS 标准的体制准则转译(transpile)成当下的 CSS
    规范支持的格式。从那些角度来讲,PostCSS
    的强硬之处在于其持续向上的插件系列。近期 PostCSS 已经有 200
    四个效果与利益差别的插件。开拓职员也能够依赖项指标急需,开辟出团结的
    PostCSS 插件。

localStorage

通常来说,检查全局对象是或不是有localStorage属性就可以,如下:

function support_localStorage(){
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
      } 
    catch(e){
        return false;
    }
}

在部分浏览器禁用cookie,或许设置了隐情方式如何的景观,检查属性或报错,所以加在try语句中,假如报错了感觉不帮忙。

其余,还大概有朝气蓬勃种更严苛的反省情势,检查相应措施是还是不是扶助,如下:

function support_localStorage(){
    try {
        if('localStorage' in window && window['localStorage'] !== null){
            localStorage.setItem('test_str', 'test_str');
            localStorage.removeItem('test_str');
            return true;
        }
        return false;
    } 
    catch(e){
        return false;
    }
}

貌似在哪些网址查询属性包容性?

caniuse.com
查CSS属性宽容
browserhacks 查
Hack 的写法
浏览器市集占有率

webWorker

function support_webWorker(){
    return !!window.Worker;
}

applicationCache

function support_applicationCache(){
    return !!window.applicationCache;
}

geolocation

function support_geolocation(){
    return 'geolocation' in navigator;
}

input标签新属性

input标签新添的品质包涵:autocomplete、autofocus、list、placeholder、max、min、multiple、pattern、required、step,检查测试是还是不是帮衬用地点提到的法子2就可以,新建贰个input标签,看是还是不是有这么些属性,以autocomplete为例:

function support_input_autocomplete(){
    var elem = document.createElement('input');
    return 'autocomplete' in elem;
}

除此以外要特别注意list属性,因为它是与datalist标签连用的,所以检查的时候要风流倜傥并质量评定datalist标签是还是不是支持:

function support_input_list(){
    var elem = document.createElement('input');
    return !!('list' in elem && document.createElement('datalist') && window.HTMLDataListElement);
}

input标签新品类

这里的体系正是指type的取值,input新增加的type值包蕴:search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color。检查评定那些值须求用地方提到的措施4,以number为例:

function support_input_type_number(){
    var elem = document.createElement('input');
    elem.setAttribute('type', 'number');
    return elem.type !== 'text';
}

那是风华正茂种较为简单的自己商议办法,因为严苛来说,浏览器会为不相同的体系提供差异的外观或促成,比如chrome中range类型组织带头人那样:

奥门新浦京官方网站 6

笔者们要适用的知晓浏览器为该品种提供了对应的贯彻,本事够以为是“扶持的”,要从那几个下面防检查测是有难度的,各浏览器实现都不可同等对待。上面贴出Modernizr中的一个贯彻,供参谋:检查实验email类型的落到实处:

function support_input_type_email(){
    var elem = document.createElement('input');
    elem.setAttribute('type', 'email');
    elem.value = ':)';
    return elem.checkValidity && elem.checkValidity() === false;
}

为email类型设置了二个地下的value,然后手动调用校验方法,借使回去false,表明浏览器提供了该类型的兑现,以为是支撑的。

history

history虽说是HTML4就有个别,但HTML5提供了新的法子,检查实验方法如下:

function support_history(){
    return !!(window.history && history.pushState);
}

webgl

function support_webgl(){
    return !!window.WebGLRenderingContext;
}

postMessage

function support_postMessage(){
    return !!window.postMessage;
}

draggable

HTML5的拖拽个性:

function support_draggable(){
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}

webSocket

unction support_webSocket(){
    return 'WebSocket' in window || 'MozWebSocket' in window;
}

svg

function support_svg(){
    return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
}

事件的扶植性判别

通用方法:

自己商议事件的协助性,用地方提到的方法2就可以,创设二个要素,看成分上有未有照拂的风云名称,上面是摘自Modernizr的贯彻:

isEventSupported = (function() {

      var TAGNAMES = {
        'select': 'input', 'change': 'input',
        'submit': 'form', 'reset': 'form',
        'error': 'img', 'load': 'img', 'abort': 'img'
      };

      function isEventSupported( eventName, element ) {

        element = element || document.createElement(TAGNAMES[eventName] || 'div');
        eventName = 'on' + eventName;

        // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
        var isSupported = eventName in element;

        if ( !isSupported ) {
          // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
          if ( !element.setAttribute ) {
            element = document.createElement('div');
          }
          if ( element.setAttribute && element.removeAttribute ) {
            element.setAttribute(eventName, '');
            isSupported = is(element[eventName], 'function');

            // If property was created, "remove it" (by setting value to `undefined`)
            if ( !is(element[eventName], 'undefined') ) {
              element[eventName] = undefined;
            }
            element.removeAttribute(eventName);
          }
        }

        element = null;
        return isSupported;
      }
      return isEventSupported;
    })()

touch事件

假设只是是反省touch事件是还是不是扶植,就没供给写上边那么多东西了,能够省略书写如下:

function support_touch_event(){
    return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
}

Mozilla还提供了三个媒体询问的语句用来检验touch的扶助性:touch-enabled,能够在页面上插入贰个包罗此媒体询问的成分来判别是或不是扶助touch事件。参考:

唯独大家做运动支付日常都只思索webkit内核了,Mozilla的法子就不写了,假如供给请参见Modernizr源码。

css3部分

通用方法

css3属性扶持度的检查测量检验,主要通过上边方法提到的2和4来检查,不过大家要反省的是因素的style属性。此外叁个要提的正是浏览器私有前缀,在时下我们用css3属性超过58%是要写前缀的,因为各浏览器尚未完全帮忙。大家用到的前缀有:-webkit-、-ms-、-o-、-moz-,至于前缀-khtml-,那是Safari先前时代接收的,现在基本也未有人再用它了,所以举行检验的时候就把它省去了。Modernizr移除了从前缀的检查测量试验,详见:

通用代码如下:

var support_css3 = (function() {
   var div = document.createElement('div'),
      vendors = 'Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         } 
      }
      return false;
   };
})();

3D变形

css3
3D变形的检查实验微微复杂些,首先要扶助perspective属性,其次要援救transform-style的值为preserve-3d。用艺术4的方式不能检查测量试验出来,须求信赖媒体询问的方法,代码如下:

function support_css3_3d(){
    var docElement = document.documentElement;
    var support = support_css3('perspective');
    var body = document.body;
    if(support && 'webkitPerspective' in docElement.style){
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = '@media (transform-3d),(-webkit-transform-3d){#css3_3d_test{left:9px;position:absolute;height:3px;}}';
        body.appendChild(style);
        var div = document.createElement('div');
        div.id = 'css3_3d_test';
        body.appendChild(div);

        support = div.offsetLeft === 9 && div.offsetHeight === 3;

    }
    return support;
}

内需依据地点定义好的support_css3办法来检查评定perspective。

着力常用检查评定的就这几个了,本文中风姿浪漫有的代码是网络搜来的,还大概有后生可畏都部队分是从Modernizr源码中抽离出来的。如文中汇报有误,迎接指正。

在实际花费中,推荐直接利用Modernizr进行检验,它早就封装的老大卓绝了。不过即使您独自检查评定几个天性,或然不想因加载额外的库而浪费质量,就足以行使上述代码举办单个检验。

发表评论

电子邮件地址不会被公开。 必填项已用*标注