随着CSS3在各大浏览器中的支持率越来越高,也有更多的网站开发人员和网页设计者开始关心CSS3的实用技巧和使用CSS3设计“背后的理念”。毕竟,虽然支持率走高的趋势是好的,但是面前冷酷的事实仍然是各浏览器的标准纷杂,W3C的规范滞后。需要一种理念,或至少是一种倡议,指导Web开发人员应付这些复杂的局面。

在《CSS3实用指南》中,Zoe推荐给我们的是这样一种思想,渐进增强。渐进增强(Progressive Enhancement)是这样一种开发方式:在你编写Web页面时,首先让它们在基础的浏览器和设备上正常工作且展现得当,然后再辅以更高级但非必要的CSS和JavaScript等增强功能来为当前和未来的浏览器提供更好的支持。举例来说,你可以用朴素却语义化的HTML构建一个表单,即使没有样式它也能得到良好地展现,禁用JavaScript后它也可以正常地工作;随后你可以用CSS来丰富其外观,再使用JavaScript增加客户端层面的验证。我们的目标是利用现代浏览器的优势特性在确保网站对于每个用户来说可用的同时创造尽可能丰富的体验。

这个理念在国内尚处于预热的阶段,但是《JavaScript DOM编程艺术》的作者Jeremy Keith、jQuery之父John Resig等等很多前端畅销图书的作者以及技术大牛们,都曾在自己的书中或各种技术大会上倡导这一设计理念。几年来,渐进增强、平稳退化、不唐突性等概念也已经在国内前端技术社区中逐渐深入人心,同时也有一批积极的践行者,比如淘宝网开发团队等。

具体到CSS3的实践中,虽然“向尽可能多的人提供尽可能好的体验”这一伟大目标听起来相当不错,但其实不使用渐进增强技巧你也可以实现它——比如为旧式浏览器提供一套兼容方案来确保页面与其在新式浏览器下的表现和行为尽量保持一致——但通常来说这并不是明智的选择。改用渐进增强技术能够让网站的视觉丰富程度随着浏览器的现代化发展而不断提升,这能让用户和你双方都受益。

首先,为了在支持度较低的浏览器也能实现相同的效果而去添加Hack、兼容方案、模拟性脚本或其他技术将会耗费大量的人力和时间。即使最终你(在所能测试的有限数量的用户环境之下)实现了近乎一致的表现,但问题是——用户真正收获了什么?所有试图让IE看起来堪比年轻它十岁的浏览器的那些努力,完全可以用来改善网站的可访问性,或是进行更多的可用性测试,或是去实现其他真正可以帮到用户的改进工作,而不仅仅是让页面看起来“更靓一点”。

除此之外,想让网站在任何环境下看起来都保持一致是不可能的,因此不管你为此付出多少努力,结局依旧会令你失望。因此,如果网站无论如何都看起来不同的话,那么为什么不用CSS3技术来使它在新式浏览器上看起来更为惊艳呢?某些CSS3特性在不支持它的浏览器中简直是“无法模拟实现”的,但使用渐进增强的话,你就无需为了让你的网站适合所有人而放弃这些技术。仅仅因为部分人不愿或不能升级浏览器,却让使用新型浏览器的用户无法享受CSS3所提供的伟大技术,这是毫无道理可言的。相反地,先让网站能够正常工作于尽可能旧的浏览器上,然后不断为它在新型浏览器上实现更多的增强和改进。这个方法可让每个用户都得到对他来说最好的体验。随着时间的推移,当越来越多的人开始升级浏览器而浏览器本身的支持度也不断得到提升时,就会有越来越多的人体验到这些增强和改进,它不断而有效地使网站变得越来越好,却无需你刻意去做什么。只需要一次实现,它就让网站的体验与时俱进。

大部分人可能永远都不知道你的网站在不同的浏览器和设备上看起来并不相同,因为普通人并不会像Web设计师一样使用多个浏览器来对比设计的细节差异。即使他们会使用不同浏览器来访问你的网站,只要这些差异不会影响网站的易用性,他们也不会对此有什么特别的想法。说到底,假如有人上班时使用IE8,回家后使用笔记本上的Chrome,在iPhone上使用Safari,并且在Wii上使用Opera来访问你的网站,我想他终究会习惯所有这些不同设备上的不同表现。

如果你对渐进增强这个理念感兴趣,也可以关注这本书《Designing with Progressive Enhancement: Building the Web that Works for Everyone》,及其网站http://www.filamentgroup.com/dwpe/#aboutthisbook。这也是图灵在2012年计划出版的书籍,敬请期待。

(本文部分节选自《CSS3实用指南》)