分享生活指南_最新时尚信息

如何旧版IE也能拥有最新的CSS3酷炫效果!

微软的 IE 浏览器虽然受到许多网页开发者们的讨厌,但毕竟身为目前市佔率最高的浏览器,开发者们也不能弃之不顾。然而,目前最流行的新一代网页标準 CSS3 拥有了许多实用的好功能,目前在非 IE 的浏览器中大多也已经支援了,那该怎幺办呢?

CSS3 到底有多好用

大多数的当代网页设计,扣除掉透过 Flash 和 Sliverlight,大致上都是使用 HTML+CSS 的组合进行设计,而 HTML 的最新版本为 HTML5,而 CSS3 则是 CSS 的接替者。

那 CSS3 到底多了什幺功能呢?举个最简单的例子而言,在 Web 2.0 的时代,许多网站都很喜欢使用圆角的设计,不管是在页面的按钮、或是文字框等都会使用圆角让画面更好看。然而这个简单的圆角效果製作起来却是相当麻烦,透过传统的 CSS2,我们只能透过自己先在

像是以下的图案便是透过 CSS3 在最新版 Safari 浏览器中所呈现出来的,这中间完全没有使用到任何一个图档!

如何旧版IE也能拥有最新的CSS3酷炫效果!

这样做的缺点自然是相当花费时间、且裁切出的图档也不能重複利用,更别提传输这些图档的额外网路频宽了。同样的道理也发生在画面的阴影效果、渐层效果等,没有 CSS3 我们只能透过一张张静态的图片去堆叠出我们想要的效果。

然而目前 CSS3 的支援状况诚如序文所提到的,大多数的现代浏览器像是 Chrome/Safari/Firefox/Opear 等均已经支援了 CSS3 上述的大多属性,而 IE9 也同样的支援。然而大多数的使用者可能使用的是 IE6~8 的版本,那该怎幺办呢?目前常见的作法便是摆着,就让 IE6~8 的使用者们看不到圆角、阴影等效果,毕竟这些效果往往只是锦上添花,即便没有这些特效网站也都能够正常的浏览。

CSS3 PIE
如何旧版IE也能拥有最新的CSS3酷炫效果!

而 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; }

前两行-webkit 和-moz 开头的分别是为了 WebKit 系列的浏览器和 Mozilla 系列浏览器所的 CSS3 规则,而第三条则是给 CSS3 PIE 所使用的。

透过这样的指定与加入.htc 档,IE 便可以自动的读取这只 JavaScript 并且显示出正确的 CSS 3 效果啰!

结论

CSS3 的方便性让许多开发者纷纷在新的网页专案中进行尝试,而透过 CSS3 Pie 更可以将 CSS 3 的支援加入 IE 浏览器中,让 CSS 3 真正能够灵活的使用在工作的专案上。

参考资源


上一篇: 下一篇:

相关阅读