CSS 高流量网站高级教程（二）

于 2024-08-13 11:42:40 发布
阅读量1.2k 收藏 29
点赞数 26
分类专栏： VKDoc 文章标签： VKDoc
License CC BY-NC-SA 4.0 / 自豪地采用谷歌翻译
本文链接：https://blog.csdn.net/wizardforcel/article/details/141160160
版权

原文：Pro CSS for High Traffic Websites

协议：CC BY-NC-SA 4.0

四、框架和集成

当在高流量的网站上工作时，我们希望达到最高水平的效率和可维护性。就 CSS 而言，这意味着我们的样式表应该灵活、健壮并且尽可能小。

在实现这些目标的过程中，我们可以使用一些工具，遵循一些指导方针。任何经验丰富的开发人员都知道，在任何需要构建的时候从头开始通常都是浪费时间和资源。当在封闭的团队和组织中工作时更是如此，这些团队和组织倾向于从事已经(或者应该)定义了基础的项目。

在前面的章节中，我们提到了为了使你的代码和过程一致化，制定指导方针是很重要的。在下一章，我们将会看到一些在你的网站上实现品牌化的技巧，以及一些设计概念在应用于 CSS 时意味着什么。我们还将看看如何建立一个设计库，你可以翻译成你的 CSS 和模块化使用。这一切都与简化开发有关，通过向开发人员提供有意义且他们可以遵循的一般规则，使他们能够做出自己的选择。有了一套明确的指导方针，你也将最小化错误和个人偏好(在你的团队和组织中，个人偏好没有一致性重要)的可能性。

另一个实现高水平的灵活性以及高效率和可维护代码的步骤是拥有一个为您的需求而设计的框架。如果这样一个框架构建得当，它应该是足够模块化和灵活的，这样你就可以依赖它来启动任何一个遵循与公司内其他项目相同的设计准则的项目。在本书的最后一章，我们将从头开始创建一个框架，但是在这一章，我们将看看一些现有的和最流行的 CSS 框架，它们是如何工作的，以及使用它们的利弊。

你所从事的项目的规模可能意味着你的代码不会永远被隔离或者只被负责的人接触。您最终会向 it 部门介绍一名新员工，他不习惯您的流程，可能会不小心破坏一些东西，或者您可能需要集成第三方代码，完全在您的团队或公司之外。

这些都是在高流量、高性能的网站上工作时会遇到的可能性和麻烦，但它们不也让你的工作变得有趣吗？它们很有挑战性，但是你可以做一些事情让你的生活变得更容易。

在本章中，您将执行以下操作:

  • 看看一些最流行的 CSS 框架，包括重置样式表
  • 理解面向对象的 CSS 背后的原理以及它是如何工作的
  • 查看如何处理覆盖 CSS 文件
  • 获取一些关于如何处理第三方代码的提示
  • 理解防御性 CSS 的原理
  • 了解如何避免创建脆弱的 CSS
  • 了解如何在 CSS 中使用元数据

框架

任何有一点经验的 CSS 作者都知道，创建灵活、健壮、跨浏览器的 CSS 布局不是一件容易的事情。这也不是一项独特的任务——尽管我们很想否认这一点，但只有一定数量的网格布局在 Web 上是有效的。我们一遍又一遍地使用相同的元素和相同数量的列——诚然，有一些变化。

这种重复不一定是件坏事；虽然这是老生常谈，但没有必要重新发明轮子(或者，对于体育爱好者来说，改变一支获胜的球队)，这就是为什么 CSS 框架在 web 设计师和代理机构中如此受欢迎。它们提供了一个坚实的结构，我们可以在此基础上构建，消除了编码基于 CSS 的布局所带来的一些重复和琐碎的任务。

然而，通过这样做，框架必须能够适应任何设计者选择的任何布局变化。在必要的灵活性和保持代码简洁之间有一个权衡。

框架容易遭受分裂和阶级之苦。虽然 divitis 是一个修饰过度使用div元素的布局的术语，但是classis is(你猜对了)适用于滥用类的样式表。

他们不仅遭受这些弊病，而且框架也倾向于带来各种不必要的冗长代码——就像任何类型的框架一样。因为它们迎合了尽可能多的变化，我们可能会看到类似下面的片段:

清单 4-1。【http://www.blueprintcss.org/蓝图 CSS 框架代码摘录】??

input.span-1, textarea.span-1 { width: 18px; } input.span-2, textarea.span-2 { width: 58px; } input.span-3, textarea.span-3 { width: 98px; } input.span-4, textarea.span-4 { width: 138px; } input.span-5, textarea.span-5 { width: 178px; } input.span-6, textarea.span-6 { width: 218px; } input.span-7, textarea.span-7 { width: 258px; } input.span-8, textarea.span-8 { width: 298px; } input.span-9, textarea.span-9 { width: 338px; }

在前面的例子中，您可以看到 CSS 作者可以用来确定表单输入宽度的类列表。这只是一小段，因为框架列出了 48 个不同类别中的 24 种可能的宽度。

当使用一个现成的框架时，你会留下一些你不需要的代码。您可以使用一些工具来扫描与 HTML 页面相关的 CSS 文件，这些文件会列出页面未使用的任何规则。

