现状分析
网络发展快得很，网页设计也离不开HTML5和CSS3。用了这些新玩意儿，网页美得飞起。可惜，新技术更迭太快，有些老版浏览器对HTML5和CSS3的支持就有点费劲，对我们的工作造成困扰。那咋办？既想让网站在各种浏览器上都棒棒哒，又要搞定那些不支持HTML5/CSS3的旧浏览器，真的是个大挑战
window.onload = () {
(canvasSupported()) {
alert('canvas supported');
}
};
canvasSupported() {
canvas = document.createElement('canvas');
(canvas.getContext && canvas.getContext('2d'));
}
咱们平时做网站的时候，老是撞上一些老浏览器，比如IE8那些老掉牙的IE浏览器，还有旧版火狐什么的，这些家伙都对最新的HTML5和CSS3不是很友好。那咋办？肯定得给每种浏览器都定制一下，让它们能正常展示页面，而且看起来也不错！所以，找到个好方法来搞定这个真的挺关键的。
window.onload = () {
(localStorageSupported()) {
alert('local storage supported');
}
};
localStorageSupported() {
{
('localStorage' window && window['localStorage'] != );
}
(e) {}
;
}
Modernizr介绍
HTML5和CSS3确实很棒，但是也有不少旧版本浏览器没法支持这些新技术。这时候，你需要用到一个叫做Modernizr的神器。这可是个超赞的JavaScript库，能帮你检测当前浏览器是否支持一些新特性，并给你的网页元素附加上相应的特殊类名。这么一搞，网页一加载，你就清楚哪些新东西浏览器能支持，该怎么做就一清二楚！
使用Modernizr可不只是看下浏览器是否有啥新功能这么简单！最赞的是它能让你不用操心地应对各种兼容性问题。通过它的特性检测神奇功能，我们就能根据需求随时加载必要的脚本或者样式表，让那些旧版浏览器也能舒舒服服地使用。
HTML5 Boilerplate与Initializr
要把老版浏览器搞得妥妥的，那只能请出Modernizr, HTML5 Boilerplate 跟 Initializr这三位大侠了。HTML5 Boilerplate可是个好帮手，除了处理兼容问题，还能让我们按照行业规范做事情。跟着它走，就能轻易搞出一个靠谱的网页，运行快，兼容性也不差！
<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">
Initizr就是咱们HTML5开发者的专属在线模板制作工具！想加点啥就加上去呗，最后一键生成独有的模板就行。先把”no-js”丢到class属性里面的html元素上，告诉浏览器我们网站支不支持JS；然后视具体情况展示或加载相应的页面哟~
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow opacity
no-cssanimations no-csscolumns no-cssgradients no-cssreflections
csstransforms no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage sessionstorage
no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
利用Modernizr优化CSS样式
用了Modernizr就解决了设置custom class的问题，可以针对不同浏览器设定样式！比如box-shadow这种高级玩意儿，浏览器要是能支持的话，悄悄给元素加上boxshadow这个class。靠，那你在CSS里找这个class，弄好对应的样式不就得了~
这么做的话，就可以让各种各样的浏览器看到不同的样式了。同时也能确保网站不管什么时候都能正常运行对于团队协作、保持代码质量以及提升用户体验都是非常有利哒！
动态加载脚本实现新特性支持
Modernizr的slick功能——load()，不仅能美化css，还可以动态帮你下载在不同浏览器上都要能用的小脚本，让你玩转新功能。那咋用？你看，if (Modernizr.test(‘your_feature’)){这句就能试试看当前浏览器支不支持某个新功能！如果成功的话，它就给yep指定的文件“扔”下来；万一失败了，那就乖乖去找nope里的那份文件吧；就算是both也不怕，反正最后都会把对应的脚本文件拿来看看。是不是很神奇
{:;:;:;}{:;}
好比说呐，我们得弄清楚现在浏览器是不是支持canvas。如果可以，那就加载html5CanvasAvailable.js和自己编的myCustomScript.js两个脚本;如果不行嘞，那就得先装上excanvas.js这个东西，这样以前那些旧版浏览器也能享受到这个新功能。
节约代码与测试工作量
Modernizr这货儿用来修复旧版浏览器还真挺实用的！它利索地帮咱搞定CSS样式、动态装载新功能所需脚本，省了不少打字和调试的麻烦。学会使用Modernizr，不但提升网页兼容性和用户体验，更不用再担心解决兼容性的头疼事儿！
如果老旧版本浏览器吃不下新的HTML5或者CSS3功能，赶紧试试像modernizr这样的小助手！这办法很实在，能让前端开发人员快速搞定各种浏览器环境下的网页设计。这下子，网页制作也变轻松有趣！
$(document).ready( () {
(Modernizr.canvas) {
}
(Modernizr.localstorage) {
}
});
评论0