说说渐进式增强

先不着急回答这个问题。
看看我们身边熟知的网站:
(用Firefox 或 chrome 查看)

为什么要用用Firefox 或 chrome 查看,来看看他们的代码:

transform 为 css3属性,目前,mozilla 和 webkit  系列浏览器(如firefox和safari)已经充分支持css3,只需加上浏览器专用的前缀就可以,附下图,特定浏览器的扩展。这就是淘宝加了上述代码加上-webkit,让部分浏览器用户超前体验了css3的神奇。

广泛应用的css3属性,

Border-radius 圆角
RGBA 颜色透明度
Box-shadow 容器阴影
-webkit-transition ···

目前以上属性均需加上浏览器前缀,并且不支持IE.。css3的普及大概还需再过10年。

那么我可以用css3实现渐进式增强的效果吗,一切以数据说话:
你的网站大部分访客还在使用IE6?如果是,你最好三思是否用渐进式增强技术。如果IE6的访客仅为1%,那务必尝试使用超前的技术。附图

现在你应该了解什么事渐进式增强了吧。
再来回答下面的问题吧

一个容器在浏览器中是圆角还是直角没关系吗?
——当然,只要可读性和功能性是一样的就可以(这才是最重要的)

网站是否在每个浏览器看起来都一样?
——如果你的回答是否定的,那么你就可以立刻毫无拘束的利用css3的优势简单的实现良好的用户体验,而不是设计的要求,作为视觉奖励。

最后,简单概括下

渐进式增强的概念:
不要完全不像下兼容,但是有必要为支持更强方式的人提供更强的功能或者更好的体验

为什么出现渐进式增强:
1.过时的IE6、IE7影响某些功能的使用;
2.某些细节可以适度放弃这些用户

如何说web 2.0时代 是以用户为中心的交互时代,那么渐进式增强的css3充分的完善了用户体验,使设计变得简单,交互变得如此轻松。

我们要做的从细节做起,等待和拥抱html5、css3的到来

参考资料:《无懈可击的web设计Ⅱ—— CSS3深入应用》、网站“PHPCHINA”

此本文为 小F 原创,转载请保留该链接  http://ue-ui.com/?p=485 谢谢