1.1可用性其次

      当用户访问你网站中的内容和服务的时候，他们能理解并且找到他们想要的信息吗？

这是个简单甚至显而易见的要求，但是我已经记不清有多少次，当我访问一家公司的网站

时，绞尽脑汁尝试去找联系信息、开放时间和地点。结果只找到大量没用的市场营销信

息、无聊的视频和其他展示的宣传。 

      为什么人们不多思考：对于浏览他们网站的用户来说，什么信息是最有用的，然后如

何展现这些信息才能让用户更容易消化吸收？一个简洁、书写良好和明确提供的副本远比

堆砌浮华、夸张和专业性的知识来得更有效。

我的“可用性”观点（和许多其他人一样）是“别让我思考”，不要让你的用户思考

如何获得他们想要的东西。如果你还没有读过Steve Krug的《Don’t Make Me Think》一

书：一种网络可用性的常识教学法，那么第2版是必不可少的读物。

1.2优雅降级和渐进增强

      优雅降级和渐进增强这两个术语最开始流行（或至少值得关注）于大约十年前。两者

都是用来解决当浏览器不支持构建内容所需的所有特性时，内容如何去表现的问题。

     优雅降级指的是简化网站内容的一些特效但仍能完美地保证其可访问性和可用性。举

例来说，如果创建一个内容盒子，然后你赋予大量炫目的CSS3样式，同时确保旧版浏览器

仍然能以一种可读的形式显示文本，即便它看起来不美观。

     渐进增强指的是首先保证内容可被所有浏览器访问，在这个基础上为那些高级浏览器

添加对可用性和样式增强的支持。

     这两个是我一直喜欢的设计理念。但很多时候这两个理念并没有得到坚持，因为你经常会

碰到那种“痴迷于所有浏览器的像素完美”或者一些类似的荒诞追求的客户。不过，我坚信这

两个理念肯定会再次变得出色，尤其是在许多移动设备和其他备用浏览设备中使用所有CSS3特

性来渲染内容。同时，IE6、IE7和IE8仍然占据着巨大的市场份额，因此你还需要支持它们。

    对于追求在所有设备上都像素完美的客户来说，目前你所需要支持的不同新设备（手

机、平板电脑、电视等）实际是让事情变得更简单：对于“站点在所有台式和移动平台中

外观和功能都一样”的要求是不切实际的，事实上也没有意义（参见图1-3，由dowebsite

sneedtolookexactlythesameineverybrowser.com模仿）。注意，在台式电脑上表现良好的界

面，在移动设备或者平板上也可能会有很糟糕的用户体验。

    幸运的是，CSS3可以很容易做到渐进增强和优雅降级，并且在旧版浏览器也能正常工

作。如果大部分的特性能得到合理使用，它们将优雅地降级从而达到基本内容在不支持的

浏览器里依然可访问的目的。另外，如果需要的话，还有一些机制允许你构建支持或者提

供可替代的内容。

2.1对内容的思考过程

当在网站界面中实现闪亮的特性时，以下良好的思考过程应当贯穿其中。

1）创建一个基本的可访问HTML内容。基于内容的样式和行为应该尽可能可用和样

式增强，但它们不是作为访问内容的必需条件。

2）思考你是否有必要使用所有炫目和先进的技术，还是单纯只因为你是个想要众人

捧的酷酷小孩所以想使用而已。

3）检查用你所推荐的实施方案是否做到了优雅降级，同时留有可访问的基本内容。

4）测试内容是否可访问并且在多个设备上能正常显示（例如不同屏幕尺寸、控制机制）。

5）在没有CSS3和WebGL的情况下或者任何情况下，对于特定用户，内容是否可访

问。你最好建立一个提供内容入口的后备机制。

让内容被尽可能多的用户所访问到，这是你一直要关注的宗旨。

1）牢记优雅降级/渐进增强。

2）使用内置特性向不可访问的内容提供备选方案（例如，alt文本、视频的字幕）。

3）当没有任何内置机制时建立你个人的备选方案（例如，用Modernizr来检测特性并

提供替换样式）。

4）用补丁方案向那些不存在的特性提供支持。

我决定在本书中介绍的CSS3特性的原则是：得到两个及两个以上主流浏览器的支持，

并且通过补丁方案、替换内容、优雅降级等措施让应用该特性的设计在不支持的旧版浏览

器中依然能工作。不过我已经好几次打破这个原则，但也只在我认为这个特性很重要而且

可能在不久的将来有更多的实现方式时，以及即便它没有得到支持也完全不影响站点。

3.1 c  s s 3的特性

    先让我们简单地介绍你将用到的主要CSS3模块及其主要特性。你可以在www.w3.org/

Style/CSS/current-work.en.html的W3C CSS Current Work页面上查找关于每个模块的更多详

细信息。如你所见，很多模块还未完成，但这不影响你使用其中的一些特性。很多特性已

经得到浏览器支持，不过你需要增加厂商前缀.

   本书中所精选的主要CSS3模块包括：

   CSS颜色（）。在CSS3中CSS颜色有许多方法定义来指定

颜色，包括RGB（红、绿、蓝），HSL（色相、饱和度、亮度），RGBA和HSLA

（分别和前面两个一样但是引入了定义透明度的alpha通道），以及一个单独的opacity

属性来控制选区元素的透明度。

   CSS3字体（）。该模块不但包括对于可下载的Web字体（你猜对了，以前CSS Web字

 体是一个单独模块）的定义，而且包括其他影响字体的属性的定义（）。关于这些属性

我不准备讨论太多，除了Web字体，因为很多属性的浏览器支持度并不是很好。

   CSS3文本（）。它与能让文字变得光彩夺目的CSS3字体相

辅相成。CSS3文本包含CSS2所熟悉的条目，比如letter-spacing和text-transform，并

且引入新的条目，比如hyphenation（断字）和text-shadow（文字阴影）。

  CSS3选择器（）。对比CSS2中现有的选择器，CSS3

选择器定义一个更强大、更健壮的机制。它允许你在所指定的元素上应用样式。这

些选择器几乎都有良好的跨现代浏览器支持。

媒体查询（）。媒体查询是目前你为不同浏览设备（宽屏和窄屏）提供相同内容不同最

佳布局的主要方法。