1.3 检查浏览器是否支持CSS3

虽然在理想情况下，CSS3对设计师和用户都很友好，但最让人纠结的事情是，还有很多用户使用老版本的浏览器，或者使用系统自带的IE浏览器，这种情况在我国尤其严重。很可能我们做了一个很华丽的页面，但是一些使用IE6、IE7的用户看到的却是一片混乱的布局。

没有关系，在这种情况下可以先检查用户的浏览器对新属性的支持情况，再根据支持情况执行不同的代码。例如，设计师可以为使用低版本浏览器的用户呈现一个提示浏览器升级的画面。

1.3.1 使用Modernizr检查支持情况

Modernizr是一个检测浏览器对HTML5标签和CSS3属性是否支持的JavaScript库，它是一个开源项目，托管在GitHub。

Modernizr的功能其实很简单，就是使用JavaScript检测浏览器对HTML5和CSS3的特性支持情况。支持某个属性，就在页面的<html>标签上添加一个相应的class，不支持某个属性就添加一个带“no-”前缀的class。例如，如果被检测的浏览器支持<video>标签，Moderniar就会在<html>标签上添加video类，否则，添加no-video类。

Modernizr除了添加相应的class到HTML元素以外，还提供一个全局的Modernizr JavaScript对象，该对象提供了不同的属性来表示当前浏览器是否支持某种新特性。例如，下面的代码可以用来判断浏览器是否支持canvas和local storage。

$(document).ready(function() {

if(Modernizr.canvas) {

//这里添加canvas代码

}

if(Modernizr.localstorage) {

//这里添加本地存储代码

}

});

Modernizr官方站点提供了一个自定义工具来选择需要的检测功能，这样可以使下载的脚本最小化。

Modernizr的用法很简单，只需要在HTML页面中引用库的.js文件即可，代码如下。

<script type="text/javascript" src="modernizr-1.5.js"></script>

1.3.2 各浏览器对CSS3的支持情况

现在，各大主流浏览器对CSS3的支持越来越完善，曾经让多少前端开发人员心碎的IE也开始拥抱CSS3标准。当然，即使CSS3标准制定完成，现代浏览器普及到大部分用户也是一个相当漫长的过程。如果现在就使用CSS3来美化你的网站，那么有必要对各大主流浏览器对CSS3新技术的支持情况有一个全面的了解。

目前，五大主流浏览器对CSS3属性的支持情况见表1-1。

从表1-1中可以看出，CSS3中的Overflow Scrolling属性还没有浏览器支持，其他属性在采用WebKit核心的Chrome和Safari浏览器中表现非常优秀，其次是Firefox和Opera，同时，IE也迎头追赶，最新的IE11浏览器能够支持绝大多数的CSS3属性。

表1-1 各浏览器对CSS3的支持情况

提示

差别各异的浏览器致使页面在不同的浏览器中的渲染效果并不一致，特别是在当今这个信息发达的时代，设备、屏幕、浏览器的形态越来越丰富，人们的习惯设置也不尽相同，因此想再创建一个在任何地方都表现一致的页面就更加不可能。只要你关注如何提供实用、易用、好用的页面，一些表面上的差异就显得不重要了。

上一章目录下一章