微软新版IE9浏览器的推出确实让很多网页开发者们都兴奋了一把,因为IE9已经能够支持CSS3标准,因为在也不用为浏览器不支持网页标准而发愁了。不过目前市场占有率最高的还是旧版的
IE浏览器,开发者们也不能弃之不顾。那么如何才能让这些浏览器也能支持目前最流行的新一代网页标准CSS3呢?
CSS3到底有多好用
大多数的当代网页设计,扣除掉透过Flash和Sliverlight,大致上都是使用HTML+CSS的组合进行设计,而HTML的最新版本为HTML5,而CSS3则是CSS的接替者。
那CSS3到底多了什么功能呢?举个最简单的例子而言,在Web 2.0的时代,许多网站都很喜欢使用圆角的设计,不管是在页面的按钮、或是文字框等都会使用圆角让画面更好看。然而这个简单的圆角效果制作起来却是相当麻烦,透过传统的CSS2,我们只能透过自己先在Photoshop等绘图软体将圆角的图桉设计好、输出成图片后,在以背景的方式整张贴到网页上。
像是以下的图像便是通过CSS3在最新版Safari浏览器中所呈现出来的,这中间完全没有使用到任何一个图片!详情可以查看该文:
用哆啦A梦来测试四大浏览器对CSS3的支持
![利用CSS3属性制作的酷炫效果](//img.iefans.net/wp-content/uploads/2010/09/3618_doraemon-css3.png)
这样做的缺点自然是相当花费时间、且裁切出的图片也不能重复利用,更别提加载这些图片需要额外的网络带宽了。同样的道理也发生在画面的阴影效果、渐层效果等,没有CSS3我们只能透过一张张静态的图片去堆叠出我们想要的效果。
然而目前CSS3的支持状况诚如序文所提到的,大多数的现代浏览器像是
Chrome/Safari/
Firefox/Opear等均已经支持了CSS3上述的大多属性,而
IE9也同样的支持。然而大多数的使用者可能使用的是IE6~
IE8的版本,那该怎么办呢?目前常见的作法便是摆着,就让
IE6~IE8的使用者们看不到圆角、阴影等效果,毕竟这些效果往往只是锦上添花,即便没有这些特效网站也都能够正常的浏览。
CSS3 PIE
而
CSS3 PIE便是一个能够解决上述问题的方便工具。透过JavaScript的模拟,CSS3 PIE替IE实作了包含圆角、阴影、渐层和多重背景等CSS3所支持的内容,让旧版的IE浏览器也能够像其他新的浏览器一般直接的读取CSS3的样式代码,就不需要另外花费而外的时间制作图片了。
而要如何使用CSS3 PIE呢?首先我们必须先从官方网站上面下载原始代码,下载后解压缩会是两个.htc档,其中一个是有压缩过、一个则是没有压缩过的,除非是要研究里面的样式代码细节,否则直接使用压缩的版本即可。
接下来我们的CSS样式代码当中加入相关的CSS属性,并且附上与这隻.htc档的连结:
div#header {
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
behavior: url(PIE.htc);
}
前两行-webkit和-moz开头的分别是为了WebKit系列(Safari、Chomre)的浏览器和Mozilla系列(Firefox)浏览器所的CSS3规则,而第三条则是给CSS3 PIE所使用的。
透过这样的指定与加入.htc档,IE便可以自动的读取这隻JavaScript并且显示出正确的CSS 3效果哦!
结论
CSS3的方便性让许多开发者纷纷在新的网页专桉中进行尝试,而透过CSS3 Pie更可以将CSS 3的支持加入IE浏览器中,让CSS 3真正能够灵活的使用在工作的专桉上。
参考资料:
CSS3.info – 详细介绍CSS3的网站标签:IE浏览器IE技巧CSS3