其中一个工具的例子是 Firefox 附加 CSS 用法(https://addons.mozilla.org/en-US/firefox/addon/css-usage/)，它也是 Firebug 的扩展(见图 4-1 )。这个附加组件将向 Firebug 添加一个选项卡，您可以逐页单击它，它将返回页面中链接或嵌入的所有 CSS 规则的列表，用红色突出显示没有使用的规则。它还显示了正在使用的规则在页面中出现的次数。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 注意: CSS 的使用将不会通过 JavaScript 影响动态创建的元素。虽然它不是 100%有效，但它是一个非常有用的工具。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4-1。 Firefox 的插件，CSS 用法，这是一个 Firebug 扩展，在页面上显示未使用的选择器。

这些工具不仅对现有的框架有用，而且在确定您自己的样式表是否需要彻底清理时，它们也是一个有用的工具。

许多 CSS 作者反对使用这样的框架。反对它们的主要论点是，因为它们需要灵活性，框架倾向于使用无意义的类命名，并使它们自己成为非常类似于表格的布局方法。发生这种情况是因为当使用框架编码 CSS 布局时，您必须像处理表格一样可视化布局，包括所有的嵌套和单元格跨度。如果你看一下图 4-2 中的例子，它使用了与清单 4-1 中代码部分相同的网格，你可以看到这种类似表格的方法的一个例子:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 4-2。*可视化必要的容器元素，使用框架将布局转化为 CSS 网站

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **注意:**在接下来的“替代用途”一节中，我们将介绍如何使用 Blueprint CSS 框架创建这个布局的快速教程。

使用公共框架的一个很大的好处是，新员工更有可能熟悉和适应它们，因此在他们的第一个项目和任务中更快地产生更少的问题和错误。他们也已经被记录在案，可能有一个社区邮件列表，IRC 频道，等等。

有各种各样的 CSS 框架。三个比较有名的是

  • 蓝图
  • 960 网格系统
  • YUI 网格

我们不会推荐一个框架而不推荐另一个——事实上，我们认为对于高流量网站来说，创建一个定制的框架是更好的选择，即使它借鉴了现有的框架。然而，我们将简要地看一看每一个最著名的。

蓝图 CSS

蓝图 CSS 框架由 Olav bjrky 创建，并于 2007 年 8 月发布(见图 4-3 )。它通常被认为是最全面的 CSS 框架，因为它不仅允许创建基于网格的布局，还提供了坚实的排版基础，考虑到垂直节奏等方面。它还提供了重置和打印样式表，以及表单的基本样式。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 4-3。*蓝图 CSS 网站首页([www.blueprintcss.org/](http://www.blueprintcss.org/) )

默认情况下，框架使用 24 列布局(每一列跨越 30 个像素，右边距为 10 个像素)，但是您可以使用文件中包含的压缩器来创建不同的布局(您可以在官方文档[jdclayton.com/blueprints_compress_a_walkthrough.html](http://jdclayton.com/blueprints_compress_a_walkthrough.html)中找到相关教程)。

使用 Blueprint 就像在页面上的块周围包含一个带有“容器”类的包装容器一样简单。例如，根据每个内部容器的宽度，您需要对跨越整个页面宽度的div使用“span-24”类，或者对跨越 8 列的块使用“span-8”类。如果容器是特定容器或列中的最后一个，它还应该包括一个“last”类(这将删除该容器的右边距，因为它是不必要的)。包含页眉、侧栏、主要内容区域和页脚的简单布局的 HTML 如下所示:

<div class="container">    <div class="span-24 last">       Header    </div>    <div class="span-24 last"> `      


         Sidebar
      

      

         Main content
      

   
   

      Footer
   

`

Blueprint 的优势之一是其背后的社区，它不断地创建和发布新的插件、主题和其他可以与基本框架结合使用的工具。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 4-4。*蓝色恩惠网站使用蓝图([www.blueflavor.com/](http://www.blueflavor.com/) )

Blueprint 的核心文件(screen.css，ie.css，print.css)加起来总共 20 KB。

960 网格系统

960 网格系统 CSS 框架(见图 4-5 )由纳森·史密斯开发，并于 2008 年 3 月发布。该框架的开发重点是网格；尽管它提供了基本的印刷样式，但它的主要目的是提供一个跨浏览器的基础(它有完整的 A 级浏览器支持。 1 你可以在第六章中读到更多关于分级浏览器支持的内容，它允许在最常见的基于网格的布局上有许多变化。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 4-5。*960 网格系统框架首页([960.gs/](http://960.gs/) )

按照我们用来演示 Blueprint 的同一个简单布局示例，我们将使用 960 Grid System 创建它的一个版本。默认情况下，框架在 12 列或 16 列的网格上工作。我们需要添加一个容器，用“container_16”(或“container_12”)类包围我们的内部块；内部容器应该有“grid_16”、“grid_14”等类，这取决于它们跨越了多少列。下面是我们简单布局的最终 HTML 标记:

<body>    <div class="container_16">       <div class="grid_16">          Header       </div>       <div class="grid_4">          Sidebar       </div>       <div class"grid_12">          Main content       </div> `       


         Footer
      

   

`

1 基于雅虎！在[developer.yahoo.com/yui/articles/gbs/](http://developer.yahoo.com/yui/articles/gbs/)的定义。

和 Blueprint 一样，有几个在线工具可以让你根据自己的需要配置框架(见图 4-6 )。由 Stephen Bau 创建的 Fluid 960 网格系统基于最初的 960 网格系统，但允许流动和固定的布局，并包括导航、表格、表单、文章和排版等元素的基本样式。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 4-6。*黑色庄园网站首页，使用 960 网格系统框架([blackestate.co.nz/](http://blackestate.co.nz/) )

简化后，主 960gs 文件(960.css 和 reset.css)占用 12 KB。

YUI 3 格

YUI 3 网格框架是雅虎的一部分！用户界面(YUI)库(见图 4-7 )。该库包括 JavaScript 资源和 CSS (YUI 3 CSS 还包含重置和排版样式表)。它的工作方式与本章介绍的其他框架类似，不同之处在于:主容器没有预定义的宽度；只有预定义的“单位”，其中一个容器可以在另一个容器中扩展。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 4-7。*YUI 3 库主页，包含 YUI 3 CSS(框架[developer.yahoo.com/yui/3/](http://developer.yahoo.com/yui/3/) )

为了说明 YUI 3 网格是如何工作的，我们将使用与前面相同的例子。然而，在这种情况下，我们需要向页面的body元素添加所需的宽度，如下所示:

body {     margin: auto;     width: 960px; }

“margin: auto”属性将使我们的内容在页面上居中。接下来，与其他框架一样，我们需要包含一个带有类“yui3-g”的包装容器。其中的容器将根据它们应该填充的宽度百分比(或“单位”)来取类名。所以，举个例子，如果侧边栏占了总宽度的三分之一，就应该有一个“yui3-u-1-3”的类，如果主内容区占了总宽度的三分之二，就应该有一个“yui3-u-2-3”的类。YUI 附带了一组预定义的单元类(列在框架的网站上)。

我们的最后一个示例将包含以下 HTML:

`
   


      

         Header
      

      

         Sidebar
      

      

         Main content
      
      
      

         Footer
      

   

`

缩小的 YUI 3 网格文件占用 4 KB。但是，这仅包括网格，不包括文本默认值或重置。附带的 YUI 重设(本章中提到)、YUI 基础和 YUI 字体也各为 4 KB(总共 12 KB)。

替代用途

CSS 框架的一个常见用途是在原型阶段，即使是那些不喜欢在生产中使用它们的人。因为它们提供了一个可靠的、跨浏览器的 CSS 解决方案，所以使用现有的框架很容易快速创建模型、线框和网站的简化版本。

根据定义，原型(在第一章中有更详细的介绍)是由我们不打算投入生产的代码组成的(至少在其当前状态下)，编写原型只是为了创建一个概念证明。记住这一点，与交付时间和资源使用相比，语义、可访问性、过多的标记、文件大小和其他通常至关重要的考虑事项并不重要。事实上，有时更好的办法是削弱你的原型，以避免它成为产品代码，因为它“足够好了”

让我们以图 4-2 中的基本线框为例，使用 Blueprint CSS 框架将其翻译成 HTML。第一步是在 HTML 文档的头部链接所需的 CSS 文件:

<link rel="stylesheet" href="blueprint/screen.css" media="screen, projection" />

接下来，我们需要添加一个带有类“container”的包装器div,以便蓝图文件将其中的容器作为目标:

`
        


        …
        

`

我们的布局由 8 列组成；Blueprint 框架默认使用 24 列，所以我们将在线框图中为每一列计算 3 列。考虑到这一点，顶部块跨越 24 列，左侧列跨越 6 列，右侧(包括 5 个容器)跨越 18 列，依此类推。

如果一个容器是一行中的最后一个，它也应该有“last”类，所以右边距被删除。

我们的线框的基本结构应该是这样的:

`
   


        …
      

      

        …
      

      

         

            

              …
            

            

               …
            

            

               …
            

         

         

            …
         

         

            …
         

      

   

`

接下来的步骤是向这些容器中添加一些简单的文本片段，向容器中添加一个新的类，并在我们的 CSS 中引用该类，以便我们可以使用它来进一步设计主容器的样式(记住，这是一个简单的线框，因此对于我们的示例，我们已经将这一行简单的 CSS 直接嵌入到 HTML 文档中::

<style>         .b { background: #d4d4d4; margin-bottom: 10px; } </style>

在图 4-8 中，你可以看到完成的线框。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 4-8。*用蓝图 CSS 框架创建的简单线框

从这个简单的例子中可以看出，现有的框架是创建快速线框和实体模型的有用工具(从阅读入门指南到创建最终产品只花了我们不到 10 分钟的时间)。

重置样式表

尽管有人反对 CSS 框架，但大多数 CSS 作者总是使用其最简单的形式之一:重置样式表。每个浏览器都有一套默认样式，在细节上与其他浏览器不同，如元素的边距和填充、垂直对齐、宽度和高度或字体大小(见图 4-9 )。大多数最新的浏览器在用户代理样式表上相当一致；即使是最新版本的 Internet Explorer 和 9)也在迅速赶上并朝着类似的方向发展。 2 为了克服仍然存在的小的不一致，特别是在旧浏览器中，从一个共同的空白开始，作者求助于所谓的“重置样式表”

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 4-9。*Safari 5(上图)和 Firefox 3.6(下图)中输入元素的渲染对比。Safari 会在元素周围添加额外的边距。

2 您可以在[www.iecss.com/](http://www.iecss.com/)看到不同版本的 Internet Explorer 中用户代理样式表的比较和演变。

对于重置样式表，有人支持，也有人反对。我们认为，most 列出的缺点可以通过规划来克服，对于一个有经验和知识的 CSS 作者来说应该不成问题。

使用现成的重置样式表的一个缺点是，我们没有利用浏览器的默认设置，稍后我们会在 CSS 中及时添加回来。人们倾向于按原样使用重置样式表，而不根据自己的需要进行调整。这通常会导致 CSS 文件中的大部分规则被覆盖，被那些更为设计考虑的规则覆盖。在这些情况下缺乏计划会给我们留下不必要的规则，这只会使我们的文件更长，更难更新和调试。如果你希望你的网站上的简单列表有默认的项目符号，没有理由在你的重置(或基础)样式表中添加一个“li { list-style: none; }”规则；相反，你应该只设计不需要项目符号的列表，比如导航。如果你网站的标题主要是粗体，那么如果你要覆盖它，也没有理由添加一个规则来声明它们都应该有一个normal的font-weight值。

也许考虑一个更像基本样式表的重置样式表(这是许多 CSS 作者提出的),并在创建它们时包含一些浏览器自己的默认设置，这可能是理解拥有一个共同起点的重要性的更简单的方法，尤其是在团队中工作时。

W3C 已经为 HTML 4 发布了一个“鼓励开发者使用”的 CSS2 默认样式表现在已经过时，不完整，但可以作为参考和起点([www.w3.org/TR/CSS2/sample.html](http://www.w3.org/TR/CSS2/sample.html))。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **注:**有一个非官方的(虽然基于规范的渲染部分，可以在[www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints](http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints)找到)HTML5 版本的这些默认值，由 Jonathan Neal ( [www.iecss.com/whatwg.css](http://www.iecss.com/whatwg.css))创建，W3C 工作组成员推荐。

让我们看几个比较常见的重置方法和样式表。

通用选择器复位

通用选择器复位无疑是同类产品中最小的。尽管这可能感觉像割下你的鼻子来气你的脸，但它的简单性是无可辩驳的，而且与其他重置相比，这种好处还伴随着文件大小的节省。

没有比这更简单的复位了:

{    margin: 0;    padding: 0; }

但这真的能被认为是彻底的重置吗？毕竟，它只涵盖了两个属性，而可能还有其他属性需要重置，以定义一致的跨浏览器基础。除此之外，它还会从您可能不想重置的元素(如表单元素或表格)中删除边距和填充，您以后必须覆盖这些元素。还要考虑到节省的文件大小可能会被你不得不在文件的后面为你的网站上使用的许多其他元素定义边距和填充所抵消。

众所周知，通用选择器在单独使用时不会对网站的性能产生负面影响(当它与其他选择器一起使用时会产生恶劣的影响)，但它不是克服浏览器不一致性的完善或完整的解决方案。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **注意:**尽管使用通用选择器的低效率和性能影响似乎是显而易见的，但用当前的工具进行纯粹的跨浏览器研究是不可能的。我们建议不要理所当然地使用选择器，但是它在这里的使用是清晰而实用的。

埃里克·迈耶的重置

Eric Meyer 的重置样式表是最流行的，也是大多数 CSS 作者使用的样式表。这个样式表最初是受 Yahoo！它的主要目的是明确说明哪些元素应该被重置，而不是像通用选择器重置那样使用一个无所不包的选择器。

样式表被仔细地注释，以便 CSS 作者不要忘记样式不应该开箱即用，但事实是许多人选择忽略这些注释，简单地复制和粘贴 CSS。这导致了一些人的评论，他们担心重置(因为它在开发人员中非常受欢迎)会妨碍可访问性，因为它最有争议的规则是:“:focus { outline: 0; }”，在最初的版本中，它之前有一个警告作者定义焦点样式的评论(这经常被忘记)，但在最新的版本中已被删除。

Meyer 已经发表了这个重置的几个版本，最新的版本发表在他的博客上，时间是 2011 年 1 月 26 日[meyerweb.com/eric/tools/css/reset/](http://meyerweb.com/eric/tools/css/reset/)。

/* http://meyerweb.com/eric/tools/css/reset/    v2.0 | 20110126    License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block; } body {    line-height: 1; } ol, ul {    list-style: none; } blockquote, q {    quotes: none; } blockquote:before, blockquote:after, q:before, q:after {    content: '';    content: none; } table {    border-collapse: collapse;    border-spacing: 0; }

这个最新版本的重置，除了更加小心大纲焦点样式，还包括新的 HTML5 元素，并删除了不赞成使用的 HTML 元素。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **注意:**在 Internet Explorer 之前的版本中，您无法定位新的 HTML5 元素。为了克服这一点，有必要将它们包含在另一个元素中并以包含元素为目标，或者使用一种称为 HTML5 Shiv 的 JavaScript 技巧为每个标签创建一个虚拟元素(不呈现它)，这迫使 IE 注意到这些标签的存在。这项技术由 Sjoerd Visscher 发现，由 John Resig 推广，由 Remy Sharp 在[remysharp.com/2009/01/07/html5-enabling-script/](http://remysharp.com/2009/01/07/html5-enabling-script/)完善。这两种方法都有缺点(第一种会产生多余的标记，第二种会产生 JavaScript 依赖)，所以在做出决定之前要考虑你的受众。

这是一个相当全面的重置样式表，我们建议您从中获取灵感。但是，我们不建议完全按原样使用它(作者也不建议),因为您可能会发现自己重新定义了一些您以前重置的规则——它将始终取决于您正在进行的设计的需要以及您希望您的元素具有的基线样式。

YUI 3 CSS 复位

最初的 YUI 重置样式表是在 2006 年和完整的库一起发布的。它非常精确地选择了哪些元素以及如何设计。例如，它只删除块级元素和一些表单元素的边距和填充；它解决了表单元素中的字体继承问题；它还增加了浏览器特有的调整字体大小的功能([developer.yahoo.com/yui/3/cssreset/](http://developer.yahoo.com/yui/3/cssreset/))。

以下是最新 YUI 重置的评论版本(在撰写本文时):

/* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 3.3.0 build: 3167 */ html{    color:#000;    background:#FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {    margin:0;    padding:0; } table {    border-collapse:collapse;    border-spacing:0; } fieldset,img {    border:0; } address,caption,cite,code,dfn,em,strong,th,var {    font-style:normal;    font-weight:normal; } li {    list-style:none; } caption,th {    text-align:left; } h1,h2,h3,h4,h5,h6 {    font-size:100%;    font-weight:normal; } q:before,q:after {    content:''; } abbr,acronym {    border:0;    font-variant:normal; } /* to preserve line-height and selector appearance */ sup {    vertical-align:text-top; } sub {    vertical-align:text-bottom; } input,textarea,select {    font-family:inherit;    font-size:inherit;    font-weight:inherit; } /*to enable resizing for IE*/ input,textarea,select {    *font-size:100%; } /*because legend doesn't inherit in IE */ legend {    color:#000; }

尽管这种重置经过了多年的改进，但对于您的特定问题来说，它可能不是完美的解决方案。如前所述，您正在处理一种特定的设计风格，并且在这个样式表中声明的一些规则可能必须在稍后的代码中被覆盖，这是没有效率的。

其他复位示例

除了前面提到的复位之外，还有各种其他复位，每种都略有不同。然而，他们似乎从同一套重置(主要是 YUI 和埃里克·迈耶的重置)中汲取了灵感，并分享了其中的许多规则和属性。

blue print 框架将其 reset.css 集成到主 screen.css 文件中，但也在源代码文件夹中提供了单独的文件。蓝图 reset.css 看起来是这样的:

`/* --------------------------------------------------------------

reset.css
   * Resets default browser CSS.

-------------------------------------------------------------- */

html {
   margin:0;
   padding:0;
   border:0;
}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* This helps to make newer HTML5 elements behave like DIVs in older browers */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

/* Line-height should always be unitless! */
body {
  line-height: 1.5;
  background: white;
}

/* Tables still need ‘cellspacing=“0”’ in the markup. /
table {
   border-collapse: separate;
   border-spacing: 0;
}
/ float:none prevents the span-x classes from breaking table-cell display */ caption, th, td {
   text-align: left;
   font-weight: normal;
   float:none !important;
}
table, th, td {
   vertical-align: middle;
}

/* Remove possible quote marks (") from ,

. */
blockquote:before, blockquote:after, q:before, q:after { content: ‘’; }
blockquote, q { quotes: “” “”; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* Remember to define your own focus styles! */
:focus { outline: 0; }`

960 网格系统的重置也从同样流行的样式表中汲取灵感。以下是 960.gs reset.css 文件的格式化版本(在其原始版本中，该文件被缩小):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,addr ess,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u, i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {    margin:0;    padding:0;    border:0;    outline:0;    font-size:100%;    vertical-align:baseline;    background:transparent } body {    line-height:1 } ol,ul { list-style:none } blockquote,q {    quotes:none } blockquote:before,blockquote:after,q:before,q:after {    content:'';    content:none } :focus {    outline:0 } ins {    text-decoration:none } del {    text-decoration:line-through } table {    border-collapse:collapse;    border-spacing:0 }

从一个巧妙的默认的共同点开始

网上有几十种不同的重置样式表，有些比其他的更详尽。CSS 重置背后的主要思想是，它为您提供了一个跨所有浏览器的共同点，您可以在此基础上满怀信心地构建，您的代码和设计的跨浏览器实现之间不会出现不一致。

当建立一个有数百万用户访问的网站时，最好知道你所创建的东西有正确的基础，并且最令人不快的浏览器默认设置不会进入你不太显眼的页面。然而，这并不意味着您应该使用现成的重置样式表。

作为一个有经验的 CSS 作者，你应该花时间考虑你想为你的页面设置哪些默认值；您应该考虑可以从现有的样式表中使用什么，以及可以从它们中学到什么，但是不要忘记它们的存在和创建主要是为了满足创建它们的开发人员的需求。花时间定制你的基本样式，使它们与你的网站相关:你希望你的 CSS 高效并避免冗余，所以重置一切以便以后再添加不是一个好主意。

因为你应该尽可能减少 HTTP 请求，我们的建议是样式表的重置部分不应该作为一个单独的文件，而应该合并到你的主 CSS 文件中。

为什么要创建自己的框架？

模块化是一个灵活的 CSS 文件系统的核心概念，也是任何从事高流量网站工作的团队的目标。

模块化之所以重要，是因为它允许代码在同一网站的不同部分和同一系列的子网站中重用。如果在构建 CSS 时考虑到了这一点，那么使用代码片段来设计不同页面中相似元素的样式将变得可能和容易，而无需破坏现有代码，也无需嵌入或链接到更大的 CSS 文件。

通过创建您自己的框架，您正在创建一个可重用的代码库，从而提高团队的效率。一个框架不需要太大，但是它应该包含基本的排版和布局变化等元素；表单元素；跨多个站点使用的模块，有小的变化，如导航项目；幻灯片、工具提示或标签等组件。以及在一个或多个站点中易于多次使用的每个元素。它还应该包括网站的印刷和移动版本的单独样式表。

框架(或 CSS 库)带来的可重用性对于效率和文件大小来说是无价的，并且允许更一致和健壮的代码。不同的作者有不同的元素编码方式，比如制表符或者水平导航；如果有一个包含示例或模块的存储库，可以应用于现有的样式表，显示这些元素应该如何显示和编码，那么很大一部分不同的编码样式将被消除。

第十一章包含了创建你自己的 CSS 框架的分步指南。

面向对象的 CSS

面向对象的 CSS (OOCSS)是由前端性能顾问妮可·沙利文引入的概念。Nicole 项目的核心是 CSS(尤其是高性能网站)应该以模块化、灵活的方式处理的概念。

面向对象编程

面向对象编程(OOP) 是一种编程方法，它将代码分解成离散的块(对象)，并允许我们重用它们或构建继承其属性的新块。

举个例子，我们可能有一个名为 car 的对象。这个对象有某些属性:它有门、引擎、钥匙、窗户、轮子等等。在许多方面，我们可以把这个对象看作类似于一个模板。我们可能会使用这个模板来创建许多汽车。虽然我们是基于我们的基本模板的汽车，他们可以有更具体的属性；我们可以定义门的数量、引擎大小、颜色、品牌、型号等等。

这种方法同样适用于 CSS，并且很可能您已经不假思索地使用了它。例如，我们的页面上可能有一个我们认为是块的对象。为了举例，我们说一个块有绿色边框、圆角和灰色背景。

`

I am a discrete block

I am another discrete block
`

但是，我们可能希望一些块具有更具体的属性，如位置、宽度等:

`

I am a discrete block

I am another discrete block
`

以这种方式使用类允许我们拥有一个基本对象，然后创建继承基本对象属性的更具体的对象。我们甚至可以通过使我们的选择器更加具体来覆盖基本对象的属性。

oocs

尽管术语面向对象可能会引起误解——事实上，这也是许多类似讨论的主题——OOCSS 是编码 CSS 的有效方法。

OOCSS 的主要目标之一是鼓励重用独立于我们试图设计的元素位置的代码片段——CSS 在任何地方都应该完全一样:“不管你把一个对象放在页面的什么地方，它的行为都应该是可预测的，这就是为什么面向对象的 CSS 避免依赖于位置的样式。”([www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/](http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/))。

这与团队在开发他们的样式表时通常采用的沙箱方法相反——例如，命名空间 CSS 选择器，这在第二章中有更详细的描述。

同样的与位置无关的原则反过来也适用:更改代码的一部分并不意味着破坏其余部分。此外，如果子元素不需要在特定的父容器中才能看起来正确，则父容器不应该依赖其子元素才能在页面上正确呈现。Nicole 将其总结为将内容与容器分离 OOCSS 的原则之一。

在下面的例子中，容器和其中标题的样式规则是分开的，可在其他元素中重复使用——父元素不依赖其子元素来保持正确的外观，反之亦然:

`CSS:

.module {
   margin: 10px;
}
.hd {
   padding: 5px;
   color: #333333;
}

HTML:

   

Title

`

另一个原则建议，控制元素(或对象)结构的规则应该与控制其外观(美学)的规则分开。让我们看一个例子:

`CSS:

.module {
   margin: 10px;
}
.moduleSale {
   background: #efefef;
}

HTML:

   …
`

在前面的例子中，我们用另一个控制组件皮肤的类来扩展组件。控制布局的规则和控制皮肤的规则都可以独立地为其他组件重用。

抽象重复模式以实现可重用性和整体模块化是一种很有帮助的方法，因为你必须基于对设计中所有元素的全面分析，在动手之前考虑如何构建 CSS。在 OOCSS 中，鼓励你首先考虑独立的对象，然后才是页面；您应该能够使用现有的模块化 CSS 构建任何类型的页面。

然而，对于 OOCSS 来说，并非一切都是优势。在拥有一个更小的样式表(其中不惜一切代价避免冗余)和拥有一个更大的、类混乱的 HTML 文档之间有一个折衷。

因为 OOCSS 试图避免使用元素选择器——这样类就不会局限于某个特定的元素——它没有充分利用原始标记的语义。为了避免特殊性冲突，级联还没有发挥出它的全部潜力(事实上，你正在与之对抗)。创建基于类的选择器是为了使每个规则都具有相同的特性，以便能够覆盖(或者更好的是，扩展)其他类。

OOCSS 的另一个弱点，也是反对者最喜欢指出的，是它对类的使用是无意义的。

如果对 CSS 采用面向对象的方法，你将拥有一个“模块”类，而不是一个“侧栏”类之所以会发生这种情况，是因为通过将它命名为侧边栏，我们正在将其本地化，并将其限制在我们页面上的某个位置——我们可能希望在我们网站的主要内容区域内对div使用完全相同的样式，因此命名需要有灵活性。问题是，通过删除这些更具语义性和更易理解的类名，我们似乎正在接近表示性的类名，正如我们前面提到的，这是框架也面临的一个问题。

随着新的 HTML5 元素的引入，这个问题可能会得到一定程度的缓解，比如header、footer和aside。通过使用这些新元素，我们已经在标记中指出了我们想要样式化的内容的基本语义轮廓。当然，永远不会有足够的元素来表明我们可能希望从文档中得到的一切。实际上，除非您使用非常常见的类名或基于标准的类名(比如微格式)，否则语义对开发人员的好处大于对用户的好处。我们应该尽可能地追求语义，但这不是 CSS 的全部。

OOCSS 在处理需要灵活但健壮的代码的大型网站时最有意义，并且编码实践的一致性是一个目标。虽然我们同意它有有效的强有力的论据，并赞同它推荐的许多技术，但我们也认为在灵活的 CSS 和灵活的标记之间应该有一个平衡。

良好的语义和可重用的 CSS 之间的平衡对于一个高效的高流量网站来说是至关重要的，将所有的重担都转移到标记上并不理想。如果你的团队与设计团队是分开的，你可能会发现使用这种方法很难遵循隐含的过程。也就是说，有许多 OOCSS 的拥护者，您可能会发现它适合您的需求。

如果你有兴趣阅读更多关于 OOCSS 的内容，请前往[oocss.org/](http://oocss.org/)。

覆盖 CSS

CSS 的级联性质允许我们用更具体的样式表覆盖现有的样式表，而不必编辑原始的基本文件。出于各种原因，这可能是必要的，例如季节性的重新设计、每个不同的公司部门需要稍微不同的配色方案、存在从主网站借用的子网站，以及不遵循主样式表中包含的相同设计模式的特殊一次性页面，等等。这些情况必然发生在大的、高流量的网站。

通常，这意味着更具体的 CSS 规则将被放在一个单独的文件中，该文件要么与现有的样式表连接，放在特定页面的 head 元素中的样式标签中(导致关注点分离问题)，要么链接到主样式表之后的 HTML 文档，在某些地方覆盖它(尽管在最后一种情况下，您将添加一个代价高昂的 HTTP 请求，这会降低您的网站的性能)。

覆盖 CSS 作为主样式表的补充，通常是在设计中创建不同主题和变化的最有效方式。如果你的样式表是以一种模块化和灵活的方式构建的，它们会被其他更具体的规则所补充，而不需要增加代码的冗余。

然而，如果原因是重大的重新设计，应该避免创建覆盖主样式表的新样式表，因为 CSS 的很大一部分将由过于具体的规则组成，这些规则之所以具体，是因为有一个旧的、过时的样式表需要取消优先级。

当覆盖 CSS 文件时，您将处理的主要因素是特殊性。你希望能够利用已经存在的东西，但是在不需要重复的情况下增加它。为此，明智的做法是从头开始构建主样式表，首先专注于创建合理的默认值，这样就不必为相似的元素重复相同的声明。例如，假设大多数无序列表都应该有特定的样式。下面的 CSS 很难被覆盖(我们在最后的规则中覆盖它):

#homepage #highlights ul li {    list-style-type: disc;    margin: 0 0 1em; } #homepage #popular ul li {    list-style-type:disc;    margin: 0 0 1em; } #homepage #special ul li {    list-style: none;    margin: 0 0 1em;    background: url(star.gif) no-repeat left center;    padding-left: 24px; }

执行以下操作会更容易:

li {    margin: 0 0 1em; } #special li {    list-style: none;    background: url(star.gif) no-repeat left center;    padding-left: 24px; }

如果我们在重置中没有更改无序列表项的list-style-type值，现在我们将利用浏览器的默认设置，通常情况下，无序列表项的list-style-type值是disc。因此，我们没有将它添加到我们的 CSS 中，并且由于我们对所有列表使用相同的间距，除了一些例外，更简单的方法是将其添加为所有列表项的默认样式，然后根据需要覆盖它。

这种思考和计划将产生更小的样式表，更容易更新，也更容易被不熟悉代码的开发人员理解。

许多大型网站选择在页面正文中添加一个类或 ID，作为指示应该使用哪个模板的一种方式。这是一种简单而有效的技术，但您应该小心使用，因为它很容易阻止您重用代码(因为您将为每个模板沙箱化部分代码，所以您需要确保您为一个模板构建的内容不会对所有模板都有用)。如果走极端，当一个新的特殊模板或主题需要到位时，它也会使你走上重复和过于具体的规则的道路。

例如，如果您的样式表有多余的或过于具体的规则，当您想要为网站的某些元素添加圣诞边框时，您可能需要覆盖类似这样的内容:

#home .template-12 #main .col-1 .post img.thumbnail {    border: 1px dotted green; } … #europe .template-8 aside#secondary ol li img {    border: 1px dotted #333333; }

如果 idhome和europe被添加到html或body元素中，可能没有其他方法可以从嵌入的样式表中清除覆盖(让我们避免内联 CSS)。重写以下代码片段会容易得多:

`img { /* You should make an effort to make this initial style as generic as possible. Maybe
you would need a class or an ID before the element selector in your case */
   border: 1px dotted black;
}
…
.post img {
   border-color: green;
}
…
#secondary img {
   border-color: #333333;
}

… /* Christmas styles */
#christmas img,
#christmas #secondary img {
   border-color: red;
}`

在你的网站中，图像边框的工作方式可能会有重叠和模式，所以你所做的是将最常见的场景作为默认样式，只在需要时增加更多的细节。

如果采用 OOCSS 方法(本章前面提到过)，CSS 的模块化本质意味着引入级联的新文件和规则将倾向于补充现有的文件和规则，而不是覆盖它们。这基本上与我们到目前为止在本节中描述的非常相似，不同之处在于 OOCSS 技术较少利用级联，主要关注于类，避免 id 和类相互补充。在这种情况下，您的 CSS 可能看起来更像下面这样:

img {    border: 1px dotted black; } … .img-post{    border-color: green; } … .img-secondary {    border-color: #333333; } … /* Christmas styles */ #christmas img {    border-color: red; }

因为我们正在使用类，christmas ID 足够强大，可以覆盖任意数量的类。

在大型网站中，覆盖现有的 CSS 规则是不可避免的。这还不错；事情就是这样的。既然有可以作为基础的风格，为什么要从头开始呢？

我们在本书中所说和推荐的一切(如何避免冗余，争取模块化和更灵活的样式表，不要在没有必要的时候把事情复杂化，等等)应该给你很好的指导，如何避免使你的 CSS 变得不必要的复杂。

与第三方代码和谐相处

网站开发人员经常会发现自己合并了其他人编写的代码，而他们对这些代码没有控制权。这些代码可能是一个小部件、插件或其他形式的网站块，旨在直接放入您的页面。因为这段代码是为最小公分母场景设计的，所以作者希望它不管周围的代码如何都可以工作——这段代码通常比任何特定情况下的代码都要冗长。如果代码包含 JavaScript 和 CSS，那么经常会出现与网站中已有代码的重复。处理这种情况有两种主要方法:

  • Rewrite the CSS yourself, and opt to not include the third-party CSS.

    This solution gives developers the greatest control over the code provided to users. Although it looks attractive, this method is usually not an effective way of working. If the third-party code is updated in some way (it may be written into the page by external JavaScript), but CSS is not updated, there may be visual or functional problems in the website. Usually CSS will be included in other servers besides your own, which means that you must also use the overlay to modify the code on your site. You should also be aware that when a third party releases a newer and better code version, branching from the original code will make it difficult for you to upgrade easily. The practical method of is usually to accept the third-party code and build around it. If there are so many code problems that this is not an effective method, you should really question whether this third party is a good partner of your business, and look for alternatives or the possibility of writing your own equivalent code internally.

  • Build your CSS to minimize the likelihood of conflicts in your code; Thentest thoroughly.

    This is a more realistic method, although it needs to think ahead. If including third-party code is an unpredictable choice, then you are probably unprepared for this situation.

您可以做的第一件事是尝试将第三方代码从您的代码中分离出来。如果第三方代码被直接放入你的标记中，你应该找到它并弄清楚如何定位它的容器。如果它通过 JavaScript 添加元素，你可以在你的 web 开发工具中观察 DOM(见第十章)并记下容器的细节。如果没有容器，可以考虑自己添加。这将使你有能力定位和修复任何出现的问题。

您可以使用体贴的方法，如果有可能包含第三方代码的特定区域，您可以对它们应用基本的 CSS 重置，只针对那些块。避免使用!important(无论如何你都应该这样做)，在使用非常简单的元素选择器的地方，尽量不要命名它们，这样你就最不可能影响具有更高特异性的第三方代码。

您也可以使用可疑的方法，在这种方法中，您尝试使用更具体的选择器，以避免第三方的模糊选择器有机会影响您的页面。

我们推荐体贴的方法，尽管这并不适合每个人。如果你的外部代码写得如此糟糕，以至于影响到你的代码，期望(并要求)他们修复这个问题是合理的。如果您的场景要求您无论如何都要使用该代码，并且它很糟糕，那么您可以自己重写它或者进行彻底的测试，并根据需要为您的标记创建更具体的规则。

走极端的话，您可以包含另一个页面作为 iframe 来完全保护他们的代码不受您的影响。除了最戏剧性和不可避免的情况，我们不建议这样做。

相反，如果你写的代码要包含在别人的页面中，要考虑周全。您应该尽可能地对容器进行命名分隔(使用某种前缀，使您的代码明显地与其他代码分开)，以便您可以使用特定的选择器来选择它，然后将它用作应用于块内元素的任何选择器的前缀。不要只以元素名为目标。您可能需要使用命名空间和容器将您自己的重置应用到您的块。

防御性 CSS

当您认为您的代码容易被内部或外部开发人员破坏时，您希望确保采取所有可能的措施来防止这种情况发生。在大型网站和拥有不同实现和 web 团队的大型组织中尤其如此。防御性 CSS 是我们在本书中推荐和提供的技巧。在本节中，我们将概述它们。

可以做几件事来进行防御性编码。请记住，防御性的 CSS 不同于创建健壮的 CSS。健壮和高效的 CSS 是我们最终想要实现的，而防御性 CSS 是实现它的方法之一。例如，确保我们的 CSS 不完全依赖于选择器的顺序不一定是防御性的 CSS，但它是健壮样式表的一个特征。

确保你的样式表被正确地注释和记录，特别是在它们比较脆弱的地方——比如当你求助于黑客或笨拙的解决方案来解决一个别人可能不理解并想要解决的问题——是一种成为防御性 CSS 作者的方法。你应该陈述最初的问题，解释为什么你选择了那个特定的解决方案，提供一个记录解决方案的网站的链接(如果它存在的话)，并解释如果有人编辑了那段代码会发生什么(在我们的观察中，我们遇到了几个“如果你编辑了这段代码，一切都会变得混乱”类型的评论，但是我们推荐一些更具描述性的东西)。你可以在第二章中阅读更多关于评论的内容。

采取防御方法的另一种方式是声明对于特定的选择器不一定需要的属性，但是这将防止其他选择器覆盖它。当与命名空间结合使用时，效果尤其好。在下面的例子中，我们声明了一个命名空间规则来设计侧边栏小部件中的标题:

#sidebar #sb-widget h2 {    border: 1px solid #efefef;    font-weight: bold;    padding: 5px 10px; }

如果我们的样式表中有以下不太具体的规则，侧边栏小部件的font-color属性也会发生变化，因为在最初的示例中没有说明:

h2 {    color: #dd4814; }

为了防止这种情况发生，您可以将属性的初始值添加到更具体的规则中，以便它完全保持您想要的方式:

#sidebar #sb-widget h2 {    border: 1px solid #efefef;    font-weight: bold;    padding: 5px 10px; **   color: #1448dd;** } … h2 {    color: #dd4814; }

请记住，这将使这条规则更难覆盖，但这是一个缺点，每次您决定命名部分代码时都必须考虑到这一点。

正如本章前面提到的，OOCSS 是创建防御性 CSS 的另一种方式。重申一下，它的主要原则是父元素和子元素不应该相互依赖，无论它们在页面上的位置如何，看起来都是一样的，而且布局应该与皮肤分开。因此，如果有人对部分代码的工作方式进行了更改(例如，小部件中的标题)，这并不意味着子元素、父元素或周围的元素一定会被破坏。

防御性 CSS 的极端例子是命名空间(在第二章中有更详细的介绍)。当您命名代码的各个部分时，您要确保它不会影响代码的其他部分，也不会受其他部分的影响。通过增加它的特异性来隔离它，以便只针对您希望样式化的标记的确切部分。其他任何东西都不会受到影响，所以在这个过程中也不会损坏任何东西。但是，这并不意味着您应该将名称空间作为保护代码的灵丹妙药。它的缺点是代价太大:由于重复和极度缺乏可重用性，你会留下臃肿的代码。这不是在高性能网站上工作的团队应该做的事情。

在处理非开发人员通常使用的内容管理系统时，您必须采取防御性 CSS 方法的最常见场景之一是，从 Word 文档中复制和粘贴文本是经常发生的事情。在这些情况下，我们的建议是，你应该为内容编辑提供他们可以挂钩的类和 id，并给他们来自设计库的示例代码块(我们在第五章中更详细地提到了这一点),这样你就尽可能地为他们做了思考，他们也就有了他们可能需要的一切。

在他们的需求没有得到满足的地方，应该有一个反馈循环:一个让他们请求一个新的设计库元素的过程，他们自己所做的任何改变(在style属性、style标签中的内联 CSS，等等)必须被记录，并在元素准备好时被他们替换。请注意，我们永远不应该阻止内容发布者发布某些东西——大公司通常有时间紧迫的公告或变更要做——但我们应该始终为内容编辑提供一种方式，让他们以正确的方式做他们想做的事情，而不是让所有垃圾 CSS 堆积起来，或者(不切实际地)阻止他们做他们的工作。

当内容编辑不熟悉 CSS 时，巧妙的默认设置和确保所有可能的元素至少有一个基本的样式也有助于克服一些不可预知的情况。

你的团队内部需要一定程度的信任，你应该确保尽可能雇佣最好的开发人员。这对任何人来说都不是新闻，但这并不意味着你不应该试图防止错误的发生。这就是防御性 CSS 的意义所在。它是关于在你力所能及的范围内采取措施，以使错误最小化。

脆弱的 CSS

与健壮的 CSS (转化为可以被多人安全处理的灵活样式表)相反，脆弱的 CSS 是容易崩溃的 CSS。发生这种情况有多种原因。

脆弱 CSS 的一个常见情况是 CSS 选择器依赖于页面内容。考虑到我们的 CSS 是一个独立的美学层，这听起来不应该是一个问题——毕竟，无论内容是什么，CSS 都是用来设计内容样式的。然而，我们这样说的意思是，当构建动态网站时，内容不断变化，不一定(或很少)受代码创建者的控制，有时我们应该避免将 CSS 与页面上更可能发生变化的内容捆绑在一起，或者依赖于 DOM 元素的顺序，DOM 元素的顺序也可能发生变化。

比如说，假设你有一个书单；每本书都有标题和封面图片:

`


    CSS Mastery
   
by Andy Budd

   

Designing With Web Standards
   
by Jeffrey Zeldman

   

`

您希望将第一本书的图像定位在左侧，然后将第二本书的图像定位在右侧。您可以编写以下 CSS:

#books img[src="book-cssmastery.jpg"] {    float: left; } #books img[src="book-webstandards.jpg"] {    float: right; }

它会得到您想要的结果，但是如果图像的文件名被更改了会发生什么呢？或者你把这些书换成别的书？这是一个很好的例子，说明将 CSS 与页面内容捆绑得太紧会产生脆弱的 CSS。

这种情况下的另一个解决方案是使用一个nth-of-type选择器来定位特定的img元素:

#books img:nth-of-type(1) {    float: left; } #books img:nth-of-type(2) {    float: right; }

现在我们只针对第一个和第二个图像。这是一个比第一个更健壮的解决方案，但是仍然有些脆弱:CSS 现在依赖于内容的顺序和列表中书籍的数量。

更直接的解决方案是给每个img元素添加一个类，如下所示:

`


    CSS Mastery
   
by Andy Budd

   

    Designing With Web Standards
   
by Jeffrey Zeldman

   

`

现在我们可以只使用 CSS 中的类，这就简单多了:

#books img.odd {    float: left; } #books img.even {    float: right; }

这种解决方案使得在其他地方重用这些类或者甚至向收藏中添加更多的书变得更加容易。在这种特殊情况下，我们也可以以不同的方式使用nth-of-type选择器:

#books img:nth-of-type(odd) {    float: left; } #books img:nth-of-type(even) {    float: right; }

现在，我们不只是设计第一个和第二个实例的样式，而是定义一个可以随着列表的增长而伸缩的样式，它不依赖于任何数量的项目或任何文件名。这种技术有一个缺点:旧的浏览器不理解这个 CSS3 选择器。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **注意:**这是一个你的团队应该清楚的问题:你应该定义旧浏览器对更高级的 CSS 选择器的不支持是否意味着它们被搁置，呈现差异被接受，或者是否应该有某种 JavaScript 回退来复制这种效果。

另外值得一提的是，CSS3 选择器的解析要比简单的选择器复杂得多，因此会对性能造成更大的影响。尽管 CSS 性能很少会成为你的网站的瓶颈，除非必要，否则最好避免它们。

通过不把我们自己和内容捆绑在一起，抽象出这一点 CSS，我们可以更深入到我们在样式表中不断寻找的东西，并创建一个可以在整个页面中重复使用的设计模式。在这种情况下，这将是一个列表，其中的项目显示交替的样式。如果不使用 ID 选择器来定义这个列表，我们可以创建一个具有更方便的名称(允许重复)的类，该类可以在一个页面和网站中多次使用(如果我们保留了“books”的 ID，并且我们需要对一个名为“boardGames”的列表进行样式化，该名称将不再具有语义):

HTML:

`


    CSS Mastery
   
by Andy Budd

   

Designing With Web Standards
   
by Jeffrey Zeldman

   

`

CSS:

.alt img:nth-of-type(odd) {    float: left; } .alt img:nth-of-type(even) {    float: right; }

继续我们最初的例子，但是现在说明另一种非脆弱 CSS 的情况，而不是依赖于文件的全名，我们可以创建 CSS 来寻找文件名的特定部分并相应地对其进行样式化。例如，您可能希望用一个小图标来设计 PDF 和文本文档的所有链接，向用户表明他们应该从该链接中得到什么。让我们使用上面示例标记的修改版本:

`


    CSS Mastery
   
by Andy Budd

   
Download a sample of the book

Designing With Web Standards
   
by Jeffrey Zeldman

   
Download a sample of the book

`

使用属性选择器，您现在可以将链接作为目标，这些链接的href属性值以特定的字符序列结束($)，如下所示:

a[href$=".pdf"] {    padding-left: 20px;    background: url(pdf-icon.gif) no-repeat left center; } a[href$=".doc"], a[href$=".txt"] {    padding-left: 20px;    background: url(txt-icon.gif) no-repeat left center; }

请再次记住，这些更高级的选择器不会被旧的浏览器所理解。

正如您在前面的示例中看到的，脆弱的 CSS 有不同的级别。然而，脆弱的 CSS 并不仅仅指与标记联系不紧密的 CSS。这也意味着 CSS 会在自身内部分裂，例如，稍后添加的选择器会覆盖原来的选择器，因为它们在文件的后面或更具体。忽略特定性和顺序，并不断添加选择器来覆盖前面的选择器，因为它们来得更晚，更特定，这是做 CSS 的简单方法，不考虑(或不了解)级联是如何工作的。每次需要更新和调试代码时，它都会增加一层复杂性，并且如果开发人员在未来对选择器的顺序进行任何更改，或者只是不熟悉他所继承的纸牌房子，代码很容易被破坏。

这个问题的解决方案不应该是用沙箱保护所有东西，这样当编辑发生时就不会破坏。这会给高流量网站造成另一个有害影响:冗余。所以解决方案是多方面的。正如我们在整本书中所建议的，规划你的样式表以便代码可以被有效地重用，为你将需要的所有元素定义坚实的基础样式，确保有处理遗留元素的指导方针，有一个定义良好的可重用组件的设计库，并且只在必要时添加 id 和类(在 DOM 可能改变的地方，使用它们)。

脆弱的 CSS 往往是复杂的 CSS(虽然不总是)。有经验和知识丰富的 CSS 作者的一个常见行为是编写过于复杂的选择器，以便在不需要接触原始标记的情况下定位元素，而添加简单的类或 ID 实际上会提供更简单、优雅和更有效的解决方案。

类和 id 正是为了这个目的而存在的——这样我们就可以很容易地找到元素——它们就是为了被使用而存在的。作为最简单的选择器，它们也是最快的(特别是 IDs)，当在语义上使用时，它们给出了我们的标记上下文和意图。当有他们的位置时，你不应该害怕使用他们。不要试图太聪明，首先考虑最简单的解决方案是否不是最好的解决方案，避免给代码增加不必要的复杂程度，这会使代码效率更低，更脆弱。

CSS 中的元数据

元数据可以被描述为关于数据的数据。HTML 中的meta标签就是很好的例子，它提供了关于文档的额外信息，比如作者、描述、页面语言等等。虽然注释只是为了开发人员的利益，但是元数据可以被 JavaScript 或搜索引擎解析和使用。标签与它们提供的数据类型无关，因为数据的名称和内容存储在结构本身中，如下所示:

<meta name="author" content="Anna Sasin" />

因为你可以有多个meta标签，所以理论上可以包含无限量的信息。

虽然 HTML 为页面中的所有内容提供了包装，并且我们的类和 id(希望)告诉我们一些关于它们所针对的元素的角色，但是 HTML 文档类型定义(DTD)只定义了有限数量的标记和属性。在我们有静态内容的地方，这总是足够的信息来传达我们想要的一切。然而，当我们使用 JavaScript 在页面中移动东西或修改文档对象模型(DOM)时，通常没有足够的信息来实现我们需要的东西。

例如，也许我们有一个表单，其中的字段需要采用特定的格式。它可能是一个订单参考代码，我们知道它总是有三个字母字符和三个数字字符。虽然我们可以使用 HTML5 或其他方法来验证这个字段，但是我们决定(为了举例)在这个实例中我们要使用 JavaScript 来验证这个字段:

<input type="text" id="orderReference" />

对于这种结构，我们不知道如何验证该字段。我们需要在 JavaScript 中找到这个字段，并根据它的 ID(或类)决定它应该是什么格式。我们需要的是向 HTML 元素本身添加元数据的能力。有几种方法可以实现这一点。首先，我们可以向该字段添加一个自定义属性:

<input type="text" id="orderReference" datatype="orderReference" />

然而，这立即使我们的 HTML 无效，因为datatype不是input标签的有效属性。我们可以使用类来保存这些信息:

<input type="text" id="orderReference" class="dataTypeOrderReference" />

这仅仅给了我们布尔值(true如果类存在，或者false如果类不存在)，如果我们想要更复杂的值，它们将很难表示。??

JavaScript 有一种存储信息的方法，称为 JavaScript Object Notation (JSON ),这使得以简洁和通用的方式呈现大量信息变得非常容易。对于本例，它看起来像这样:

{dataType:'orderCode'}

如果我们将这些信息放在类中，我们的 HTML 仍然会验证，我们有能力表示复杂的数据，除非我们在 CSS 中定义了非常模糊的命名类，否则永远不会有任何冲突:

<input type="text" id="orderCode" class="{dataType:'orderCode'}" />

虽然感觉语义上不正确，但这种技术的好处大于坏处。

您也可以自己为 HTML 创建一个定制的 DTD，或者在 XHTML 中使用一个特定的名称空间，但是这两个选项都不适合胆小的人，也不能保证文档是有效的。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **提示:**如果你使用 HTML5 作为你的 doctype，你有一个数据属性形式的解决方案。通过在属性前添加数据，我们可以表示任意多的额外字段，如下所示:

<input type="text" id="orderCode" data-datatype="orderCode" data-errortext="Please enter a valid order code." />

但是，这种方法认为所有值都是字符串(字符组),因此很难表示其他数据类型，如数字或布尔值。

我们可能遇到的另一个问题是我们想要显示的错误。我们可以将它包含在 HTML 中，并使用 CSS 来隐藏它:

`

`

由于某种原因禁用 CSS 的任何人，或者使用不支持 CSS 的设备(纯文本浏览器，如 Lynx ( [lynx.browser.org](http://lynx.browser.org))、旧浏览器、一些屏幕阅读器、搜索引擎蜘蛛等)的任何人，仍然会看到这些文本。在我们想要显示它之前，它不应该真正存在于我们的 HTML 中。但是，如果我们在 JSON 结构中包含这些信息，JavaScript 就有了显示错误所需的一切:

<input type="text" id="orderCode" class="{dataType:'orderCode',errorText:'Please enter a valid order code.'}" />

这是一个强大的、真正可扩展的方法，可以在不使代码失效的情况下向标签添加额外的信息，尽管它会产生一个 JavaScript 依赖，并且您仍然应该使用服务器端验证。

流行的 jQuery 库有一个插件，使得在[plugins.jquery.com/project/metadata](http://plugins.jquery.com/project/metadata)获取数据变得更加容易。语法很简单。一旦包含了 jQuery 库和元数据插件，以及前面的 HTML 代码片段，该代码将创建一个警告对话框，显示文本“请输入有效的订单代码”:

alert($("orderCode").metadata().errorText);

你可以在第六章中了解更多实现相同目标的方法。您也可以编写自己的解析器来获取这些值。如果用户禁用了 JavaScript，我们可以优雅地降级并在服务器端处理错误，重新加载带有可见错误消息的页面。

总结

在这一章中，我们研究了现有的框架是如何工作的，我们能从它们身上学到什么，以及它们失败的地方。拥有一个合适的框架所提供的灵活性和效率对于任何一个在高流量网站上工作的团队来说都是无价的，不应该被低估。

除了框架之外，你还可以实现其他原则和编码实践，这不仅意味着你的代码不容易出错，也不容易被内部或外部开发人员或代码破坏。

精心编写的 CSS 可以简洁，但也可以健壮且适应性强。因为它不会永远被隔离，所以您应该计划好它会与其他代码、其他开发人员甚至它自己交互的事实。

在下一章，我们将看看品牌指南的重要性以及如何运用它们。

五、品牌实现

每个人都知道，在网上，我们的竞争对手只需点击一下鼠标。普通用户的注意力持续时间变得越来越短。很容易得出这样的结论:即使你网站的典型用户可能参与度稍高，你也应该确保网站有影响力，品牌体验被正确地转化到网络上。

品牌总是会影响网站的处理方式:它是如何设计的，它使用的语气——基本上，它如何通过在线媒体传达品牌信息。确保正确完成这一任务往往是营销和设计团队的能力。

尽管网页设计和开发团队通常不直接参与品牌建设，但他们面临着在网上实现品牌的挑战。他们还经常面临这样的挑战:让营销团队知道什么是网上可以做的，什么是不可以做的，为什么会有一些惯例(以及什么时候应该和不应该打破这些惯例)，以及为什么网络应该被视为一种有机地不同于印刷的东西，而不是一种仅仅遵循印刷视觉识别指南应该做的事情的媒介。

由于本书的主题是 CSS，我们将主要讨论品牌实现的美学方面。诸如品牌文化、处理客户反馈、处理表单和错误信息，或者发展和保持正确的语气等领域都不属于 CSS 领域(但我们希望您正在考虑)。

这一章没有详细介绍如何开发一个视觉品牌。相反，它假设已经存在一个品牌，并且品牌指导方针已经到位。它侧重于如何克服一些困难，以有效的方式实现这些准则。它涵盖了

  • 什么是品牌
  • 使用品牌风格指南和设计库
  • 处理网络上的排版
  • 处理色彩的有效方法
  • 保持布局一致
  • 处理主题变化
  • 品牌演变

Ron Kohavi 和 Roger Longbotham 在 2007 年发表的一篇名为“在线实验:经验教训”的文章中指出，在 Amazon.com，页面加载时间每增加 10 毫秒就会导致销售额下降 1%，而谷歌搜索结果显示时间每增加 500 毫秒就会导致收入下降 20%。

什么是品牌？

品牌通常被认为是公司、产品或服务最重要的资产——这是它区别于竞争对手的地方。但是我们不应该把品牌和仅仅用来识别它的标志混为一谈。品牌可以包含如下属性:

  • 名称、徽标、标语
  • 颜色、排版、图像
  • 语音语调
  • 价值观和使命
  • 客户和反馈处理
  • 店内体验
  • 等等。

基本上，它包括与公司(无论是产品、服务还是组织)被感知的方式相关的一切；它传达给外部世界和内部员工的信息。

品牌有多种类型，但主要分为以下三类:

  • 伞式品牌:这些品牌用于组织内的各种产品和服务，在内部和外部都有使用。例如，Amazon 是 Amazon Marketplace、Amazon MP3、Amazon S3、Amazon Mechanical Turk 等的总品牌。
  • 子品牌:这些品牌虽然是单独推广的，但都与一个伞品牌相关联，以便继承和建立伞品牌的声誉。例如，奇巧、Aero 和 Smarties 是雀巢的子品牌。
  • 单个品牌:这些品牌与它们的伞式品牌完全分开销售。例如，Schweppes、Sprite 和 Dr Pepper 等个别品牌都是由可口可乐制造的，但它们在营销时却没有提到它们的保护伞品牌。

熟悉这些术语(属于品牌架构的范畴)是一个好主意，因为当处理企业品牌时，这个组织经常反映子网站和小型网站将如何设计和开发，以及品牌将如何在它们之间实现。

品牌风格指南

有不同类型的品牌风格指南。有些只涉及品牌的视觉方面，如标志的使用、字体、颜色等。，而其他人则更深入地探讨品牌文化，谈论价值观、工作流程或如何在不同情况下处理客户关系等各种不同的主题。

风格指南通常是在考虑到印刷媒体的情况下开发的。这种情况大多发生在指南不是最近开发的时候，尽管令人震惊的是，现在生产的一些指南仍然不能提供如何在线处理品牌的参考。

当风格指南不能满足网络需求时，营销团队和经理会试图执行为平面媒体制定的规则。这导致了各种各样的问题。

最好的例子之一就是试图让网站页面表现得和纸质页面一模一样。为打印而设计的页面是静态的，打印后不会改变，而在线页面可能会受到内容团队或用户应用的各种更改的影响。长文章会影响页面的高度，更小或更大的屏幕尺寸会引入(或消除)滚动的需要，就像用户样式表可以使文本变大或变小一样，也会影响页面布局和流动。更不用说浏览器呈现字体的方式不同，演示的抗锯齿行为也不同。没有办法确定你的用户会看到你想要他们看到的东西。

这并不意味着在设计和编码在线页面时没有一定程度的控制，但这些只是几个例子，说明专门为印刷格式创建的视觉指南将如何使不直接与网络打交道(或至少不是日常工作)的部门更难理解如何以有机和集成的方式使品牌适应网络。

除了在组织中有一个人的工作是验证品牌的一致性(这个角色通常被认为是品牌经理)，所有员工都接受关于品牌应该传达什么的教育是有益的。这不应该仅仅局限于面向客户的角色和营销部门，因为组织中其他领域的人也面临着做出影响品牌认知度的日常决策。

例如，如果一个网站不能适应字体大小的变化，对于有视觉障碍的用户来说，整个体验就会被破坏，他们需要使用更大的字体。或者，如果一个新的页面需要添加到网站上，而它的设计不能恰当地代表品牌，访问者可能会觉得他或她不在同一个网站上，并被迫离开或失去对该网站的信任和好感。

开发者可能并不总是乐于处理影响品牌一致性的设计问题。通常，前端开发人员和 web 设计人员是团队中的不同成员(或者是完全独立的团队——有时甚至不在同一个建筑或国家),有时前端开发人员不得不做出他们可能不适应的设计决策。在这种情况下，灵活且适应性强的品牌指南应该到位，确保网站的一致性，并确保品牌不会因为越来越多的人摆弄样式表或添加新元素而被稀释。

一份全面的网络品牌指南文件应包括以下内容:

  • 关于底层网格、其变体以及如何使用它的信息
  • 排版信息:首选字体、后退和缩放信息
  • 调色板(翻译成十六进制或 RGBA 等 Web 格式)以及应该如何使用它们
  • web 友好单位的度量，如像素、ems 或百分比
  • 通用和可重用元素的规范，比如导航、按钮、小部件、表单、通知等等。

在本文档中提及在不同的浏览器中什么是可以接受的，什么是不可以接受的也是有用的。例如，它可能会指出，无论是否采用 PNG 或其他格式，公司的徽标和主要行动号召必须始终保持一致，以便采取必要的措施来确保这一点。

即使是最彻底的品牌风格指南也不能预见一切。开发者在某些阶段做出设计决策是不可避免的。虽然前端开发人员通常不需要有设计背景，但了解设计如何工作的基本原则将使设计决策落入他们手中的时刻变得更加容易和清晰。对于勤奋的读者，我们推荐马克·博尔顿的网站设计实用指南 ( [fivesimplesteps.com/books/practical-guide-designing-for-the-web](http://fivesimplesteps.com/books/practical-guide-designing-for-the-web))，这是五个简单步骤系列的一部分。这本书非常适合那些没有设计背景，想要实际例子和对基础知识有很好理解的人。

指导方针不断发展

因为大型网站处于不断的变化和扩展中，所以引入新元素、设计新部件、为新部分创建新调色板等等并不罕见。随着设计的发展和成长，指南应该跟随它的脚步。品牌风格指南的主要目的首先是确保一致性；通过将越来越多的不同元素添加到设计人员和开发人员可以参考的中心参考中。为了确保他们没有重复别人已经定义的东西，指南需要保持更新。

如果在一个主要网站中实现了创建第三级导航的新标准，当下一个网站应用它时，它应该被用作参考。保持文档更新的方式可能比实际提出更多模式更复杂。尽管内部 wiki 通常是最简单的设置(特别是对于熟悉使用 wiki 的技术人员来说)，但设计和营销团队可能不习惯管理它们。

无论为此目的使用何种技术，最重要的是确保定期更新指南(可能是每周、每月或更少的频率，取决于新指南产生的速度)并将其存储在每个相关人员都可以轻松访问的中心位置；每个人使用一个系统的好处是巨大的。同样重要的是，有人(或团队)负责并监督这个存储库，这样就不会有重复，也不会有与现有元素的差异难以察觉的新元素——如果设计的每个新元素都产生一个新标准，那么就不会有标准。

设计库

对于大型网站，将新标准添加到指南中的过程很可能(也应该)导致设计库的创建，其中所有的模式都存储为片段(图像、HTML 和 CSS)。但是，向库中添加新的模式并不容易——正如前面提到的，大多数时候重用现有的元素比向库中添加新的设计更明智。如果有人觉得有必要这样做，他们应该证明这一点，并确保到目前为止所创建的东西都不符合要求。这意味着品牌和设计有视觉控制，一切保持一致。这也意味着 CSS 不会失控，这使得每个人的生活更容易:更少的代码行，更少的冗余，更大的灵活性，更容易维护。然而，这也意味着引入到库中的元素需要足够灵活，以便可以注入到网站中的各种位置并按预期工作。

想象一下，在你的网站中你使用三种不同风格的列表框:简单框、双框和选项卡式框(见图 5-1 )。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 5-1。*设计库中有三个不同的列表框:所有设计都是一致的，但它们有不同的用途。

这个设计很明显遵循了一个基本的模板，但是根据我们需要这个盒子有多突出或者它所容纳的内容类型，有三种不同的变化。对于这些框中的每一个，我们都提供了 HTML，因此不同的内容或开发团队可以使用相同的代码(这甚至可以作为模板文件或可以包含的文件提供，以便在一个地方更改标记会在所有地方更改它)。这里的目标是使 HTML 在框之间尽可能地相似(例如，很明显，简单框和选项卡式框中的标题需要不同的标记，但是双框不需要额外的元素作为内部背景色，您可以使用容器中的列表)。

这些框的 HTML 看起来像这样:

< div class="box">    < h2> Heading< /h2>    < ol>       < li>          < p class="content"> Lorem ipsum…< /p>          < p class="info"> 13 January 2011< /p>       < /li>       < li>          < p class="content"> Curabitur…< /p>          < p class="info"> 28 December 2010< /p>       < /li>    < /ol> < /div>

要在盒子的风格之间切换，我们只需向盒子容器添加另一个类。 2

不需要提供这个 HTML 片段的 CSS，因为我们可以确定它已经存在于网站的 CSS 中，但是图像示例应该显示这些框如何处理不同类型的内容，以及它们在页面中不同位置的行为。提供 Photoshop、Illustrator 或其他分层图稿文件也很有用，设计师可以在设计中复制并粘贴这些文件。这可以节省创建新设计的工作量，并确保它们之间的一致性。

对于选项卡式的盒子，我们将在盒子容器中添加一个类(例如“tab”)，并为每个选项卡重复这个过程，用一个类(例如“tab”)将所有的 div 包装在一个容器中，然后使用 JavaScript 重写 DOM。这样，对于禁用了 JavaScript 的用户来说，我们的代码仍然具有语义意义。

很明显，拥有一个针对这种情况的设计库将节省大量时间，这些时间将被浪费在一些任务上，例如浏览网站的现有页面，试图找到类似于我们需要的盒子类型的东西，要求设计师提出已经到位但不容易发现的解决方案(导致许多设计相似，但不完全相同)， 或者在数百行 CSS 中复制和改编一些与现有的其他六种解决方案只有细微差别的内容，增加了冗余，降低了灵活性。

这些原则与面向对象的 CSS (OOCSS)所提倡的非常一致:通过可重用的类来实现灵活的 CSS，避免冗余并减小文件大小。这是一种模块化的 CSS 方法，其中每个模块可以放在标记中的任何位置，并且它将正确地工作，使自己适应它的位置，而不依赖于某些父或子来获得它的特征。你可以在第四章中阅读更多关于 OOCSS 的内容。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 提示: 模块化网页设计，作者 Nathan A. Curtis ( [www.amazon.com/Modular-Web-Design-Components-Documentation/dp/0321601351](http://www.amazon.com/Modular-Web-Design-Components-Documentation/dp/0321601351))在创作自己的设计库时是一个很好的资源。

排版

品牌指南应该为 CSS 作者提供在网站上保持一致排版的基础知识。除了显而易见的类型选择，他们应该陈述细节，如font-size和line-height、font-weight、边距和填充以及颜色。

在不进入设计领域的情况下，标题、正文、列表、引用等等有一个清晰的层次结构是很重要的，品牌指南的创建应该牢记这一点。

在网上使用字体是有法律含义的。字体是授权的，不是买的，每个字体代工厂都有自己的规则。您拥有的许可类型决定了您可以在哪里使用它们。以 Adobe 为例，说明了 OpenType 字体在文档中嵌入时可以有四种不同的权限设置类别:

  • 不嵌入:这些字体在任何情况下都不能分享给未经授权的用户。这是最严格的许可形式。
  • 预览&打印:这种许可方案的字体可以以只读方式嵌入电子文档中，例如 PDF 文件。
  • 可编辑:以这种方式授权的字体可以嵌入到电子文档中进行查看、打印或编辑；任何更改都可以保存在初始文档中。字体不能从文档中导出，也不能安装在(未经许可的)最终用户的计算机上。
  • 可安装:这些字体可以永久免费安装在用户的电脑上。

由于在网络上使用字体文件需要通过用户的本地缓存将它们(临时)安装在用户的计算机上，因此可安装类型的许可是唯一一种 100%安全使用的许可。这使得许多字体无法以这种方式使用。一些字体代工厂提供这种字体，但是在一个大型组织中，使用的字体很可能是授权给该组织的，因此不适合以这种方式分发。

Adobe 在[www.adobe.com/type/browser/info/embedding.html](http://www.adobe.com/type/browser/info/embedding.html)提供了关于其许可的更多细节，并在[www.adobe.com/type/browser/legal/embeddingeula.html](http://www.adobe.com/type/browser/legal/embeddingeula.html)提供了其字体和许可细节的列表。如果授权您的字体的字体制造商在其网站上没有类似的列表，那么联系他们以了解他们施加的许可限制是很重要的。如果您在没有正确许可的情况下分发字体，您的公司将承担责任。

然而，在网页中嵌入字体的替代方法可以使用预览&打印许可，只要只使用可用字符的子集。这就是 sIFR(可伸缩因曼闪存替换)如何合法地在网页上显示这些图像。只要一种字体的整个字符集不可用，以这种方式许可的字体就可以显示在网页上。

图像替换与灵活性

在可能需要国际化并不断更新和添加内容的大型网站上，避免使用图像作为使用自定义字体的手段是至关重要的——今天，仅使用 CSS 就可以实现很多功能(我们不仅指 CSS3，也指 CSS2.1)。除此之外(特别是对于链接)，搜索引擎认为文本比alt属性更有价值。

虽然像徽标、横幅或主标题这样的重要元素可能会受益于您的组织所使用的自定义公司字体，但在按钮、导航或普通标题上使用图像时，您可能需要三思。

然而，这并不意味着使用非典型网页安全字体(例如 Arial 或 Verdana)是不可能的。随着font-face及其带来的 web 服务的出现(下一节将进一步解释)，为各种平台的用户提供定制字体是一项越来越简单的任务。

替换图像的老方法是用背景图像和高负值text-indent来实现的，以隐藏屏幕外的原始文本。例如:

h2 {    background: url(heading.png) no-repeat;    text-indent: -1000px;    height: 30px; }

使用这种方法有一些缺点:启用 CSS 但禁用图像的用户既看不到文本，也看不到背景图像替换(在图像是透明 PNG 的情况下，将文本留在图像后面不是一个选项)，图像文件降低了页面的速度，文本不可选择或缩放，并且不容易维护。

这种技术的一些变体包括，例如，在文本周围添加一个额外的元素，然后使用display: none(或visibility: hidden)通过 CSS 隐藏它。没有一种技术是完美的；每一个都显示了一个或多个问题的组合，如 CSS on/images off 场景，使文本对屏幕阅读器不可见或需要多余的 HTML 元素。

图像替换领域的另一个玩家是 Adobe 的 Scene7。它通常被大型组织用作自动创建带有自定义文本的标题或图像的方式。

提供自定义字体的其他选项通常被削减为库芬或 sIFR。

Cufón 依靠 JavaScript 工作，即使它允许选择文本，也没有清晰的视觉指示；sIFR 依赖 Flash 工作，这使得它不适合 iPhone 或 iPad 等设备，或者使用 Flash 阻止插件的浏览器。这两种技术也允许 CSS 作者嵌入字体，这些字体的发行许可证不允许它们在线使用。

Cufón 使用 HTML5 canvas标签(或 Internet Explorer 中的 VML)。与 sIFR 相比，它的一个主要优势是其更简单的实现和字体转换过程(你可以直接在项目的网站上完成:[cufon.shoqolate.com/generate/](http://cufon.shoqolate.com/generate/))。将字体上传到生成器并指定所需的字符(这将减少字符集)后，您需要做的就是链接到 Cufón 脚本和包含字体轮廓的生成的 JavaScript 文件:

< script src="cufon-yui.js"> < /script> < script src="LillyRegular.js"> < /script>

然后，您需要为想要使用 Cufón 的文本调用 JavaScript 函数。例如:

< script>         Cufon.replace('h1'); < /script>

您还可以将生成的字体 JavaScript 表示锁定到特定的域，这样第三方就不能轻易下载和使用它。生成器中有一个选项可以做到这一点。

这两种方法都是可访问的，因为它们可以被屏幕阅读器读取(这使得它同时也是 SEO 友好的)。然而，Cufón 将每个单词包装在一个span中，这可能会导致一些屏幕阅读器将每个单词当作一个完整的句子来朗读，或者更糟糕的是，在每个实例中只朗读第一个单词。3

不幸的是，当用户在浏览器中改变字体大小时，Cufón 不会调整生成文本的大小；从版本 3 开始，sIFR 已经能够处理这个问题。

sIFR 最大的缺点是它使用 Flash(在 JavaScript 之上):如前所述，Flash 在一些设备上被阻止或不可用，所以用它们浏览你的网站的人会看到你的字体堆栈中的下一个可用字体。此外，您团队中的 CSS 作者可能不一定手头有创作 Flash 文件的工具来创建新文本(即使有插件可以使这一过程自动化，如 jQuery sIFR 插件)。这两种方法在执行时都会引入非样式文本(FOUT)的闪现。我们将在本章后面描述这个问题。

可缩放矢量图形(SVG)也可以嵌入字体，并且是可缩放的(与常规图像不同)。 4

所有这些方法都可以被认为是字体嵌入，但其合法性因字体而异。如果对您要使用的字体的最终用户许可协议(EULA)不清楚，我们强烈建议您直接联系字体制造商，查看您可以对该字体做什么。从法律上来说，sIFR 是比库芬更安全的选择，因为 Adobe Flash 被允许嵌入字体，许多字体代工厂在其 EULAs 中迎合了这种情况。Cufón 在网站上嵌入字体，这违反了许多字体 EULAs。

互联网浏览器 6 支持库芬和 sIFR。即使你可以自动化这两种技术的工作方式，它们也总是会消耗资源并增加你的网站的依赖性。像font-face(在下一节中提到)这样更干净的方法应该首先被认为是理想的解决方案。除了小部分文本(如标题)之外，不建议使用图像替换。

3 如果您将“单独”选项设置为“无”,这个问题会得到缓解。然而，Cufón 这样做的原因是它可以将文本换行到下一行。解决第一个问题会重新引入第二个问题。

4 我们不推荐使用 SVG 作为文本替换技术，因为早于 9 的 Internet Explorer 版本不支持它。你可以用 SVGWeb ( [code.google.com/p/svgweb/](http://code.google.com/p/svgweb/))来伪造，但那用的是 Flash，所以你还不如用 sIFR。

在创建网络品牌指南时，将这些因素考虑进去是很重要的。如果这些困难还没有得到解决，网站需要依靠图片替换非网页安全字体，也许现在是更新指南的时候了。

字体面

@font-face 规则是在 CSS3 中引入的，它允许 CSS 作者链接到他们可以在样式表中引用的字体。Internet Explorer 是第一个从版本 4 开始支持这一规则的浏览器(但是只支持其专有格式 EOT)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 注: 嵌入式 OpenType (EOT) 是微软为在网页上嵌入字体而创建的专有字体格式。众所周知，将字体转换成 EOT 格式的过程是痛苦的，微软的 Web 嵌入字体工具(WEFT)被大多数网页设计师普遍描述为离折磨不远。幸运的是，现在有其他工具可以实现类似的结果，比如 Font Squirrel 的@font-face Kit Generator(本章后面会提到)。

在撰写本文时，Internet Explorer 平台预览显示支持 WOFF 5 格式。

在@ font-face规则中，各种描述符可以提供像名称这样的信息，这些信息将在文件的后面用于引用字体(font-family；但是要注意 IE 不支持超过 31 个字符的名称)、字体文件所在的位置及其格式(src)或者字体的样式和粗细(font-style和font-weight)。以下是一个@ font-face规则的例子:

@font-face {    font-family: "Lilly";    src: url("fonts/lilly.eot");    src: local("LillyRegular"), url("fonts/lilly.woff") format ("woff"), url("fonts/lilly.ttf") format("truetype"), url(" fonts/lilly.svg#LillyRegular") format("svg"); } @font-face {    font-family: "LillyItalic";    src: url("fonts/lilly-italic.eot");    src: local("LillyItalic"), url("fonts/lilly-italic.woff") format ("woff"), url("fonts/lilly-italic.ttf") format("truetype"), url("fonts/lilly-italic.svg#LillyItalic") format("svg"); }

WOFF 字体格式是由 Mozilla 基金会与字体设计师埃里克·范·布洛克兰和塔尔·乐铭共同开发的，并且正在成为 W3C 的标准推荐(在由微软、Mozilla 和 Opera 提交之后)。开发 WOFF 时就考虑到了网络。它是一种压缩字体格式，基本上是将字体数据重新打包；TrueType 或 OpenType 等其他格式可以转换为 WOFF，字体许可信息等元数据可以附加到文件中。许多字体代工厂支持 WOFF，因为他们认为它更安全，所以很可能越来越多的商业字体将通过 WOFF 的 font-face 获得使用许可。

@ font-face 规则链接到五个不同的文件位置，因为不同的浏览器支持不同的字体文件格式。“本地”引用是为样式表提供使用本地版本字体的能力，如果它安装在用户系统中的话。还要注意，我们需要声明两个不同的@font-face 规则，以便拥有同一字体的常规和斜体版本。我们本可以使用font-style描述符来声明斜体变体，保持相同的font-family名称，但是 Internet Explorer 和 Opera(10.5 版本之前)将无法正确理解它。

Internet Explorer 在理解一些@font-face 规则语法方面有一些问题。它不理解format()提示或多个位置，并且它试图下载非 EOT 文件，即使它不能读取它们。这就是为什么我们在一个单独的声明中链接到 EOT 格式(后跟一个local() src描述符，它不解析这个描述符)。

添加本地字体名称时，请务必注明 Postscript 版本(如果与全名不同)，以便 OS X 上的 Safari 能够理解。

另一个需要考虑的重要因素是，在 Firefox (Gecko)中，字体文件必须与使用它们的页面来自同一个域。这可以通过允许跨站点 HTTP 请求的 HTTP 访问控制来规避。 6

Firefox 支持 TrueType 和 OpenType 格式(从 3.5 开始)，而 3.6 版本增加了对 WOFF 的支持；WebKit(525 版起)和 Opera(10.0 版起)支持 TrueType 和 OpenType，以及 SVG 字体；Opera 11 及以上支持 WOFF；Chrome 从版本 5 开始也支持 WOFF；Internet Explorer 从版本 4 开始就支持@font-face 规则，尽管它只接受 EOT 字体。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 提示: Font Squirrel 提供了一个自动化的“@font-face Kit Generator”，可以更容易地将字体文件转换成不同的格式([www.fontsquirrel.com/fontface/generator](http://www.fontsquirrel.com/fontface/generator))。

字体权限和在系统中安装字体管理器存在一个已知问题，当@font-face 规则尝试使用本地字体时，这可能会导致出现意外字符。为了避免这个问题，Paul Irish 提出了一个修改后的规则，让浏览器忽略local()引用，强制下载链接的字体:

@font-face {    font-family: "Lilly";    src: url("fonts/lilly.eot");    src: local("☺"), url("fonts/lilly.woff ") format ("woff"), url("fonts/lilly.ttf") format("truetype"), url("fonts/lilly.svg#LillyRegular") format("svg"); }

通过使用一个不太可能用作真正字体名称的字符，这种语法避免了用户在计算机上安装 FontExplorer X 等软件时可能出现的任何问题，但可能会强制进行不必要的下载。

6 在[openfontlibrary.org/wiki/Web_Font_linking_and_Cross-Origin_Resource_Sharing](http://openfontlibrary.org/wiki/Web_Font_linking_and_Cross-Origin_Resource_Sharing).阅读更多信息

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **注意:**每个浏览器都有自己的问题列表，在使用 font-face 时需要绕过。Paul Irish 在两个帖子中记录了其中的一些，这两个帖子经常更新，并且在[paulirish.com/2009/bulletproof-font-face-implementation-syntax/](http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/)和[paulirish.com/2010/font-face-gotchas/](http://paulirish.com/2010/font-face-gotchas/)有几个开发人员的贡献。

虽然font-face允许在设计网站时有很大的灵活性，但在使用任何字体之前都需要考虑字体许可。还应该考虑带宽问题，因为字体文件往往很大，尽管这可以通过使用精简字符集和 gzip 字体文件来解决(WOFF 除外，它已经是一种压缩格式)，以及字体非常可缓存的事实。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **注意:**如果需要支持多种语言，字体文件会很快变大。为了支持所有已知的语言，字体需要支持成千上万的字形。

许多在线服务现在为设计师提供了大型字体库，并使其易于嵌入网站中(见图 5-2 )。这可能是一种选择，但你需要记住，这些服务需要不断更新和付费订阅服务，你将依赖于别人的服务器和他们的正常运行时间。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 5-2。 Typekit(上图)和 Fontdeck(下图)是两项在线服务，允许您在网站中使用 font-face，同时提供托管服务并确保所有字体都获得在线使用许可。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **注意:**为了保护自己的字体，TypeKit 使用了 JavaScript，这就产生了 JavaScript 依赖。Fontdeck 使用纯 CSS 解决方案来提供其字体。

像 Font Squirrel 这样的免费服务都有可以免费使用的字体库(见图 5-3 )。通常你必须下载真正的字体文件并自己保存它们。字体松鼠提供各种字体格式，以适应每种浏览器(EOT，WOFF，SVG 等)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 5-3。 Font Squirrel 有一个庞大的免费商业用字库。

使用自定义嵌入字体比使用图像更好，但是您需要做好在某些浏览器中失败的准备，并且您需要意识到法律可能不会使这成为您或您的组织的可行选项。它还有效地使字体公开可用，并且第三方很容易以他们认为合适的任何方式下载和使用这种字体，这是许多保护其品牌的公司不愿意看到的。

备用字体

CSS 作者必须预见到，不是每个用户都会在他们的系统上安装最佳字体。这包括确保样式表包括适当的备用字体，并验证网站的布局是否灵活，以适应字体大小的变化(一些字体可能比最佳字体大，如果不考虑这一点，可能会破坏布局)。

当选择备用字体时，不应该简单地根据它们是衬线字体还是无衬线字体来选择字体。您应该考虑一些因素，如备用字体的纵横比是否与首选字体相似。确定一种字体是否是合适的替代字体的一个简单方法是覆盖使用不同字体选项的单词，并检查其高度、宽度和粗细是否与最佳字体足够相似。你可以在 Photoshop 或 Fireworks 之类的程序中轻松做到这一点(见图 5-4 )。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 5-4。*如图所示，Chaparral Pro(深灰色)在 Times New Roman(右，浅灰色)中找到了比 Georgia(左，浅灰色)更好的退路，尽管并不完美。

在使用与font-face相关的技术时，比如前面提到的 Typekit 或 Fontdeck，确保备用字体与首选字体相似是非常重要的。当使用这些字体时，网页在下载和向浏览器提供正确的字体时通常会有延迟，在一小段时间内显示下一个可用的字体。当这种字体的大小和比例与由font-face服务提供的字体不同时，页面上的内容将跳转，文本流将重新排列，这可能会干扰用户，特别是如果他们的连接速度很慢，或者如果他们有阅读和学习障碍，如阅读障碍。这被称为无样式文本闪现(或 FOUT)，无样式内容闪现(FOUC)的字体特定版本，当您可以看到网站的无样式 HTML 时，在 CSS 加载之前，或在 JavaScript 修改 DOM 之前发生。

属性可以最小化这个问题，不仅是当你使用服务和体验跳转的时候，也是当用户没有在系统中安装首选字体或者 ?? 不在的时候。如果使用一种备用字体，此属性允许您保留首选字体的纵横比。就拿下面这个 CSS 来说吧:

p {     font-family: Calibri, "Lucida Sans", Verdana, sans-serif;     font-size-adjust: 0.47; }

font-size-adjust值将除以备用字体的原始font-size值，保留备用字体中首选字体的 x 高度。在前面的例子中，如果使用 Lucida Sans、Verdana 或默认的 system sans serif 字体，为了保持 Calibri 的纵横比，它们的font-size将除以 0.47。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **提示:**一些推荐的字库可以在[www.awayback.com/revised-font-stack/](http://www.awayback.com/revised-font-stack/)找到。

单位

文本可以在网页上以各种不同的单位类型设置，关于旧像素 vs EMS7的争论已经说得很多了。以像素为单位设置文本的两个主要优势满足了设计人员和开发人员的需求:我们对设计有更多的控制权，并且我们不需要执行复杂的计算来确定字体大小。缺点完全在于用户的领域:一些浏览器不支持使用像素设置的文本的字体大小调整。由此，应该很容易推断出使用更灵活的单位(如 ems 或百分比)的利弊。(我们将在第六章的中深入探讨单位的主题。)

虽然大多数新浏览器(甚至是 Internet Explorer 7)允许用户放大(缩小)整个页面，但他或她可能只想放大文本。如果文本以像素为单位设置，一些浏览器(如 IE 6 到 9)会忽略这个用户设置。放大整个页面也可能导致浏览器在更宽的网站上显示水平栏，这可能相当令人讨厌，因为它以网站设计者没有考虑的方式限制了用户的视区，并且如果它导致内容被裁剪，可能会使内容变得无意义。数量惊人的人选择缩放或调整字体大小，可能是因为他们有某种视觉或认知障碍，或者是不寻常的屏幕尺寸或分辨率。

无论你决定在你的站点中使用像素、ems 还是其他单位度量，指南都需要反映这一点。这是设计师(或设计师团队)的工作，制作指南，以确定哪些是最好的规模和比例使用。指南应该在默认场景中使用像素，例如 BBC 的全球体验语言(GEL)，其中字体比例和大小以像素表示，但网站的实际 CSS 使用 ems，因为它们是更容易访问的选择。

em 之所以被称为 em，是因为它被认为是大写字母“M”的高度。事实上，根据印刷工 Robert Bringhurst 的说法，“em 是一个滑动的量度。一个 em 是等于字体大小的距离。在 6 点字体中，em 是 6 点；在 12 点字体中，em 是 12 点，在 60 点字体中，em 是 60 点。因此，一个 em 空间在任何大小上都是成比例的相同。”

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 5-5。*英国广播公司的全球体验语言指南以像素为单位说明了允许的字体大小，尽管英国广播公司的网站使用 ems 作为字体大小。

在 BBC 新闻主页上，头条新闻的h2级别标题的font-size值为 2.461em。这个数字可能看起来很奇怪，但是如果您查看最终计算的值(您可以使用 Firebug 来计算)，您会发现它实际上是 32px(假设您的浏览器使用默认的字体大小)。开发商是如何得出这个数字的？body元素的字体大小设置为 62.5%。由于默认的字体大小通常是 16px，这个老技巧使得 em 计算更容易:16 的 62.5%是 10。一个 em 等于 10 个像素。因为页面包装器和标题的祖先应用了“font-size: 1.3em”(使其计算值为“13px”)，所以我们需要计算 32px/13px，以了解我们必须增加多少子级的font-size，从而获得所需的 32px。听起来复杂吗？的确如此，这也是为什么尽管 ems 是一种更容易使用的解决方案，但是许多 CSS 作者都避免在他们的样式表中使用 EMS 作为字体大小单位。我们建议您花时间做这项工作，并在可能的情况下使用 ems。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **提示:**在[topfunky.com/baseline-rhythm-calculator/](http://topfunky.com/baseline-rhythm-calculator/)和[jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator](http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator)有几个不错的 em 计算器。在[fordinteractive.com/tools/emchart/](http://fordinteractive.com/tools/emchart/)也有一个方便的参考图表。

颜色

颜色是品牌被感知的一个基本因素。一些品牌与它们的颜色联系如此紧密，以至于有时我们甚至不需要看到它们的名字，就能从它们的颜色和形状中认出它们(例如，国家地理的黄金矩形或可口可乐的红色字体)。

正因为如此，每个品牌风格指南几乎肯定会包括一个与颜色相关的部分:可以使用什么样的调色板，合适的组合和比例是什么，每种颜色在品牌色彩景观中代表什么，等等。

有了这些指导原则，重要的是实现团队了解它们，知道如何使用颜色以及如何将它们转换到 Web 上——前端开发人员甚至不知道他们正在构建或扩充的网站上应该使用预定义的颜色，更不用说了解这些颜色的适当用途了。这导致了设计者和开发者的挫败感，也稀释了用户的品牌。

对于设计师来说，了解色彩在印刷品和网络上的作用是不同的也很重要，首先，尽管印刷品对每个人来说看起来都一样，但每个用户都用不同的显示器或设备浏览网络，具有不同的功能、校准和配置。在开发风格指南时，网页设计师(和平面设计师一样)应该考虑到有视觉障碍或色盲的人，并确保设计中包含的颜色和颜色组合提供了适当的对比度，但这些问题属于易访问性范围，而不是本章的主题，因此将在第六章中进一步讨论。

品牌指导方针是首先考虑网络色彩，然后是印刷色彩，还是反过来是设计师的选择；只要有一个在网络上使用的定义好的和同意的调色板。

然而，一些视觉品牌指南并没有提及屏幕颜色。这可能是因为该指南是在互联网还没有被考虑的时候制作的，或者仅仅是因为它不完整。无论是哪种情况，都应该修改指南，以包括在 Web 上使用的适当的颜色参考，避免时间浪费和不精确的颜色使用，因为每个 CSS 作者都必须将 CMYK 和 Pantone 颜色转换为 RGBA、十六进制或网站的首选颜色格式， 8 ，并且这个过程应该由设计师或设计团队签署。

多种配色方案

颜色是区分子网站或网站部分的有力工具。例如，如果你有一个面向儿童的子品牌，它可能会用更大胆、更明亮的颜色设计，而如果你的组织中有一个高级品牌，你可能会使用更经典、更优雅的颜色。

当构建子品牌和他们的网站时，从用户和开发者的角度来看，更容易保持网站范围内的一致性，同时保持差异清晰——我们希望他们知道他们仍然在我们的网站大家庭中，但看的是不同的产品。

Fox 是一个很好的例子，通过使用相同的基本模板，你可以有几乎无限范围的不同子网站，在这个例子中是每个节目。在 Fox 的例子中，加粗的背景图像与特定的节目相关，而链接配色方案遵循该节目的品牌。然而，页面布局和导航元素的设计和行为保持不变。这很好地展示了如何实现外观的变化，同时保持设计模板的一致性，借助颜色(和图像)进行区分，避免不和谐和不一致的用户体验。

8 CMYK、RGB 和 Pantone 颜色具有不同的色域(颜色子集)，一种颜色模型中的一些颜色在其他颜色模型中“超出色域”(无法准确再现)。在此阅读更多关于色域的信息:[en.wikipedia.org/wiki/Gamut](http://en.wikipedia.org/wiki/Gamut).

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 5-6。*福克斯的《美国爸爸》和《厨艺大师》网站:这两个例子展示了如何通过使用相同的模板和不同的配色方案和图像来实现差异化。

需要记住的一点是，用户很少按照颜色对网站的各个部分进行分组，也很少理解其意义(尽管组织内部的人和开发人员可能会理解),除非颜色已经与品牌相关联。这里提到的案例就是这样的例子；给你公司的各个部门标上颜色是完全不同的事情，因为他们不会被外界视为“品牌”

颜色参考

除了生活在视觉样式指南中，在 CSS 文件本身中有一个调色板参考也很有用。在第二章第一部分中，我们展示了如何将它们包含在 CSS 注释中，这样对于作者来说总是有一个方便的参考。下面是一个如何在 CSS 文件顶部保留调色板的示例:

`/* Color reference:

Main text    #333333
Background   #f7f7f7
:link,
:visited     #dd4814
:hover,
:active,
:focus       #bc522d
…

*/`

您可以选择使用 CSSDOC 注释；你可以在第二章的中看到更详细的解释。这种方法要求您在两个不同的地方维护信息，尽管将这些引用保存在 CSS 文件中很方便，但您可能更喜欢更准确的单个引用点。

动态色彩

使用动态 CSS 或编译器，如 LESS 或 Sass，大型网站上的颜色和颜色更新可以变得更容易管理。使用这些技术，您可以轻松地为最常用的颜色(如主文本、链接、背景或边框)设置变量，无需经常参考颜色指南来使用正确的十六进制代码或 RGB 参考。您甚至可以基于三种或四种主色生成整个配色方案，方法是将其他颜色基于这些主色并使用颜色计算。我们将在第九章中更详细地介绍这个主题。

回退颜色

旧的浏览器不支持新的 CSS3 颜色格式，如 RGBA 或 HSLA。对于这些浏览器，您必须始终确保提供后备颜色。例如，如果在一个div上指定一个透明的背景颜色，你可以在 RGBA 浏览器之前提供一个声明(这个声明将被忽略，因为它不被支持):

div {    background-color: #b9cf6a;    background-color: rgba(255, 255, 255, 0.3); }

在前面的例子中，我们没有指定准确的十六进制版本 255，255，255，因为那将是纯白色的。相反，使用拾色器工具(比如 xScope [iconfactory.com/software/xscope](http://iconfactory.com/software/xscope))你可以选择一种近似透明色和它下面的基本色的颜色，给老的浏览器一个更精确的设计。这些备用颜色不太可能在品牌指南中指定，所以确保它们存在并被准确选择是一个勤奋和彻底的 CSS 作者的工作。安全总比后悔好，所以留个评论提醒自己更新回退颜色，以防原始颜色发生变化总是个好主意。

当使用 CSS 渐变时，记住总是指定一个后备背景颜色，确保在不支持它们的浏览器上，背景和前景之间仍然有足够的对比度。同样适用于使用图像作为背景色(确切地说，CSS 渐变实际上是动态生成的背景图像和而不是颜色)；始终为容器指定背景颜色，并始终在关闭图像并打开 CSS 的情况下测试网站——对于在禁用图像的情况下浏览(在较慢的连接或移动设备上)的用户来说，由于开发人员忘记定义背景颜色并依赖背景图像进行对比而无法访问内容可能会非常令人沮丧。慢速连接的用户也会看到你的网站在加载之前图像丢失了一会儿，而且屏幕变化越小，发生时对用户的干扰就越小。

布局

定义页面的基本结构是 CSS 网站编码的一个重要步骤，它将影响到整个过程。重要的是要有一个坚实的基础——一个定义好的网格，每个单独的页面都可以建立在这个网格上，而不是在需要的时候就把“s”扔到页面上。

网格和模板的使用也将提高 CSS 文件和设计的灵活性(和适应性)，有助于保持布局的一致性。

网格

知道如何最好地使用网格是任何一个设计师的基本技能，无论是在网上还是网外。

然而，使用网格并不意味着创建僵硬的布局——它们是设计基础的一部分，有助于形成一个坚实的、考虑周全的结构，并有助于做出一些决定；但是，就像任何一套规则和约束一样，它们也会被打破。

Web 上一些最原始的布局是在适当定义的网格上组成的。我们来看一个例子(见图 5-7 )。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 5-7。《连线》网站(上图)与网格叠加(下图)[www.wired.com/](http://www.wired.com/)

正如你所看到的，即使它遵循一个网格，Wired 网站的设计也不觉得死板。反而感觉很有表现力，很有动感。

一个仔细考虑过的网格是灵活的，它适合于多种布局设计，有助于保持不同页面之间的一致性，并且它应该有助于保持品牌的一致性。然而，当网格最终确定时，设计者的工作还没有完成；如果一个好的网格的唯一目的是正确对齐页面上的每一个元素，那么它将毫无用处。

虽然正确的对齐是实现平衡与和谐的基本步骤，但设计的其他方面并不包括在内——元素的视觉层次、颜色、排版等等仍然需要考虑。设计不仅仅是在网格中定位元素。

试图将网格转换成 HTML 和 CSS 的一个缺点是，内容的自然流动(文档的轮廓)可能会被忽略，成为网格的附属。当布局开始表现得更像基于表格的旧布局时，就会发生这种情况。

尽管基于表格的网站在使用立体网格时几乎是完美的，但它们的一个(许多)缺点是形式不符合内容；内容遵循形式。内容在页面上的视觉位置比内容本身的意义和流动更重要。如果 HTML 基本上是创建要定位的框，就像表格一样，那么我们没有做到内容公正。

这是许多 CSS 框架采用的方法，也是许多 CSS 作者不喜欢使用它们的原因之一。

在图 5-8 中，我们有一个基本的 8 列网格；每列宽 100 像素，左右各 10 像素。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 5-8。*一个简单的 8 列网格的例子

编写这种布局的第一反应可能是关注列并创建八个浮动在左侧的容器:

div {    width: 100px;    float: left;    margin: 0 10px; }

但是更有可能的是一个网格中的元素跨越了不止一列，如图 5-9 所示。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 5-9。*带有内容块的 8 列网格

这个网格可以用许多不同的方法转换成 HTML 和 CSS，但是最佳的方法总是考虑到页面的实际内容和流程，并且保持顺序不变。网格是次要的，内容不应该成为它的从属；它仅仅是实现布局一致性和和谐性的一种手段。

在我们的示例中，我们可以从定义最重要的内容块开始，并从底层网格中提取它们的宽度:

`header {
   width: 940px; /* full width /
}
nav {
   width: 220px; / 2100px + 1x20px /
   float: left;
}
#highlight {
   width: 580px; / 5100px + 4x20px */
   float: left;
}

…

aside {
   width: 100px; /* single column = 100px */
   float: right;
}`

网格的存在是为了给设计者和 CSS 作者提供衡量标准，他们将在此基础上做出一些设计决策，这将使从设计阶段到编码阶段的翻译不那么容易带有主观性。如果负责 CSS 的人知道设计中跨越两列的元素自动为 220 像素宽，这将有助于设计保持一致性和平衡。

我们将在第十一章中更详细地介绍使用网格的过程，在那里我们将从头开始创建一个框架。

模板

HTML 和 CSS 模板为作者提供了一个坚实的基础。模板是确保标题、导航、基本页面结构和版式等关键元素在一系列网站和子网站中保持一致的简单方法。

模板和 CSS 框架之间有一些不同，尽管它们的目的是交织在一起的。现有的 CSS 框架由预先构建的代码库组成，您可以根据手头的项目进行调整。有几个现存的 CSS 框架可供许多开发者和机构免费使用(我们将在第四章中介绍)，比如 960gs 或 Blueprint。在某些情况下，团队创建他们自己的 CSS 框架(我们强烈推荐这种方法，并在第十一章中介绍)。框架应该具有适应性、灵活性和模块化。

模板可以采取不同的方法。您可能有一个 HTML 和 CSS 模板，其中包括一个示例网站的页眉、主导航、内容区域和页脚，并且应该在您组织内的所有网站中使用。然而，这并不意味着这组文件允许框架所做的模块化和通用的方法。

模板是标记应该如何构造以及 CSS 如何绑定到它的基本示例——它们作为页面的框架而存在。理想的情况是基于现有的 CSS 框架构建 HTML 和 CSS 模板，这样开发人员就可以看到 CSS 文件如何被使用、覆盖和适应各种页面模板的活生生的例子。

主题

组织通常会根据相关的季节、假期和事件来改变网站的设计和内容，例如夏天的开始、圣诞节、新年或促销活动。

这些更新通常是显示网站没有停滞不前的好方法；它是不断更新的；最重要的是，背后的公司、产品或服务关心他们的客户做的同样的事情——这增加了参与度。

虽然有时品牌重塑可能只与一次性事件有关(例如，公司的 25 周年纪念)，但重复发生的事件也会引发这些更新(例如，每年一次，如圣诞节品牌重塑，或一年几次，如季末销售活动)。

季节性品牌重塑的最好例子之一是星巴克的圣诞节网站。除了重新装修他们在世界各地的商店以符合季节精神，星巴克还为他们的网站访问者提供了一个改进的设计，与商店和广告活动相协调，在完美的营销编排中(见图 5-10 )。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 5-10。*星巴克的圣诞主题网站有了全新的设计和布局。

从设计的角度来看，设计人员的工作是处理更复杂的站点主题的创建，但是这些改变最终会落入 CSS 作者和其他开发人员的手中，他们需要能够用更新来覆盖现有的样式表。

这可以被看作是对 CSS 的一次考验:样式表需要足够灵活，这样覆盖一些规则就不会变成特定性的噩梦。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **注:**注意到在本书中特异性噩梦这个术语被提及的频率了吗？这是因为我们对它太熟悉了，因为这是 CSS 作者经常面临的情况——非灵活和脆弱的样式表的结果。

如果 CSS 使用了过于特殊的选择器，当创建一个新的主题时，你将不得不创建更多特殊的选择器。理想情况下，您应该能够向body元素添加一个类或 ID，例如“christmas ”,或者在 HTML 的header部分的默认样式表之后链接季节性样式表，或者将新规则合并到现有的主文件中。

例如，Threadless 在body标签中添加了一个类，这样网站的某些元素就可以被定位，它们的 CSS 也可以随着改变而被覆盖(见图 5-11 )。

.holiday_week_2_3 .footer_wrap {     background: url(/imgs/sale/black_friday/bg_footer.jpg) no-repeat scroll center 30px #ffffff;     clear: both;     overflow: hidden;     padding: 90px 0 0; } 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 5-11。*以销售为主题设计的无线网站。

你可以在第四章中阅读更多关于覆盖 CSS 文件的内容。

灵活的 CSS 和品牌进化

品牌不会永远不变。尽管最知名的品牌倾向于避免激进的品牌重塑，这可能会损害客户和公众对他们的看法，但我们也经常看到他们进行较小的更新，这些更新在外部几乎察觉不到，但仍然涉及到 web 实现团队的一些工作。

这些小的变化可能包括排版的改进、颜色的改变、整个网站使用的图像的更新、较小的布局和导航调整以及徽标替换等。

大公司每两三年更新一次他们的网站也并不少见。这可能有多种原因:整体品牌重新设计需要反映在网站上，网站看起来过时(这种情况尤其发生在它被设计成遵循迅速过时的网页设计趋势的情况下)，公司被重组，或者网站本身的内容被重组，等等。

甚至那些倾向于保持不变的品牌也会对他们的网站做一些小的改动，主要是因为媒体的快速变化的本质，也因为这些改动通常比，例如，重新装饰整个车队或为数千名员工重印文具的成本要低。

因为进行这些更改通常会有成本，而速度总是人们追求的目标，所以通过创建灵活的 CSS 文档来为这些更改做准备是很重要的，这些文档可以尽可能容易地更新以进行小的或大的调整。

这是本书的主旨:让你的网站的 CSS 具有适应性，容易被很多人使用，并且在需要的时候可以更新，而不破坏其他的东西。

当网站面临大规模更新或重新设计时，重要的是尽早决定是从头开始更好，还是现有的 CSS 灵活且易于适应变化。通常，如果底层标记被重做，这也意味着 CSS 需要被重新构造，因为标记的构建方式往往与 CSS 的组织方式直接相关。

然而，最常见的场景(以及那些使大型网站必须拥有专门的 web 团队的场景)与不太明显的持续更新有关，这些更新虽然很小，但会持续测试标记和 CSS 的健壮性。这可能是向主导航添加新链接、更新文本颜色以使其更易于访问、重新调整网格、创建新的侧边栏小部件，或者为不同语言的新版本准备站点——在任何 web 实现团队中常见的日常任务。

这些都是很好的例子，说明了为什么保持 CSS 的一致性和灵活性很重要，以及最新和详细的 CSS 和设计和品牌风格指南如何使实现新元素或扩展现有元素变得更容易。

总结

CSS 作者和前端开发人员的大部分工作是让设计在网络上变得生动。用户体验设计师、信息架构师、视觉和图形设计师将他们的知识和最大努力投入到创建独特的品牌和产品中。确保他们的工作执行得天衣无缝是至关重要的，因为这将影响您的组织在外部(和内部)的形象，并最终影响其成功。从事网络工作的专业人员需要考虑到许多方面，我们假设他们知道这种媒体的潜力，但也知道它的局限性。建立清晰的品牌和设计指导方针，确保每个人都知道并理解它们，并有一个建立设计规则但允许灵活性和效率的过程是每个大型网站团队应该努力的，也是本章应该帮助实现的。

在下一章，我们将讨论可访问性以及它如何影响你的 CSS。我们将关注可能影响我们用户的缺陷，以及您可以采取哪些措施来确保他们获得最佳体验。

六、CSS 和可访问性

从本质上说，使网站易于访问意味着确保每个人都可以访问所有内容。这并不意味着每个人都必须有相同的体验，但这确实意味着不应该有任何人无法实现(或无法实现)的功能或内容，无论他们的个人能力、设备、浏览器或环境如何。

可访问性不是核对需求列表，或者使用自动化工具来验证我们的代码是否通过了特定的可访问性指南和验证。虽然法律可能要求您的组织通过特定的可访问性级别(不同的国家有不同的可访问性法律)，但在开发高流量网站时，确保您的网站可以被尽可能多的设备和用户访问应该是您主要关注的问题之一。这是你应该为你的用户、你的品牌以及他们对它的好感所做的事情。不违法可能会被视为意外收获。

关于网上可访问性，可以说(也已经说了)很多，足以写满一整本书，甚至一本集子。建立易访问的网站在很大程度上是，但不仅仅是，建立语义网站的副产品。然而，这并不仅仅是开发人员的责任。与网站相关的每个人都应该参与进来:用户体验设计师应该确保网站易于导航，内容易于查找；设计师应该设计出考虑残疾用户的布局，比如色盲或运动技能差的用户；产品经理和广告文案应该创造简单明了的信息；开发人员应该编写具有语义和可访问性的代码。有几个考虑因素，尤其是高流量的网站。此外，有许多与 HTML 相关和与内容相关的操作可以让您的内容更容易被访问，但是作为一本与 CSS 相关的书，它们超出了本文的范围。我们会给你一些建议，告诉你如何向尽可能多的访问者和客户开放你的网站和(最重要的)你的内容。 1

在本章中，我们将了解

  • 一些最常见的用户可访问性问题概述
  • 现有的可访问性指南以及如何满足这些指南
  • 如何让访问者使用辅助技术更容易
  • 更易访问的站点的设计和布局考虑
  • WAI-ARIA 以及如何在你的项目中使用它
  • 针对有设备或环境障碍的用户的 CSS 最佳实践
  • 渐进增强和适度退化的区别
  • 如何使用雅虎！分级浏览器支持

这不仅是一件有益的、无私的事情，也是一件有利可图的事情。英国超市 Tesco 与皇家国家盲人学院(RNIB)合作，确保其网站无障碍。这导致了一年 1300 万英镑的额外收入，这在以前是不可能的。

减值问题概述

什么被认为是，什么不被认为是损害是一件很难以政治正确的方式讨论的事情。一些人认为这是一种残疾，另一些人认为这只是人与人之间的差异。当我们谈到缺陷时，我们指的是使用户使用网站变得更加困难的东西。一些最常见的无障碍障碍如下:

  • 视力低下、视力不佳或失明
  • 不同种类的色盲
  • 运动障碍或运动技能受限
  • 听力障碍
  • 认知和智力残疾
  • 年轻，这可能意味着认知障碍
  • 年老，这可能意味着这里列出的许多问题

比你想象的更常见的是，人们会有不止一种情况，这使得满足每种可能的组合更加困难。

例如，那些聋哑人通过不同的方式交流和吸收信息。那些最初失聪然后在以后的生活中失去视力的人很可能使用他们已经知道的手语的修改版本，以触觉的形式。而那些生来失明，然后变聋的人很可能使用他们的书面或口头语言的触觉版本。即使是像耳聋这样的单一障碍，也可能有数十种(甚至数百种)解决方案(例如，唇读、手语、高级手语、助听器等等)。有比我们在这里可能进入的更多的组合。需要记住的一件重要事情是，这些用户已经决定了他们想要和确实喜欢如何使用他们的设备，并且已经准备好应用程序来帮助他们实现这一点。

我们不是为残障人士服务的专家，也不能指望成为专家，但我们可以尽最大努力不干扰用户选择的方法。这同样适用于每个人——如果一个用户定义了键盘快捷键，而我们未经允许就覆盖了它们，这对用户来说是令人沮丧的，对我们来说是放肆的。如果另一个用户试图右键点击一个页面，而我们取消了这个行为，同样，我们这样做是不礼貌的。让浏览器和设备有机会做他们认为合适的事情，通常是我们应该做的最礼貌和最恰当的事情。

让我们来看看有特殊障碍的人可能面临的一些更常见的问题。显然，这不是一份详尽的清单。我们将在本章的后面更详细地讨论每一个问题。

部分失明

部分失明(但不是失明)的用户属于两个主要群体之一。那些难以集中注意力的人将受益于清晰、简单、中等粗细的字体和大字体。 2 允许他们在你的网站内改变字体大小和字体的能力会让他们的生活更轻松。确保您使用字体大小的相对值也将让他们使用内置的设备方法来调整字体大小，并避免！重要的声明将有助于确保您不会覆盖他们自己所做的任何设置。

2 在[www.rnib.org.uk/professionals/accessibleinformation/text/Pages/fonts.aspx](http://www.rnib.org.uk/professionals/accessibleinformation/text/Pages/fonts.aspx).阅读 RNIB 对字体的评论

视野狭窄的人(一次只能专注于屏幕上的小区域)将受益于调低字体大小的功能，这样段落在屏幕上占用的空间就更少了。这些用户更有可能把整个网站缩小，但每个人都不一样。您应该始终确保您已经测试了站点，以确定您可以在浏览器中将字体大小调高和调低两步，而不会破坏布局。

失明

盲人用户很可能使用屏幕阅读器(我们将在本章后面的专门章节中提到)。他们浏览网站的方式也与视力正常的用户非常不同。他们可能希望直接跳到网站的各个部分，访问页面中所有链接的列表，或者访问由标记中的标题构成的页面轮廓。避免使用指向页面上特定物理位置的语言(例如，“点击右上角的链接”)，使用 WAI-ARIA、语义和微格式。更新的技术将能够利用这些优势。

色盲

色盲用户可以使用他们自己的样式表或者完全关闭 CSS。向他们提供各种可供选择的配色方案对他们有很大的帮助，可以让你的组织保持对其品牌的控制，并确保你的网站保持吸引力。在本章的后面，我们会引用一些工具来模拟色盲并检查你的配色方案的问题。

运动障碍

运动障碍的程度会有很大的不同。在大多数情况下，这些用户已经在使用他们自己的辅助技术来使他们能够使用他们的设备，但是我们可以做一些小事来帮助他们，比如使可点击的区域尽可能清晰和大。只要有可能，确保你链接的目标区域不需要很精确的点击。 3 这些考虑也适用于智能手机或平板电脑等触摸界面的用户。

无论如何，在许多情况下(比如标签页或按钮)，不把可点击区域做成容器大小是一种令人困惑的用户体验。

听力障碍

除了特定的音频或视频内容之外，部分或完全失聪的用户在互联网上一般较少遇到可访问性问题。大部分网站没有(或者肯定不应该！)播放音频， 4 这样对听障人士和其他用户一样有效。您应该避免单独使用声音来表示页面上的任何状态或信息。如果您的网站将音频或视频作为其主要目的的一部分，您需要考虑为这些媒体添加字幕。

开放式字幕是“烧录”到与其相关的媒体中的字幕；比如电影中无法关闭的字幕。它被称为“打开”,因为默认情况下它是显示的。 隐藏式字幕是与媒体相关联的文本数据，以文本格式存储并与视频一起提供。例如，长期以来，法律要求电视提供隐藏式字幕解码器。隐藏式字幕的好处是允许几个不同的文本“轨道”;例如，不同的语言或声音的描述以及对话。它可以与音频一起用作卡拉 ok 的歌词，因为它是时间编码的。它还有一个好处，就是允许我们用 CSS 潜在的样式化文本(不同的位置来避免重要的视频元素，颜色来代表不同的人，等等)。

3 费茨定律([en.wikipedia.org/wiki/Fitts’s_law](http://en.wikipedia.org/wiki/Fitts's_law))预测快速移动到目标区域并点击它所需的时间取决于移动的距离和目标的大小。更大的目标让每个人更有效率。

网站当然不应该自动播放音频，因为这会让用户感到不舒服和困惑。

遗憾的是，到目前为止，隐藏式字幕在网络上和许多不同的解决方案中都没有得到很好的支持。HTML5 还没有对隐藏式字幕的官方支持，但是已经被证实的方法正在被实现，标准化肯定会随之而来。 5

目前，隐藏式字幕的 CSS 考虑在很大程度上取决于您的实现，而脚本是公开这些数据的唯一万无一失的方法。你可以在[webaim.org/techniques/captions/](http://webaim.org/techniques/captions/)阅读更多关于字幕的信息。

同样重要的是要意识到，那些生来失聪的人很可能已经学会了手语作为他们的第一语言。这意味着英语(或他们的当地语言)对他们来说类似于第二语言，因此表达方式、行话和俗语对他们来说可能更难理解。因此，清晰的语言和以往一样重要。

认知障碍

认知障碍，如阅读障碍或自闭症，会使用户难以处理信息。一般来说，这种缺陷可以通过清晰明确的文案来解决，但你也可以做其他事情。保持布局的一致性，保持导航等关键元素的位置，会让所有用户的生活更轻松，尤其是那些有认知障碍或学习障碍的用户。这同样适用于不要使用太多不同的字体(尽管网站应该足够灵活，以便用户可以很容易地指定他们喜欢的字体)。此外，确保行与行之间有足够的空间，因为这使得文本更容易阅读(对于普通文本，1.5 的line-height值是一个很好的默认值)。

诵读困难是一种非常常见的障碍，尽管没有进行过精确的研究，但据信诵读困难影响了 5%到 10%的人口。诵读困难症患者可能会遭受各种各样的学习或认知障碍，这就是为什么当提到无障碍时，这个特殊的问题被如此频繁地提及。一些诵读困难者更喜欢打印页面，而不是阅读屏幕上的文本。这只是为什么有人会打印一页纸的各种原因之一。

如果你没有开发一个专门针对阅读障碍者的网站，那就没有必要证明你的网站的每一个细节都是阅读障碍友好的，但是你应该记住，在这种情况下最重要的因素是用户可以定制他们访问的页面，以满足他们非常特殊的需求，使其更容易阅读和理解内容。

5Web Video Text Tracks(Web vtt)，以前被称为 WebSRT(基于流行的 SRT (SubRip Text)格式)，目前正在由几个浏览器实现，因此是目前最有可能被标准化的提案。你可以在[www.whatwg.org/specs/web-apps/currentwork/webvtt.html](http://www.whatwg.org/specs/web-apps/currentwork/webvtt.html).阅读

年轻时代

年轻用户和其他人一样可能遭受列表中的许多其他障碍，但他们也可以被认为有一种认知障碍，因为你应该使用简单、清晰的语言。为儿童设计的网站也是使用漫画无字体的唯一有效的地方，尽管一些阅读障碍者也可能会发现它更容易阅读。

老年

老年用户可能会遭受列表中的任何一种或多种损伤(当然，除了前面提到的那种)。特别是视力和听力会随着年龄的增长而退化。因此，如果你确定你的网站是可访问的，你可能已经设计了一个老用户可以访问的网站。他们也可能对计算机不熟悉或不熟练，所以避免技术术语，使用常见的视觉联想效果很好。

癫痫

癫痫症患者尤其会对闪烁的页面或页面中的元素产生不良反应。许多国家/地区的法律规定，在展示此类媒体之前必须发出警告。避免动画或无样式内容的闪烁(FOUC)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **提示:**BBC 有一个很棒的资源，可以帮助有不同无障碍问题的人了解他们需要知道的东西，让互联网对他们更友好。虽然在撰写本文时它仍处于测试阶段，但您可以在[www.bbc.co.uk/accessibility/accessibility_beta/](http://www.bbc.co.uk/accessibility/accessibility_beta/)访问它。

易访问性问题不一定意味着用户的身体或心理问题。这可能仅仅意味着他们用来访问你的网站的设备或环境的能力比预期的要低。

让我们来看看一系列可能转化为非生理性无障碍障碍的常见问题:

  • 旧浏览器
  • 拨号或慢速互联网连接
  • 小型或低保真度屏幕
  • 触摸屏
  • 无法使用鼠标或键盘
  • 缓慢的处理器或旧电脑
  • 眼睛、手或耳朵可能被占用的环境(例如，锻炼或驾驶)
  • 有意禁用 JavaScript、CSS、图像或 cookies

没有确切的数字可以告诉我们有多少用户可能属于这些类别。在许多情况下，它们可能是暂时的损伤(他们可能在旅途中试图验证一些信息，或者使用他人或其工作的计算机)。但是，如果我们只考虑第一个问题，看看有多少用户仍在使用旧浏览器浏览网页的统计数据，虽然这对许多低流量网站来说并不重要，但在高流量网站上，即使很小的百分比数字也可以转化为每天数万的访问者。此外，IE 6 的使用可能已经下降到全球所有互联网流量的 4%或 5%左右，但它仍然占非洲流量的 12%以上。如果你的网站获得了世界范围内的流量，看世界范围的统计数据而不是按国家进行分类会产生误导。 6

你可以在本章后面阅读更多关于如何帮助遭受设备和环境损害的用户。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **提示:**意识到用户在某个特定时间可能面临的所有可访问性问题并不意味着我们应该以最小公分母来构建我们的网站。这意味着我们应该确保内容——我们网站的核心——对每个人都是可用的。

无障碍指南

有许多可访问性指南和清单。Web Accessibility Initiative(WAI[www.w3.org/WAI/about.html](http://www.w3.org/WAI/about.html))是 W3C 的领域之一。他们有几个工作组，但最常引用和应用的是网页内容可访问性指南(WCAG [www.w3.org/TR/WCAG10/full-checklist.html](http://www.w3.org/TR/WCAG10/full-checklist.html))。这个清单——不像 W3C 的许多其他文档——相对简洁，非常容易阅读。该页面设计用于打印和用作实际的清单。

考虑事项分为优先级 1 、优先级 2 或优先级 3 。优先级 1 项目被认为是可访问网站的基本要素。优先 2 物品强烈推荐，优先 3 物品有用。你可以分别考虑这些必须、应该和可能。

实质上，为了符合优先级 1 项目，您必须执行以下操作:

  • 为页面上的每个图形元素提供等同的文本
  • 清楚地提供通过其他方式(例如，通过颜色或位置)表示的信息的文本对等物
  • 确保页面在禁用 CSS、JavaScript 或图像的情况下正常工作
  • 使用简单明了的语言
  • 避免闪烁
  • 如果所有这些都失败了，就链接到一个遵循指南的页面的替代版本

还有很多额外的和更好的地方。我们强烈建议您详细阅读该页面，并尽可能遵循合理的建议。一些国家，如加拿大或瑞典，遵循他们自己的可访问性指南。 7

6 有关浏览器使用情况的更多统计信息，请访问[gs.statcounter.com/](http://gs.statcounter.com/)或[www.w3counter.com/globalstats.php](http://www.w3counter.com/globalstats.php).

7 加拿大有“通用外观和感觉标准”([www.tbs-sct.gc.ca/clf2-nsi2/](http://www.tbs-sct.gc.ca/clf2-nsi2/))，政府机构必须遵守该标准，包括关于网址、可访问性和可用性、网页格式和电子邮件的标准。现已消亡的瑞典行政发展署于 2006 年发布了《瑞典公共部门网站国家指南》；该指南一直由私人维护，并于 2008 年翻译成英文。它们涵盖了可用性、隐私问题、信息架构以及网络标准等领域。

什么规律？

不同的国家有不同的法律来规范可访问性。通常他们倾向于不仅仅与网络有关，而是反对对残疾人的歧视和促进平等。

在联合王国，1995 年的《残疾歧视法》也提到了网站。《行为守则》的重要内容是这样的:《残疾歧视法》规定，服务提供者拒绝向公众提供任何服务，从而歧视残疾人是非法的。

皇家国家盲人研究所(RNIB)和残疾人权利委员会(DRC)已经推动就《残疾歧视法》采取法律行动。RNIB 已经联系了两家大型网站，要求它们做出改变，以避免法律诉讼并保持匿名。DRC 调查了 1000 个网站，发现超过 80%的网站与《残疾歧视法》的要求相冲突。这些网站受到无限赔偿和法律诉讼的威胁。

在美国,《美国残疾人法》也是为了同样的目的。它不仅适用于网站，也适用于任何服务，包括建筑、医疗、电话等等。

消费者协会起诉大型组织的无障碍标准很差并不罕见，这些标准将成千上万的残疾用户排除在他们的网站和内容之外。原告在这些案件中赢得大笔金钱是有先例的。对于高流量和高知名度的网站来说，这是一个更真实的威胁，不应该掉以轻心。

在法律诉讼中，很可能会使用 WCAG 准则。欧盟建议的合规级别为优先级 2 。我们建议尽量满足优先级 2 的最低要求，并尽可能努力满足优先级 3 的要求。 8

辅助技术

有各种类型的残疾人辅助技术。辅助技术的主要目标是帮助残疾人在日常生活中更加自主。

经常应用于使用计算机(以及随之而来的互联网)的一些辅助技术是屏幕阅读器、屏幕放大器、语音识别软件以及盲文显示器和键盘。

我们将主要关注屏幕阅读器和仅使用键盘的用户，因为这些情况下的许多指南也适用于其他辅助技术，并且它们代表了残疾人使用的辅助技术的很大一部分。

屏幕阅读器

屏幕阅读器并不是视觉障碍用户的专属工具。患有其他类型残疾的用户在屏幕阅读器中找到了一种更有效、更可忍受的浏览互联网的方式(例如，当疲劳时，发现难以集中注意力，或忙于做其他事情)，这种方式以线性方式呈现内容，而不会强加给他们可能使他们更加焦虑、更难理解内容的行为。这提高了潜在屏幕阅读器用户的百分比。

2006 年，美国盲人联合会对美国最大的零售公司之一塔吉特百货公司提起诉讼，指控其网站设置障碍，使盲人顾客难以使用网站。2008 年，目标定为 600 万美元。其他的例子包括 2000 年一个盲人成功起诉悉尼奥组委，以及纽约州起诉 Ramada.com 和 Priceline.com 的案件。

像浏览器一样，屏幕阅读器接收更新，并且每个更新都增加了对新功能的支持。而且，就像浏览器一样，用户不一定要更新他们的屏幕阅读器软件。其中一个主要原因是成本。屏幕阅读器的构建并不简单，通常是针对利基市场的。因此，它们通常非常昂贵。屏幕阅读器的功能和行为有很大的不同。VoiceOver ( [www.apple.com/accessibility/voiceover/](http://www.apple.com/accessibility/voiceover/))是一款苹果屏幕阅读器，作为 OS X 的一部分是免费的，功能齐全。如果您正在使用 Mac，我们建议您尝试一下，向您介绍一些您的用户将会面临的问题。这是一次真正有启发性的经历。按下 Command-F5 随时打开或关闭 VoiceOver。自 Windows 2000 以来，Windows 还包括了它的基本屏幕阅读器 Windows 讲述人。

屏幕阅读器提供了与网站交互的方法，这些方法不同于视力正常的用户使用的方法。VoiceOver 将此称为 Web 项目转子。这使得用户可以调出链接、标题等列表，并直接导航到它们，而不是被迫以线性方式在网站中导航，直到找到他们想要的内容。这很快暴露了许多明显的可访问性问题。VoiceOver 还会直观地呈现它大声朗读的内容。图 6-1 、 6-2 和 6-3 显示了一些例子。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 6-1。*维基百科为用户提供了合理的链接，尽管有 306 个。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 6-2。 CNN 有一个合理的标题列表，尽管标题级别令人困惑。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 6-3。*麦当劳的链接只使用图片，没有标题属性。情况越来越糟，但让我们继续前进。

处理屏幕阅读器有一些 CSS 作者应该考虑的因素。

  • 如果您的布局以线性阅读时可能没有意义的顺序呈现内容，请在标记中以正确的顺序放置它，并使用 CSS 按照您喜欢的方式重新排列内容。
  • 如果隐藏内容并使用:hover伪类来显示它，对:focus伪类做同样的事情。这些用户不太可能使用指点设备，如跟踪板或鼠标。
  • 在页面顶部列出“跳过链接”的列表，链接到页面的主要部分，如导航、内容等。将它们放置在页面之外，使它们在焦点上可见。这可以确保你的主链接出现在页面的最前面，并且对所有用户都有用。
  • 给你的出版商一种通过 CSS 隐藏内容的方法(见下一节),这样看似“阅读更多”的链接实际上可以对屏幕阅读器用户说“阅读更多关于 XYZ 的故事”。
  • 当以不寻常的形式显示文本时(例如，全部大写)，通过text-transform CSS 属性进行这种转换，因为屏幕阅读器可能会以不可预知的方式读取大写的 HTML 文本，比如将它们拼写出来或大声喊出来。
  • 屏幕阅读器通常不会读出通过 CSS 插入的内容，所以要确保你以这种方式添加的内容纯粹是装饰性的。

所有这些技术将有助于你的屏幕阅读器用户，也有助于搜索引擎和未来其他意想不到的设备的用户！要做一个基本的测试，试着关闭你的 CSS 并验证内容仍然有意义。然而，我们不能低估使用屏幕阅读器的价值；你会遇到的一些问题是如此容易解决，如此明显，你会踢自己，你的用户会喜欢你解决它们。

speech和(已弃用)aural媒体类型旨在帮助您将 CSS 明确定位于屏幕阅读器。我们建议您避免这种技术有三个原因。

  • 这些媒体类型没有得到屏幕阅读器的广泛支持。不能保证它们会被应用。此外，这些样式表将由非屏幕阅读器设备下载，无论如何都会导致性能下降。
  • 他们给我们的额外 CSS 功能，比如改变声音、音量、暂停和混音，都有可能覆盖用户的设置。用户知道并已经设置了他们希望如何阅读他们的内容(相当于用户样式表)。我们不仅不知道这一点，我们当然没有资格做出比他们更好的决定。用户是对的，我们不是；我们不应该乱来。
  • 即使我们是这些技术的专家，我们所做的改变也是针对内容的。管理和维护这是一个不现实和令人生畏的前景。

我们最好在一个样式表中处理尽可能多的内容，除非在非常特殊和不可能的情况下。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 提示: WebAIM 对屏幕阅读器用户的偏好进行了一项调查，这在决定使用哪些默认设置进行测试时非常有价值。可以在[webaim.org/projects/screenreadersurvey/](http://webaim.org/projects/screenreadersurvey/)看。

用 CSS 隐藏内容

通常我们会使用 CSS 属性，如display、visibility,或text-indent，将 HTML 元素从页面的视觉表现中隐藏起来。例如，如果我们用一个图像替换一个标题，我们可以使用类似下面的代码:

h2 {    background: url(img/heading.png) no-repeat;    text-indent: -9999px; }

通过这样做，原始文本被移动到远离页面中心的位置，以至于现在看不见了，取而代之的是我们看到的预期背景，它通常包含以自定义的非 web 安全字体设置的文本。 9

另一种常见的情况是标记，如下所示:

<a href="page.html">Read more</a>.

用于访问链接列表的屏幕阅读器将简单地宣布“阅读更多”而没有上下文，通常在一个页面上多次。这对用户来说是非常令人沮丧的。10

为我们的发布者提供一个类可以很好地解决这个问题。下面是标记的另一个例子:

<a href="page.html">Read more <span class="accessible">about the exploding lemming epidemic</span></a>.

这是我们可以使用的 CSS:

.accessible {    position: absolute;    text-indent: -9999px; }

现在，虽然页面看起来和以前一模一样，但屏幕阅读器会读出“阅读更多关于爆发的旅鼠流行病的信息”，这与上下文无关。 11

尽管display:none或visibility:hidden看起来像是有效的解决方案——而且对于一些屏幕阅读器来说，只要文本出现在标记中，他们就会阅读它——但这并不适用于所有的屏幕阅读器。我们建议的text-indent是目前我们对这个问题的最佳解决方案。在禁用 CSS 的情况下访问页面的用户可能会看到略显冗长的文本，但这是一个可以接受的折衷方案。

一些 CSS 作者会使用-10000em 这样的值。我们推荐-9999px，因为屏幕空间不可能比这个更宽；ems 会招致浏览器的计算，从而导致(无可否认是微小的)性能损失，并且它会节省一个字符。

再次，被浪费的链接搜索引擎会喜欢。

虽然写“点击此处阅读更多…”很有诱惑力，但你应该避免使用这种语言，因为它是鼠标专用的，用户可能使用键盘、触摸界面或其他输入设备。

仅使用键盘的用户

一些用户可能不具备使用鼠标的运动技能，或者可能就是没有机会使用鼠标。对于这些用户来说，为链接提供一个焦点状态是至关重要的，因为如果没有视觉指示，只使用键盘的用户很容易忘记选择了哪个链接。出于美观的原因，隐藏链接的轮廓可能很诱人，但是如果你这样做，请确保你提供了某种视觉替代。不要依赖悬停来访问内容或任何重要的东西，因为你不能保证用户将有一个悬停状态(例如，当使用触摸屏设备时)。

其他辅助器具

用户可以使用许多其他设备来提高互联网的可访问性:

  • 滚珠鼠标
  • 自适应键盘
  • 粘滞键
  • 眼球追踪
  • 语音导航

同样，这些设备寻求自己解决问题。如果你遵循本章概述的最佳实践，你将尽最大努力摆脱他们的方式，让他们继续做下去。

设计和布局

许多关于创建可访问网站的 CSS 建议是在信息架构、规划、内容创建和设计阶段决定的副产品。调色板和布局通常不是开发人员的责任，而是设计师或设计团队的责任。

这意味着参与创建和维护网站的每个人都应该接受某种程度的无障碍培训。尽管在理想情况下，所有相关方之间应该有一个持续的通信流，但是开发人员最终将实现已经签署的任何设计，或者基于组织的其他部分创建的指导原则来构建页面。

作为一名了解可访问性最佳实践和 web 标准的开发人员，您应该始终努力指出用户体验、内容或设计中可以改进的地方，目标是让尽可能多的人可以访问内容。

颜色

易访问性始于你所构建的基础(标记你的内容的 HTML ),但也进一步发展到你在网站上使用的颜色，甚至它的行为。

色觉障碍不一定意味着用户视力不佳或色盲(仅举几个例子)，可能只是因为用户访问你的网站时使用的屏幕没有设计者设计的屏幕校准好或昂贵，你用来表达简单文本和链接之间的区别的几乎不明显的灰色阴影可能变得难以察觉——对用户来说，你的链接是看不见的。

作为一个基本准则，你应该始终确保背景和前景之间有足够的对比度。还要记住，有些用户更喜欢低对比度的配色方案(以及其他对比度非常高的配色方案，如黑色上的石灰或黄色文本)。虽然你不可能提供所有的选择，但是你应该让你的用户尽可能容易地将你的网站颜色设置成他们最舒服的颜色。

如前所述，这是一个始于设计师之手的过程，但也可以在实现阶段进行检查。

除了通过颜色区分链接(有足够的对比度)之外，通过形状将链接与文本的其余部分区分开来(例如，将链接加粗或加下划线，这是公认的链接样式)可以帮助色盲用户轻松地将链接与文本的其余部分区分开来。更进一步，你可以给链接添加底部边框，而不是默认的文本下划线，这样会使文本更难阅读，因为它会跨越下行线(像 j 或 g 这样的字母都有下行线)。您还需要一点填充，以确保文本和下划线之间存在间隙。为此，您可以使用以下 CSS:

a {  text-decoration: none;  padding-bottom: 2px;  border-bottom: 1px solid #333333; }

在前面的例子中，我们只包含了通用的a元素选择器，但是你应该确保你有不同的风格用于访问、悬停、活动和聚焦的链接。 12

完整的默认链接样式可能如下所示:

a, a:link {  color: #333333;  text-decoration: none;  padding-bottom: 2px;  border-bottom: 1px solid #333333; } a:visited {  color: #6e5252; border-bottom-color: #6e5252; } a:hover, a:active, a:focus {  color: #e89121; border-bottom-color: #e89121; }

正如我们已经强调的，确保你的链接有一个被聚焦的视觉指示是至关重要的，因为键盘用户很容易忘记他们在页面中的位置。

这些选择器的顺序是否正确也是非常重要的。我们来看看为什么。这些是伪类选择器；:link(未访问)和:visited伪类互斥，而:hover、:active、:focus不互斥(可以相互配合使用，甚至可以与:link、:visited配合使用)。前面代码片段中的所有选择器(除了a选择器，它更少)都具有 0，0，1，1 的特异性(一个元素选择器和一个伪类选择器——你可以阅读第三章了解更多关于特异性的细节)，这意味着任何一个选择器都可以通过在代码中排在最后来覆盖所有其他选择器。知道了这一点，我们在其他状态之前定义了:link和:visited状态——如果它们是最后定义的，我们将永远看不到其他状态，因为它们将被未访问或已访问的状态覆盖。

从版本 8 开始，Internet Explorer 仅支持 focus 伪类。

网上有几个工具可以帮助你通过有视觉障碍的人的眼睛来看你的网站:

  • 色彩对比检查:原创工具之一，来自 Jonathan Snook ( [snook.ca/technical/colour_contrast/colour.html](http://snook.ca/technical/colour_contrast/colour.html))。它可能不是最漂亮的，但它非常适合测试基本的配色方案和对比度。
  • 配色方案设计师:这个工具可以让你根据色盲的不同程度来验证调色板([colorschemedesigner.com/](http://colorschemedesigner.com/))。您可以轻松地将结果导出为各种有用的格式，如 HTML 和 CSS 或 XML。
  • 色盲先知:这款色盲模拟器可以在 Windows、Linux 和 Mac 上工作；它的工作原理是对屏幕应用滤镜([colororacle.cartography.ch/index.html](http://colororacle.cartography.ch/index.html))。
  • Sim Daltonist 是一个 Mac 专用色盲模拟器([michelf.com/projects/sim-daltonism/](http://michelf.com/projects/sim-daltonism/))。它在一个单独的窗口中工作，显示由几种不同的色盲类型过滤的屏幕区域。您可以用不同的过滤器同时打开多个窗口。
  • Contrast-A :这个 Flash 工具根据 W3C 的亮度、颜色和亮度指南([www.dasplankton.de/ContrastA/](http://www.dasplankton.de/ContrastA/))检查背景和前景颜色的特定组合。
  • GrayBit : GrayBit 将整页转换成它的灰度版本([graybit.com/](http://graybit.com/))。
  • 检查我的颜色:这个工具根据 W3C 的指导方针([www.checkmycolours.com/](http://www.checkmycolours.com/))检查网站元素的前景和背景颜色组合的亮度对比度、亮度差和色差。它还允许您直接在网站上选择通过验证的新颜色。

但是，当你测试网站的颜色对比时，看到一长串错误时，不要惊慌。这并不意味着你所有的内容都是不可访问的；你可以选择留下没有足够对比度的区域，但也不要保留内容。

当比较颜色对比度时，指定的阈值可能对您的设计人员来说过于严格和不切实际。相反，目标是至少 125 亮度差和至少 400 色差。

虽然这与用真实用户测试网站的可访问性并体验他的困难不同，但使用这些工具检查颜色对比不佳的情况会让你离迎合尽可能多的受众更近一步。想象一下一个色盲用户在面对一个对比度差的导航时会有多沮丧！如果他不能阅读文本，他将如何在你的网站上找到任何东西？

BBC 的无障碍网站(见图 6-4 )使用一个叫做 Barlesque 的系统来处理用户的颜色问题。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 6-4。*英国广播公司的无障碍网站

该页面包括一个小面板，允许用户更改字体大小(遗憾的是，只有两个步骤可用，并且都高于默认设置，但这可以在浏览器首选项中轻松设置)和配色方案。除了默认配色方案之外，还有全蓝色配色方案(针对色盲用户)、高可见度配色方案(针对视力不好的用户)和柔和配色方案(针对眼睛疲劳的用户)的选项。这些设置通过动态样式表(详见第九章)和自定义图像路径保存并应用于网站。虽然这些设置曾经适用于 BBC 的许多使用“BBC Barlesque”模板的网站，但这种方法似乎已经失宠了。这是一个很大的遗憾，因为它提供了一个处理这些配色方案的最佳方式的奇妙演示，尽管管理它们是困难的。

用户样式表和替代样式表(在本章后面会讲到)仍然可以达到同样的效果。

字体和单位

现代浏览器具有内置的页面缩放功能，可以放大整个页面，包括字体、图像、布局元素等等。但这并不是让我们不必处理老浏览器中永恒的字体缩放问题的灵丹妙药，尤其是在处理高流量网站时，使用 Internet Explorer 6 的 5%的访问者可能意味着超过 50，000 名访问者和潜在客户。缩放页面也有负面影响，比如水平滚动和内容不清晰(尽管目的正好相反)。

还有一种替代方法(很多人都在使用):只缩放文本。我们来看一个对比。图 6-5 显示了雅虎上的一篇新闻文章。，使用默认的整页缩放将它放大了一步:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 6-5。*一个雅虎！新闻文章，放大一步

图 6-6 显示了同一篇文章，在仅启用缩放文本的情况下放大了一步:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 6-6。*一个雅虎！新闻文章放大一步，仅启用缩放文本

如您所见，第一种方法立即引入了水平滚动，并开始在屏幕右侧裁剪内容。第二种方法将文本缩放了相同的级别，但保持了布局，同时也避免了图像的像素化。如果你的用户更喜欢使用默认方法，这没有问题:他们已经习惯了，你的网站很可能会像其他人的一样。但是，如果他们选择只缩放文本(或者有一个只支持这种方法的浏览器)，你应该迎合他们。你可以通过努力使用相对字体大小来做到这一点。

因为 em 是一个依赖于字体大小的单位，使用缩放文本仅更改页面上的字体大小将影响使用 ems 调整大小的所有元素，而不仅仅是文本。在为 IE 6 开发时，在 ems 中调整所有内容的大小可能会很有诱惑力，这样 IE 6 就会表现出与其他浏览器的默认缩放行为相同的缩放行为(缩放整个页面)。然而，这种选择会阻止用户仅缩放文本，因此这是一种不可实现的技术。

对于固定大小的元素，如图像，像素是最明智的选择。旧的浏览器将不能缩放它们，新的浏览器将与页面的其他部分成比例缩放它们。无论哪种方式，图像都会像素化，但文本通常是内容中最重要的部分。

对于取决于视口或其容器大小的液体宽度或尺寸，百分比是最适合使用的单位。当您调整窗口大小时，或者通过其他方式修改窗口或父元素的尺寸时，这些大小可以动态变化。

患有学习障碍(如诵读困难)的用户可能会发现阅读特定字体的文本集更容易。没有一个规则可以遵循，以满足每种情况，因为一些人更喜欢阅读无衬线字体，其他人发现阅读衬线字体更容易，一些人甚至更喜欢特定的字体，如 Comic Sans。不过，我们不建议你在网站上使用漫画字体，甚至不建议你限制自己只使用某些已被证明是许多诵读困难者喜欢的字体。这里要记住的重要一点是，你的网站构建得越灵活，尽可能避免图片替换和尝试使用纯文本(即使这有时意味着在某些层面上牺牲设计)将使用户更容易以他们想要的方式浏览你的网站。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **提示:**记住，当用户在他们的电脑上、在他们的浏览器上、在他们的时间里访问你的网站时，你的网站不再是为你的，而是为他们的。它运行在他们的硬件上，他们可以用它做他们想做的事情。

你的网站应该通过文本增长测试。增加或减少一个或两个尺寸(或步长)的文本大小对您的布局来说应该不是问题。

网络字体和阅读障碍

使用 font-face 服务的一个常见问题(在第五章中有更详细的介绍)是页面在一些浏览器中从页面还没有加载嵌入字体到完全加载时会出现闪烁的非样式文本(FOUT)。对于阅读障碍者来说，这种行为会使页面无法阅读，因为他们喜欢布局的一致性，其中元素在网站的所有页面上都保持相同的位置；突然的变化(比如一个闪烁的悬停行为)会让用户很难理解和理解内容。

尝试最小化这个问题的一个简单方法是遵循第五章中提到的建议:确保在下载首选字体之前，浏览器将呈现的备用字体在纵横比上尽可能接近嵌入字体。这将使跳跃不那么显眼或者(理想情况下)不容易被注意到。

您也可以使用替代样式表(在本章后面的“样式转换器”部分中讨论)来禁用不和谐的动画或交互行为。

用户定制

用户样式表(在第三章中提到)可以在帮助残疾用户调整网站以适应他们的需求方面发挥重要作用。确保你的(作者)样式表容易被覆盖(主要是通过没有复杂和过于具体的选择器，并避免使用!important关键字)，这将使这些用户的生活容易得多。

为了让用户更容易地定制您的站点，您可以做的另一件事是以 body 类或 id 的形式提供钩子，用户可以在他们的样式表上使用它们。例如，如果您向页面的body元素添加两个类(一个是站点范围的，另一个是特定于页面的)，用户创建只影响您的站点或他们有特殊问题(或经常访问)的特定页面(或部分)的规则会容易得多。

让一个用户为你的网站创建一个用户样式表并不意味着你不能确保你的网站是可访问的。不可能考虑到所有可能的情况。只要确保有足够灵活的 CSS，以便不使这项任务对用户来说更加困难。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **提示:**如果一个用户不厌其烦地为你的网站创建或安装一个用户样式表，这意味着他们是一个回头客和忠诚的访问者和/或客户，他们为使用你的网站付出了相当大的努力。你想让他们的体验尽可能顺畅无阻。

风格转换者

替代样式表可以用简单的link标签来放置。存在三种不同类型的样式表:持久、首选和替代。持久样式表简单地使用带有“stylesheet”的rel属性的link标签，没有标题，就像这样:

<link rel="stylesheet" href="persistent.css" />

如果用户选择一个替代样式表，持久样式表将不会被替换。首选样式表看起来一样，但带有一个title标签:

<link rel="stylesheet" href="preferred.css" title="Basic" />

您可以通过给几个首选样式表赋予相同的标题来将它们组合在一起:

`

`

备选样式表将完全替换首选样式表。它们以与首选样式表完全相同的方式被包含，但是具有“alternate stylesheet”的rel属性。同样，您可以通过复制标题对多个文件进行分组:

`

`

然后，用户可以在浏览器中切换样式表(参见图 6-7 和图 6-8)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 6-7。*火狐浏览器中的风格切换器

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

***图 6-8。*歌剧中的风格转换者

不幸的是，这种完美的技术有两个主要的注意事项:

  • 尽管已经存在了十多年，浏览器对这一特性的支持仍然不足。在撰写本文时，Opera 和 Firefox 是唯一支持替代样式表的主流浏览器厂商。
  • 在这两个浏览器中，没有一个保存用户对每个站点的偏好；用户的选择不会持久。 13

要提供真正的替代样式表的功能，并将其作为网站工具的一部分，允许用户选择，例如，高可见性的配色方案，您需要编写自己的代码。这需要 JavaScript，但实现起来相当简单。

请注意，无论是否应用，这些样式表仍然会下载。因此，除了专门针对有缺陷的用户的网站，替代样式表可以帮助他们，通常更好的方法是简单地确保用户可以通过他们认为最好的任何方式轻松地覆盖您的样式。

围空

WAI-ARIA 代表网页可访问性倡议——可访问的富互联网应用程序。该规范的目标是使残疾用户更容易访问 Web 内容和应用程序。根据 W3C 网站([www.w3.org/WAI/intro/aria](http://www.w3.org/WAI/intro/aria))，“它特别有助于动态内容和高级用户界面控制”，否则这些用户将无法使用。例如，对于简单的 HTML，当前没有一致的、可靠的方式来警告使用屏幕阅读器的用户页面的某个区域已经被刷新并且其内容已经被更新。

使用 ARIA，您还可以将页面区域标记为部分，以便用户可以在部分之间切换，而不是通过每个不同的链接。

ARIA 增加了对以下内容的支持:

  • 描述小部件类型(例如，“combobox”)或页面结构(例如，“banner”)的角色
  • 描述状态(例如，“checked”)或可能遭受更新的活动区域的属性
  • 小部件和事件的键盘导航

目前 ARIA 更广泛实现的一个大障碍是缺乏特性检测:没有办法检测浏览器或辅助技术中的 ARIA 支持。

由于 WAI-ARIA 是一种 HTML 技术，我们在这里就不赘述了。在撰写本报告时，WAI-ARIA 规范正处于候选人推荐阶段，可在[www.w3.org/TR/wai-aria/](http://www.w3.org/TR/wai-aria/) 14 找到。

设备和环境损害

一种经常被忽视的损伤是设备的损伤。用户可能有一台慢速计算机、没有鼠标、慢速互联网连接、阻止某些类型内容的防火墙等等。一个比开发人员想象的更常见的场景是当用户打开 CSS 但关闭图像浏览我们的网站。发生这种情况的主要原因是互联网连接速度慢。这可能是一个暂时的问题，例如在外部技术人员或内部 It 团队解决问题之前连接出现故障，或者用户可能正在从移动设备访问您的网站——这是发展中国家的常见情况，在这些国家，互联网访问往往很慢，接收数据的成本很高。不管这种情况是短暂的还是永久的，它都会发生，访问没有为此做好准备的网站，即使是在基础水平上，也是一种令人沮丧的经历。

Firefox 的扩展增加了这一功能。

你可以通过属性选择器将 WAI-ARIA 中的属性用于语义样式挂钩。但是请记住，这是一个较慢的选择器，并不是所有的浏览器都支持。

渐进增强(下一节将详细介绍)可以解决大多数问题，但不是万灵药。如果你已经建立了一个只有标记看起来不错的网站，那么你已经成功了。如果您随后只在启用 CSS 的情况下进行测试，这将暴露您可能会忽略的问题，比如背景图像下缺少背景颜色或背景颜色不合适。 十五

在第八章中，我们将演示如何拦截请求并修改它们，例如模拟慢速连接。尽可能多的测试所有的东西，并以渐进的增强为目标，而不是优雅的退化。那些是什么？你问这个真有趣…

渐进增强还是优雅退化？

渐进增强和优雅降级是看待同一个问题的两种方式:如何处理不支持我们已经使用的功能的浏览器。

用渐进增强，你从最小公分母开始；你首先要让网站为每个人服务。这意味着良好的语义、合理的内容排序、没有 CSS、没有图像、没有 JavaScript 等等。您的标记本身应该工作良好。然后添加这些层，这样，如果由于某种原因其中一层出现故障或不受支持，站点内容仍然可以以合理的方式使用。显然，这是一种可行的方法——我们确保尽可能满足最广泛的受众，不遗漏任何人。

优雅的退化与此相反。我们同时构建所有的层，为大多数人，但不是所有人，带来了很好的用户体验。然后，我们确保当它失败时，它以合理的方式失败，并且我们仍然可以访问我们的内容。这可能意味着构建页面的替代版本，或者就如何解决用户可能遇到的任何问题提出警告或指导。优雅降级的一些很好的例子可能是图像的alt属性或者没有启用 JavaScript 的浏览器的noscript标签。优雅的降级总比什么都不做好，但是实现降级意味着(在我们看来)你的优先级错了。通常，较低层次的潜在失败被忽视、忽略或遗忘；事后实现的成本更高。这也意味着我们已经定义了我们的最高水平——我们从那里开始，一路向下，当新技术被广泛接受时，我们几乎没有空间去接受它们。

另一方面，渐进式改进使我们不可能将设备受损的用户抛在后面。一切都是建立在底层之上的，所以它们是实现我们希望大多数用户会使用的全功能网站的关键。因为我们的顶层是建立在一个坚实的基础上的，所以很容易在以后的日子里加入更新、更聪明的东西，并对我们没有排斥任何现有的用户群感到安全。

渐进增强最好的例子就是 CSS 本身。它位于我们的标记之上，并对其进行了改进。我们可以进一步增强 CSS3 和实验功能，使用媒体查询来确保我们不会破坏其他人的体验。然后，我们可以在其上放置 JavaScript，以此类推。

优雅的退化似乎是最快的发展选择，而且是在短期内。我们可以快速构建最高水平的体验，并从那里开始工作。然而，增加较低的水平消耗了时间。渐进式增强需要更多的前期考虑，但会带来更健壮的技术解决方案。然而，也有例外。我们知道预算不是无限的，试图为每个人服务并不总是符合您组织的财务利益。在这种情况下，我们建议您尽最大努力利用现有资源，使用您的报告工具针对您最常见的用户统计数据。此外，临时性的网站(如短期促销网站或季节性活动网站)不太可能在线很长时间后就会被永远丢弃。在这种情况下，渐进式改进的投资回报率(ROI)可能会很低，我们不建议您在将被丢弃的东西上投入太多时间。在这种情况下，优雅地降级(或者简单地优雅地失败)可能是一个更可行的选择。

这样做的一个附带好处是，当图像加载时，用户会感觉不那么不舒服。

雅虎！分级浏览器支持(GBS)方法(在本章的下一节中有更详细的解释)更倾向于渐进增强而不是适度降级，因为它“将内容置于中心，并允许大多数浏览器接收更多内容(并向用户显示更多内容)”，而后者“优先显示，并允许不太广泛使用的浏览器接收更少内容(并向用户提供更少内容)”([developer.yahoo.com/yui/articles/gbs/](http://developer.yahoo.com/yui/articles/gbs/))。

【CSS3 会有害吗？

CSS3 和 HTML5 一样，是网络行业最新的流行词汇。这意味着许多开发人员没有考虑到他们行为的潜在后果就跳了进去。使用 CSS3 会导致网站无法访问，这一点非常明显:

  • 辅助设备可能看不到::before和::after等伪元素。用它们做装饰，不要做重要内容。 16
  • 与纯色相比，渐变会使颜色可见性问题更加复杂。
  • 对关键功能使用过渡、变换和动画可能会使不支持这些功能的浏览器的用户无法使用这些功能。

处理这些问题的最好方法是理解我们在本章中解释的潜在问题。请记住，尽可能逐步增强，并为这些功能可能不受支持的情况提供后备。注意一些新技术可能带来的颜色可访问性问题，并尝试提供替代样式表。将过渡、变换和动画用作装饰效果，而不是重要功能。

这主要是常识。记住要在老版本的浏览器中测试，并预先解决用户将会遇到的问题。渐进增强是你的朋友。

分级浏览器支持(GBS)

2006 年，雅虎！发表了由(当时的)高级前端工程师 Nate Koechley 开发的 GBS 方法。GBS 将浏览器分为三个不同的支持级别:A 级、C 级和 X 级。所谓的支持并不意味着某些浏览器将被锁定在内容之外，而是提供不同的体验，同时仍然能够完全访问它。让我们看看每一个不同的等级实际上意味着什么:

  • A 级是最高支持级别。该组中的浏览器将获得完整的视觉和功能体验，并被列入白名单。所有的 A 级浏览器都应该被测试，任何错误都被标记为高优先级。该列表中的浏览器包括(除其他外):Safari 5；Chrome 最新稳定版；火狐 3.6；而 IE 6 到 8。
  • C 级浏览器只呈现 HTML。这些都是功能较弱的老浏览器(只代表很小一部分用户)。应该忽略样式和行为，只测试一小部分浏览器样本(或者使用禁用 CSS 和 JavaScript 的现代浏览器)，但是 bug 也应该得到高优先级。此支持级别的网站被列入黑名单。此列表(在撰写本文时处于草案中)包括低于 6 的 Internet Explorer 版本(包括 Mac OS 版本)；低于 3 的 Safari 和 Firefox 版本；低于 9.5 的 Opera 版本；低于 8 的 Netscape 版本。预计 2011 年第一季度，IE 6 将下调至 C 级支持级别。
  • X 级包括边缘浏览器。这些是罕见的或模糊的浏览器，不再被开发的浏览器，或全新的(未经测试的)浏览器；它们将和 A 级浏览器一样强大。然而，与 A 级浏览器不同，X 级浏览器没有经过测试，也没有针对它们的错误记录。

16 严格来说，这些伪元素在 CSS2.1 中是作为:before和:after引入的。

所有浏览器都属于三个支持级别之一，因此不存在“不支持”的浏览器，因为内容对所有人都可用。雅虎！must 佩奇说“在现代网络开发中，我们必须支持所有的浏览器。选择排除一部分用户是不合适的，并且，对于‘分级浏览器支持’策略来说，是不必要的”([developer.yahoo.com/yui/articles/gbs/](http://developer.yahoo.com/yui/articles/gbs/))。它还说(我们也同意)“期望两个使用不同浏览器软件的用户有相同的体验是没有拥抱或承认网络的异质性本质。”

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 提示: jQuery Mobile 有自己的 GBS ( [jquerymobile.com/gbs/](http://jquerymobile.com/gbs/))，这是一个关于移动浏览器及其各自可能的功能的有用指南。

虽然采用了雅虎！GBS 逐字逐句是一个简单而合理的策略来选择你应该支持哪些浏览器，它更有意义的使用它作为一个基础，并参考您的报告工具，以确保 GBS 匹配你的实际流量。如果不符合，就修改。当在您的组织内提出 bug 时，您应该使用 GBS 图来确定问题的严重性，从而确定修复这些 bug 的重要性。使用一致的方法来提出 bug 并测量它们的严重性将导致最重要的 bug 首先被修复，并且每个测试人员以更准确和可预测的方式提出 bug。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 **提示:**如前所述，SEERS ( [zeroedandnoughted.com/standardised-bug-reporting-with-seers/](http://zeroedandnoughted.com/standardised-bug-reporting-with-seers/))是 Antony 创建并倡导的一种方法，旨在为基于浏览器的 bug 测试创建一个标准。利用 GBS 是这个过程的关键。

总结

不可能考虑到你的访问者可能遇到的每一个可访问性问题，不管是暂时的还是永久的。正因为如此，你需要让你的网站具有灵活性，易于被所有人调整和阅读——这是你的网站，但它是你的访问者的浏览器，他应该拥有最终决定权。

重要的是不要将此视为团队的负担。此外，您不应该将此视为发展中的一个步骤。可访问性的考虑应该经常出现在你的团队的脑海中，并且应该始终是一个关注点。通过使你的网站更容易访问，你将确保尽可能多的人可以访问你的内容和/或购买你的产品，而不会感到沮丧，转向你的竞争对手。

这些简单的技巧也会让你的网站更加灵活和易于维护(例如，想想使用图像替换会带来的麻烦)。因此，你也将拥有搜索引擎更友好的网站。

这里要传达的最重要的一点是，每个用户、浏览器或设备都应该能够访问您的内容和服务，无论其功能或环境如何。

在下一章，我们将讨论许多可以解析和呈现 CSS 的设备。我们将研究这些编码的一些限制和性能含义，以及如何针对媒体类型和媒体查询进行编码。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值