CSS3Pie for IE

在过去几年中,谷歌的Chrome,Apple的Safari和Mozilla的Firefox等浏览器已经稳定地消耗了Internet Explorer曾经享有的市场份额。虽然从来没有这么多选择,但设计师仍然发现自己要处理的一件事是:很多人仍然使用Internet Explorer 6和7。

在使用CSS3和HTML5等技术时,我们必须考虑是否要等到Internet Explorer赶上或为我们的IE用户创建替代体验。

在撰写本文时,CSS3得到了所有主流浏览器的支持,微软在9月发布的新IE9测试版中引入了支持。

但是,虽然这个巨大的版本最终将使Internet Explorer用户能够访问HTML5和CSS3,但旧版本的浏览器仍将与这些技术不兼容。到目前为止,希望在IE上使用CSS3的开发人员必须为浏览器创建图形和备用CSS后备。

漂亮的工具

在这里,我想向您介绍一个漂亮的新工具,它可以轻松地为您提供跨浏览器的CSS3兼容性 - 它被称为CSS3Pie。

CSS3Pie是由Jason Johnston编写的新库,它代表CSS3 Progressive Internet Explorer。它为CSS3提供了向后兼容性,微软的浏览器版本一直可以追溯到Internet Explorer 6.0,它代表了一个简单的解决方案,网页设计师希望创建现代网页设计,而无需担心没有CSS3支持的浏览器可能看起来如何。

CSS3Pie的工作原理是创建像IE这样的浏览器能够理解的DHTML行为。然后,它可以控制它们的呈现方式,以便模拟浏览器本身无法显示的CSS3效果。这使开发人员能够轻松转换CSS3功能,如渐变背景,阴影甚至圆角。目前支持的功能包括:

- Border-radius

- 盒子阴影

- 边界图像

- 多个背景图像

- 线性渐变作为背景图像

这使设计人员能够为元素(例如号召性用语按钮)创建一组CSS3定义,而不必怀疑它是否对使用旧浏览器的用户看起来不错。 CSS3Pie将允许“现代”浏览器本地呈现CSS3定义,但它将处理不太懂如何解释新功能的IE版本。

如果您想学习如何使用CSS3Pie,请考虑按钮类的以下CSS规则:

.button {background-color:green;填充:5em的; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em;}


这在大多数浏览器中创建了一个带有圆角的按钮,但不是IE6-8.0。

.button {..... behavior:url(PIE.htc); }

但是,添加上面的CSS3Pie规则,现在IE上出现相同的圆角!魔法。

如果你是一个希望在你的项目中开始使用CSS3的网页设计师,那么CSS3Pie将会给你的布局添加向后兼容IE带来很大的压力。 CSS3Pie正在积极开发中,并且正在开发支持其他新功能,例如径向渐变和多个框阴影。

要立即开始使用CSS3Pie,请访问www.css3pie.com并下载新的测试版。您还可以浏览源代码并通过GitHub为项目做出贡献。喜欢吃馅饼!



翻译字数超限