使用Modernizr检测浏览器的HTML5和CSS3支持功能

什么是Modernizr

Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。 它比传统检测浏览器名称(navigator.userAgent属性)的方式更为可靠。 一整套测试的执行时间仅需几微秒。 此外,Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测,从而实现效率优化。

怎么使用Modernizr?

网页中加载Modernizr后,会自动在<html>标签中插入 <html class=”no-boxshadow”>类似的CSS类名,你只要在CSS文件中事先写好 .no-boxshadow img{**} 时应该显示的样式就可以了。

Modernizr也会生成一个Modernizr对象,你可以通过检测Modernizr.geolocation是否为ture来判断浏览器支持地理位置与否。

更详细的介绍请参考:http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html

 

让IE6/7/8支持CSS3圆角、阴影属性的脚本文件

ie-css31

作为一名网页设计人员,CSS3的新特性诸如绘制圆角边框、块阴影、文本阴影等功能,肯定让你兴奋不已吧!可是,IE这个老不死的却不断的给我们泼着冷水!当然IE9的发布和普及,也不知道会猴年马月!但,IE这老家伙也不是无药可救,世上无难事吗!

 

现在只要加载一个仅10K的.htc脚本程序,就能瞬间让IE也支持CSS的主流属性:圆角边框块阴影文本阴影。

使用起来也是很方便的,看下图:

ie-css3

只要在原有CSS基础上,多加一行代码即可。

 

演示及下载:http://fetchak.com/ie-css3/

CSS3 速查手册 + 参考学习资料整理

CSS3,出道有段时间了,作为一位前端开发人员,CSS3中的很多新特性肯定特别吸引人吧,反正特别吸引我,她能方便的实现圆角,阴影,渐变,还有她强大的选择器!她的出现让我感觉到了作为一名前端开发人员真正的乐趣,我们不用借助任何图形设计软件就能创造出优雅的网页!她让我彻底抛弃感觉很臃肿又拖后腿的图片(当然我不是说完全抛弃,它还会辅助我们创造更优美佳作。呵呵)!

css3sheet

这是英文原版,就像看电影一样,还是原汁原味的好!

查看原图JPEG版  PDF版下载

原文中还有CSS2.1的

 

另附我Google的CSS3其他参考和学习资料

继续阅读“CSS3 速查手册 + 参考学习资料整理”