检验访问器对HTML5和CSS3适用度的方式

日期：2021-02-24 类型：科技新闻 

关键词：自助建站，专业建站，建站网站，建站平台，网站在线制作app

 HTML5, CSS3 和别的有关技术性比如 Canvas、WebSocket 这些将 Web 运用开发设计带到了1个新的高宽比。该技术性根据组成 HTML、CSS 和 JavaScript 能够开发设计出桌面上运用具备的实际效果。虽然 HTML5 服务承诺许多，但实际中对 HTML5 适用的访问器和 HTML5 规范自身的健全水平还没有有到1个很完善的水平。如今彻底不担忧访问器适用是不实际的，还必须時间，因而当大家决策要选用 HTML5 技术性开发设计 Web 运用的情况下，大家必须对访问器所适用的特点开展检验。

而 Modernizr 便可以协助你进行对访问器所适用 HTML5 特点的查验。

下面编码检验访问器是不是适用 Canvas：
 

拷贝编码
编码以下:
<script>
window.onload = function () {
if (canvasSupported()) {
alert('canvas supported');
}
};

function canvasSupported() {
var canvas = document.createElement('canvas');
return (canvas.getContext && canvas.getContext('2d'));
}
</script>

下面编码检验访问器是不是适用当地储存：
 

拷贝编码
编码以下:

<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>

上面的两个事例中大家能够很直观的对访问器的特点开展查验以保证大家在对应的访问器上运用的作用能否一切正常运行。


而应用 Modernizr 的益处还在于你不必须这样1项项去查验，也有更简易的方式，下面大家刚开始：

当我第1次听到 Moderizr 这个新项目时，我认为这是1个让1些老的访问器能适用 HTML5 的 JS 库，客观事实上并不是，它关键是检验的作用。

Modernizr 能够根据网站地址 http://modernizr.com 来浏览，该网站另外还出示1个订制脚本制作的作用，你能够明确你必须检验甚么特点，并依此来转化成相应的 JS 文档，这样能够降低无须要的 JS 编码。 

 1旦免费下载了 Modernizr 的 JS 文档后，便可以根据 <script> 标识引进到网页页面中。
 

拷贝编码
编码以下:
<script src="Scripts/Modernizr.js" type="text/javascript"></script>

检验 HTML 元素

1旦大家在网页页面上引进了 Modernizr 后便可以马上应用，大家能够在 <html> 元素中申明不一样的 CSS 类，这些类界定了所必须适用或不适用的特点，不适用的特点其类名1般是 no-FeatureName，比如 no-flexbox。下面是1个在 chrome 上可运作的事例：

 

拷贝编码
编码以下:

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage
websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla
multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d
csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths">

还能够这样来分辨访问器是不是开启了 JavaScript 适用：
 

拷贝编码
编码以下:
<html class="no-js">

你能够在 HTML5 Boilerplate (http://html5boilerplate.com) 或是 Initializr (http://initializr.com) 看到1些新手入门的事例，依据上面的流程，提升 no-js 类能够分辨访问器是不是开启了 JavaScript 适用。
 
应用 HTML5 和 CSS3 特点

你为 <html> 标识提升的 CSS 特性，能够立即在 CSS 中界定所必须的款式，比如：
 

拷贝编码
编码以下:

.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 的话，可能为 <html> 元素提升 boxshadow 这个 CSS 类，不然的话就应用 no-boxshadow 这个类。这样假定访问器不适用 box-shadow 的话，大家可使用别的的款式来开展界定。


此外大家还可以应用 Modernizr 的目标来实际操作这个个人行为，比如下面的编码用来检验访问器是不是适用 Canvas 和 当地储存：

 

拷贝编码
编码以下:

$(document).ready(function () {

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

if (Modernizr.localstorage) {
//Add local storage code
}

});

全局性的 Modernizr 目标一样能用于检测 CSS3 特点是不是适用：
 

拷贝编码
编码以下:

$(document).ready(function () {

if (Modernizr.borderradius) {
$('#MyDiv').addClass('borderRadiusStyle');
}

if (Modernizr.csstransforms) {
$('#MyDiv').addClass('transformsStyle');
}

});


应用Modernizr载入脚本制作

在出現了访问器不适用一些作用的的状况下,你不但能够出示1个非常好的备用计划方案,还能够载入shim/polyfill脚本制作在适度状况下弥补缺少的作用 (想掌握更多有关shims/polyfills的信息内容,请查询 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Modernizr有着1个内嵌的脚本制作载入器,能够用来检测1个作用,并在作用失效的情况下载入另外一个脚本制作. 脚本制作载入器是内嵌在Modernizr中的,而且是合理的单独yepnope(http://yepnopejs.com)脚本制作. 脚本制作载入器十分非常容易上手,它依据特殊访问器作用的能用性,真的会简化载入脚本制作的全过程.

你可使用Modernizr的load()方式来动态性载入脚本制作,该方式接纳界定被测作用的特性(test特性), 如检测取得成功后要载入的脚本制作(yep特性), 如检测不成功后要载入的脚本制作(nope特性), 和不管检测取得成功還是不成功都要载入的脚本制作(both特性). 应用load()及其特性的示比如下:
 

拷贝编码
编码以下:

Modernizr.load({
test: Modernizr.canvas,
yep: 'html5CanvasAvailable.js’,
nope: 'excanvas.js’,
both: 'myCustomScript.js'
});


在这个事例中Modernizr在载入脚本制作时还会检测是不是适用canvas作用 . 假如总体目标访问器适用HTML5 canvas就会载入html5CanvasAvailable.js脚本制作及 myCustomScript.js脚本制作 (在这个事例中应用yep特性有点苍白无力  – 这只是以便演试load()方式中的特性怎样应用 ). 不然的话, 就会载入 excanvas.js这个 polyfill脚本制作来为IE9以前版本号的访问器加上作用适用 . 1旦excanvas.js被载入,myCustomScript.js也会接着被载入.

因为Modernizr会解决载入脚本制作, 因此你能够用它来做些其他事儿. 例如, 在Google或微软出示的第3方CDN无论用的情况下，你能够用Modernizr来载入当地的脚本制作. Modernizr文本文档中出示了在CDN挂掉后出示当地jQuery储备全过程的示例:
编码会先尝试从Google CND载入jQuery. 1旦脚本制作免费下载进行(或免费下载不成功)就会启用某个方式. 这个方式会查验jQuery目标是不是合理,假如失效就载入当地的jQuery脚本制作. 并在其后载入1个名为needs-jQuery.js的脚本制作.

最终想说的是，假如你准备开发设计根据 HTML5 和 CSS3 的 Web 运用的话，那 Modernizr 便是你必不能少的专用工具，除非，除非你确定你全部顾客所应用的访问器适用你所写的编码。

上一篇：很酷的HTML5电子器件书换页动漫殊效 返回下一篇：没有了