CSS-高流量网站高级教程-四-CSS 高流量网站高级教程（四）十、测试和调试所以，你已经建立并运行了你的网站，你已

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

原文：Pro CSS for High Traffic Websites

协议：CC BY-NC-SA 4.0

十、测试和调试

所以，你已经建立并运行了你的网站，你已经写好了你的 CSS，所有的事情第一次都完全正确，对吗？不太可能。对于任何类型的脚本或编程，在达到目标的过程中都有一定程度的尝试和错误。这同样适用于 CSS。编写 CSS 时，开发人员通常在代码和浏览器之间来回切换，编写或修改代码，并刷新以检查结果。如果中间有任何更复杂的步骤——构建、上传、编译等等——开发人员的生产力会受到每次编辑的影响。

一旦代码完成，有必要确保它在网站支持的所有浏览器中都能正常工作。像这样的测试需要时间和精力——CSS 经常影响网站的很大一部分——所有可能受到影响的东西都必须测试。

无论何时发现问题或错误，都需要快速修复，并在最小影响和最大信心的情况下，确保它们不会在网站的其余部分引发新问题(或重现旧问题)。

本章将关注帮助你以最有效的方式实现这一切的工具和方法。我们将讨论的许多工具都有我们不会提及的功能，因为它对 JavaScript 或服务器端开发人员更有用；我们将关注 CSS 开发人员感兴趣的部分。您将了解以下内容:

高效快速发展
创建“调试模式”
调试和工具
自动化测试
本地手动测试

快速发展

当您开始从事 web 开发时，您倾向于从事小型静态项目。这类网站在你电脑上的文件夹中运行得和在互联网上的服务器上运行得一样好。开发简单快捷，只需在编辑器和浏览器之间来回切换，无需担心外部依赖、第三方代码或其他开发人员和 CMS 对 CSS 的破坏。然而，在高流量网站的世界里，可以很有把握地假设您的开发实践受您的环境的影响要大得多。您的代码可能存在于多种环境中，并且需要额外的步骤来部署和测试您的代码。这违背了许多 CSS 开发人员的初衷，他们习惯于进行小的、迭代的更改，并频繁地测试这些更改。那么，如何才能找回自己如此热爱的快速开发周期和瞬间满足感呢？

第一步是找出影响你工作效率的事情。

构建连接 CSS 的脚本

如果您正在使用一个将多个 CSS 文件连接在一起的构建脚本——我们当然建议您这样做——这个过程可能需要一段时间，并且会造成障碍。当然，对于生产代码来说，这样做是正确的，但是对于开发环境来说，这样做的速度和性能增益可以忽略不计，因为您运行的服务器很可能与您的开发机器在同一个网络上。

一个好的解决方案是使用调试样式表。让我们假设构建脚本作为某种 shell 脚本运行，它包含了我们想要连接的所有文件。可能会有一个配置文件告诉 shell 脚本我们希望它加载哪些文件以及以什么顺序加载。我们得到的文件可能被称为“main.css”。不使用配置文件，您可以考虑使用 CSS 文件，因为您有@import 指令，它允许您使用多个文件实现相同的功能。如果您有一个名为“main-debug.css”的文件，它可能包含如下内容。

@import url(reset.css); @import url(global.css); @import url(login.css); @import url(feature.css);

使用一些巧妙的正则表达式，让我们的 shell 脚本读取这个文件并使用@import 指令构建“main.css”并不难。这给我们带来了两大好处:

文件列表只保存在一个地方。
您可以使用“main-debug.css”来模拟“main.css”的行为，但不需要运行构建脚本。

如果您随后修改页面以接受(例如)的 querystring？debugCSS=true，并使用该参数在包含的 CSS 的文件名中插入"-debug "，打开和关闭该行为变得很简单。现在很容易修改文件并立即看到结果。

构建压缩 CSS 的脚本

如果你遵循了我们的建议，你也在压缩你的 CSS。如果构建脚本将您的 CSS 压缩到一个名为“main.css”的结果文件中，就会出现与串联相同的问题。如果在文件名中使用“-debug”来命名原始文件，那么可以使用前面提到的 querystring 技巧来访问未压缩的文件。当然，如果您既要连接又要压缩，我们在上一节中提到的处理连接的 CSS 的方法在这种情况下同样适用。

不喜欢频繁刷新或超时的页面

如果您正在网站的某些部分工作，这些部分需要发布信息或具有安全连接，刷新这些页面可能会向您显示不同的内容或重定向到不同的页面。这意味着每次更改这些页面使用的 CSS 时，您都需要浏览回页面，可能需要再次登录或经历其他一些耗时的过程。

但是，有一些方法可以重新加载该页面的 CSS，而不需要重新加载页面的其余部分，假设 CSS 没有被 JavaScript 修改或者包含在页面本身中。如果您使用的是能够直接修改 HTML 的浏览器或具有相同功能的附加组件，如 Firebug、 ¹ ，您可以定位到外部文件的链接，并修改 URL 以包含具有唯一值的 querystring。例如，如果您的代码包含如下内容:

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

您可以将其修改如下:

<link rel="stylesheet" href="/css/main.css?12345" />

这应该会对文件提出新的请求。出于某种原因，您的 URL 可能已经包含查询字符串，例如:

<link rel="stylesheet" href="/css/main.css?hello=goodbye" />

然后，您只需要在它的末尾附加一个新参数来强制刷新并保持请求不被中断:

<link rel="stylesheet" href="/css/main.css?hello=goodbye&12345" />

但是，如果您继续使用这种方法，您附加的字符串将不会像您希望的那样唯一！无论你在键盘上敲击得多么随意，你都会很快地重复你自己，并开始从缓存中返回文件，而不是新的请求。为了解决这个问题，最好添加时间和日期，因为它们总是唯一的。不过，自己输入这些并不好玩，所以你可以使用 Firebug、Web Inspector、IE 开发工具或 Opera 蜻蜓中的控制台来运行一点 JavaScript 来为我们完成，就像这样:

var date = new Date().getTime(); var links = document.getElementsByTagName('link'); for (var i=0,j=links.length; i<j; i++){ var link = links[i]; link.href += (link.href.indexOf('?') == -1 ? '?' : '&')+date; };

该脚本将对它在页面上找到的每个link标签进行这些更改。也可以把它做成一个 bookmarklet，它是一小段代码，可以从浏览器(包括 IE)的收藏夹菜单中运行，以更友好、更快捷的方式实现同样的功能。

images **提示:**这段代码确实有一些局限性，但是 Antony 在[zeroedandnoughted.com/bookmarklet-to-de-cache-css-and-images-version-2/](http://zeroedandnoughted.com/bookmarklet-to-de-cache-css-and-images-version-2/)写了一个功能更全面的版本。他的版本也将刷新图像和背景图像，并在当前文档和其中的框架或 iframes 内工作，但目前不支持使用@import 指令的文件。

¹ Opera 允许你直接修改页面的源代码，然后从缓存中刷新。尽管使用起来不直观，但这种有用的行为是现成可用的。但是请注意，如果您直接从文件系统运行文件，它会修改文件本身。

缓存文件

由于在开发过程中缓存文件通常没有帮助，我们建议在开发时禁用浏览器中的缓存机制，但是在检查性能时不要忘记重新启用它。

网络浏览器的 bug

虽然不会严重影响您的工作效率，但在 Internet Explorer 中进行开发足以让大多数开发人员放弃，转而从事管道行业。我们建议首先在符合标准的浏览器中工作，然后再修复旧版本 IE 和其他浏览器中的所有问题。这能确保你快速到达一个好的工作点，并有助于保持你的理智。当然，了解您打算支持的浏览器的局限性会有所帮助，这样您就不会构建无法在其中正确显示的东西。我们将在第三章中详细讨论这一点。

调试

有时，您的代码会出现难以确定的问题。一个规则可能会覆盖另一个规则，或者包含的文件可能会影响到一些意想不到的事情。如果选择器似乎没有被应用，使用!important将背景颜色设置为红色、绿色或蓝色通常足以证明选择器正在工作， ² 但是如果它是您有问题的属性，解决起来不太可能这么简单。然而，有一些工具可以帮助我们解决这个问题。以下是一些内置于浏览器中或作为附加组件提供的工具列表。还有很多其他的。

Firebug(火狐)

Firebug 是第一个真正有用的前端 web 调试器。第一个公开版本(0.2)于 2006 年 1 月发布，此后突飞猛进，激励和推动浏览器厂商开发和提供自己的等效工具。因为 Firebug 是 Firefox 的一个扩展，所以有许多其他扩展插入其中，并进一步增强了它的功能，如监控 cookies、HTTP 头等的附加组件。尽管 Firebug(以及本章后面讨论的其他开发人员工具)提供了监控和调试前端 web 开发的所有方面的方法，但我们将集中讨论 CSS、HTML 和 HTTP 部分。

Firebug 可以“捕捉”到我们浏览器的主窗口，但是我们将在它的“弹出”窗口视图中查看它。首先是 HTML 视图(如图图 10-1 所示)。

使用彩色边框有相同的结果，但是修改了元素的大小和位置。

images

***图 10-1。*Firebug 的 HTML 视图

这个视图包含各种有用的信息和功能。在主窗口中，它显示当前页面的 HTML 文档，并允许您展开和收缩任何带有子节点的节点。该视图中的一些可能操作如下:

将鼠标悬停在某个元素上，将在页面中突出显示该元素。
将鼠标悬停在图像上，会在一个小窗口中显示图像及其尺寸(其他浏览器工具都不这样做)。
单击一个元素将选择该元素。
在工具栏中的编辑按钮旁边，所选元素的祖先显示为面包屑。单击其中任何一个都会高亮显示该父元素。
单击任何元素属性将允许您重命名该属性；单击任何属性值将允许您更改属性的值。
在编辑属性时按 Tab 键允许您循环到下一个属性名称或值(Shift-Tab 将循环到上一个)，当您到达该元素的最后一个值时，再次按 Tab 键将允许您输入新的属性和值。
单击文本节点将允许您修改该节点中的文本。

执行这些操作中的任何一个都会导致对文档对象模型(DOM)和页面的即时更改，您可以立即看到这些更改。

images **提示:**你也可以在网页中选择元素，右击它们，选择 Inspect Element(这将自动显示 Firebug)。或者，您可以单击 Firebug 徽标旁边的图标，然后单击元素——这很有用，因为当您将鼠标悬停在元素上时，它们周围会显示蓝色边框，这以快速的视觉方式展示了元素所占用的布局和空间。

点击工具栏中的编辑按钮将允许你在一个内置的简单文本编辑器中编辑该元素的 HTML(包括外部 HTML)整体(见图 10-2 )。同样，这些更改将立即生效。再次单击编辑按钮将返回到上一视图。

images

***图 10-2。*Firebug 的 HTML 视图中的编辑模式

在右侧，所有应用于高亮元素的作者 CSS 选择器被显示，从上到下递减。继承的值如下所示。每个规则旁边都有一个链接，指向声明它的样式表，行号显示在括号中。在以“Inherited from”开头的一行是一个链接——将鼠标悬停在该链接上将高亮显示页面中匹配的元素，单击它将在 Firebug 中高亮显示这些元素，并在 HTML 中将焦点切换到它们。

对于这些规则中的任何一个，您可以单击任何属性或属性值来更改它，并立即在页面中看到这些更改。当鼠标悬停在它们上方时，一个有一条线穿过的圆会显示在该属性的左侧；单击此处将禁用该规则的该属性。从规则的最后一个属性值中跳出来将允许您输入一个新的属性值，或者您可以双击选择器上的任意位置或属性旁边的任意位置来实现相同的目的。当输入新属性时，Firebug 会为您添加冒号和分号，所以省略它们，否则它们将被视为参数名或参数值的一部分。

在另一个更具体的选择器中被覆盖的任何属性都被直观地删除。

默认情况下，这个视图不显示用户代理 CSS(Firefox 本身应用的规则)。通过单击样式旁边的向下箭头，您可以选择显示它们，从而选择它们在层叠中的应用位置。用户代理 CSS 在规则旁边显示有红色的“”，以使区别更加明显。Computed 选项卡将显示应用于元素的任何 CSS 的计算值(例如，实际的像素字体大小)，分为文本、背景、框模型、布局和其他部分(你可以在第三章中阅读更多关于计算值的内容)。如果您想快速地将一个属性添加到一个元素中，您可以右键单击选择器并选择“编辑元素样式…”——这相当于将一个样式属性添加到元素中，当然，我们并不推荐这样做，但是这对快速测试很有用。

images **提示:**通过点击活动标签旁边的向下箭头，可以在 Firebug 中访问其他有用的选项，例如查看和编辑方法:悬停或:链接的活动状态，否则很难访问这些选项。

布局选项卡显示所选元素的大小、填充、边框和边距，以及位置和z-index(参见图 10-3 )。将鼠标悬停在其中任何一个值上都会在页面中直观地显示出来，单击其中任何一个值都可以让您编辑它们并立即看到变化。这些更改将只影响所选的元素，因为它们将在 HTML 中的元素上显示为内联样式。

images

***图 10-3。*Firebug 的 HTML 视图中的布局标签

images **提示:**在 Firebug 中，任何时候你发现自己在修改一个数值，你都可以使用键盘上的向上和向下键快速递增和递减整数中的值(一次一个整数)，同时保持单位值(px 或 em)。

我们将忽略 DOM 选项卡，因为它主要关注 JavaScript。

CSS 视图显示每个 CSS 文件的全部内容，并且可以像 HTML 视图中的样式侧栏一样进行编辑(见图 10-4 )。它还包括一个使用内置文本编辑器的编辑按钮。在这个视图中，选择器也是可编辑的，这在 HTML 视图中是没有的。这种视图作为整个文件的整体视图是很有用的，但是 HTML 视图通常更有用。

images

***图 10-4。*Firebug 的 CSS 视图

Net 视图显示请求当前页面时加载的所有资源。这里提供了丰富的信息(见图 10-5 )。在一行级别上，您可以看到任何花费了异常长的时间来加载和阻塞其他资源的资源。您可以使用顶部的按钮根据文件类型进行过滤(显然，作为一名 CSS 开发人员，您最感兴趣的是完整视图，或者是深入查看 CSS 和图像)。

images

***图 10-5。*萤火虫的网景

将鼠标悬停在某个资源的任何时间线上(参见图 10-6 )会显示该特定请求的更多细节(这在第八章中有详细介绍)。有时，此视图会在发送前显示阻塞(或在旧版本中显示排队)，这意味着浏览器已经用完了与该域的所有可用同时连接，并且正在等待其他资源下载，然后再下载该文件。这些细节对于发现哪些因素导致你的网站表现不佳是非常宝贵的。

images

***图 10-6。*悬停在 Firebug 网络视图中的时间线上

展开任何资源项目都会显示该特定请求的更多细节(参见图 10-7 )。第一个选项卡 Params 显示了任何发布的信息，或者作为查询字符串包含在请求中的信息。第二个选项卡显示 HTTP 标头，这些标头对于以下用途很有用:

定位缓存头以确保它们正常工作
检查随请求发送的任何 cookies，这是 CSS 文件的一个性能问题，应该避免
检查响应是否被压缩(内容编码)，这是一种性能增强

images

***图 10-7。*在 Firebug 的网络视图中查看请求的详细信息

其余的选项卡以不同的形式向我们展示了实际的响应。

你可以从[getfirebug.com/](http://getfirebug.com/)获得 Firefox 的 Firebug。尽管它是跨平台的，可以在 Windows、OS X 和 Linux 上运行，但目前它只适用于这些操作系统上的 Firefox。Firebug 的跨浏览器版本正在开发中，计划在 2011 年发布。

一个名为 Firebug Lite 的 Firebug 版本可以在[getfirebug.com/firebuglite](http://getfirebug.com/firebuglite),获得，它可以通过一个 bookmarklet 访问，在其他浏览器中提供许多与 Firebug 相同的功能，最明显的省略是 Net 选项卡。

Firebug 的一些最佳可用扩展(可能会使 Firefox 不太稳定)有:

用于管理 cookie 的 Firecookie
Firediff 来查看在 Firebug 中对页面所做的更改
查看输入的 CSS 选择器(或 XPath 表达式)会选择哪些元素
Codeburner 显示 HTML 和 CSS 的参考资料
像素完美地覆盖图像，以帮助元素与所提供的屏幕图像对齐
使用 CSS 来隔离未使用的选择器
YSlow 提供关于如何提高页面性能的建议

因为这个列表中的许多其他工具基本上都是模仿 Firebug 的，所以我们将只详细讨论它们的功能差异。

网络开发人员(火狐或 Chrome)

尽管 Web Developer ( [chrispederick.com/work/web-developer/](http://chrispederick.com/work/web-developer/))本质上并不是 Firebug 或调试工具的竞争对手，但它提供了一些额外的功能，值得一提(参见图 10-8 )。

images

***图 10-8。*Firefox 中的 Web 开发者扩展

快速禁用/启用缓存、JavaScript、cookies、CSS 和图像的能力通常证明了自己是一个有价值的时间节省者。方便地验证 CSS 和 HTML 是有用的，在预定义的窗口大小之间切换以测试多种分辨率也是提高生产率和节省时间的有效方法。

开发者工具(Internet Explorer 8)

Internet Explorer 8 提供了开发者工具，以努力使浏览器在调试方面达到标准。从视觉上看，它旨在模仿 Firebug，但可用的功能确实不同。它也可以停靠在主窗口上，或者有自己的窗口。

Developer Tools 包含了几个 Firebug 没有的功能，事实上它在模仿 Firebug 和 Web Developer 的功能方面走得很远。JS、CSS 和 images 的禁用/启用只需两次点击；缓存和 cookies 也是如此。验证 HTML 和 CSS 很容易，您可以生成一个“图像报告”——当前页面上所有图像及其各自文件大小、尺寸、alt属性等的列表——这对 SEO 和可访问性非常有用。

图 10-9 到 10-11 是在一台 Windows XP 机器上拍摄的，被置于“丑陋模式”(所有闪亮的塑料都被关闭)以使它稍微快一点。除此之外，它们应该与你的经历相符。

HTML 标签的左窗格(见图 10-9 )类似于 Firebug 的，但是没有添加新属性的能力。要添加新的属性，需要使用右窗格中的属性选项卡，以及自动完成条目的下拉菜单。可以在内置的文本编辑器中编辑 HTML，但不能编辑单个的片段或元素。同样，编辑过的 HTML 只是在body标签里面的 HTML 除此之外，不可能编辑任何 HTML。

images

***图 10-9。*Internet Explorer 8 开发者工具的 HTML 视图

右窗格的 Style 选项卡中的规则可以扩展和收缩，但是选择器本身不能编辑，这反映了 Firebug 的行为。在这个视图中可以启用/禁用整个选择器(在 Firebug 中不能)以及单个属性。无法在此视图中添加新的属性/值。

“跟踪样式”面板显示应用于当前元素的所有 CSS 的结果，不包括选择器(所有非默认属性)。

布局面板的行为与 Firebug 完全一样，但是没有有用的悬停行为(见图 10-10 )。您可以单击来编辑大多数值。它还显示偏移值(Firebug 没有)，这可能对您有用。

images

***图 10-10。*ie 8 开发者工具 HTML 视图的布局标签

CSS 标签几乎完全模仿 Firebug 的标签，单个样式表的全部(重新格式化的)内容是可见的和可编辑的(见图 10-11 )。选择器在这个视图中是可编辑的，并且您可以通过一个复选框来启用/禁用整个选择器，除了 Opera 蜻蜓之外，这个列表中的任何其他工具目前都无法做到这一点。

images

***图 10-11。*ie 8 开发者工具的 CSS 视图

没有与“净”选项卡等效的选项卡。虽然你可以用 Fiddler 或 Charles(本章后面会提到)来弥补这一点，但是需要不同的工具来实现这一点会降低你的效率和生产力。

总的来说，这个工具比以前提供的有用得多，但仍然没有视觉吸引力，感觉不完整。可以是一个量子工具；有很多情况下，使用开发者工具实际上会大大降低 IE 的速度，或者导致它崩溃。

Internet Explorer 9 的开发工具(虽然仍处于测试阶段)看起来是一个很大的改进，现在包括了一个相当于 net 选项卡的功能，但是它们在不同版本之间变化很大，在这里详细介绍它们是没有意义的。

网页检查器(Safari)

如果你在 Safari 中启用了开发菜单，你可以访问这些工具的苹果版本:网页检查器 ³ (见图 10-12 )。一般来说，Firebug 中所有可用的相同功能在这里都有，虽然感觉不太成熟。然而，在某些地方，Firebug 是开源的，Web Inspector 背后有资金支持，这一事实变得非常明显。特别是，Resources 选项卡(相当于 Firebug 的 Net 选项卡)看起来更加精致，尽管您需要在请求和 Resources 视图之间来回切换才能看到所有细节。

images

图 10-12。 Safari 的网页检查器

Safari 现在支持扩展，但在编写本文时，还没有针对 Web Inspector 的扩展。不过，WebKit 正在突飞猛进地发展，似乎在某个时候，它将在功能和可用性方面超越 Firebug。

³WebKit 的 Web Inspector 的 wiki 可从[trac.webkit.org/wiki/WebInspector](https://trac.webkit.org/wiki/WebInspector).获得

images **注意:**有趣的是，Web Inspector 实际上是用 HTML、CSS 和 JavaScript 编写的，这意味着你可以检查 Web Inspector 本身背后的代码。

开发者工具(Chrome)

Chrome 的等价物可以通过进入视图>开发者>开发者工具找到。因为 WebKit engine 在 Safari 和 Chrome 的检查器之后，所以它们几乎是相同的。然而，Chrome 是一个更新的版本，因为谷歌更频繁地发布 Chrome 版本(见图 10-13 )。

images

图 10-13。 Chrome 的开发者工具

CSS 的显示是最明显的区别。Chrome 显示了属性周围的括号，因此看起来更友好，更整洁，但这意味着规则不可扩展/收缩。

images **提示:**在 Safari 的 Web Inspector 和 Chrome 的开发者工具中，都可以双击选择器并直接修改它们，这是 Firebug 或其他工具中的样式窗格(在编写本文时)无法实现的。

Internet Explorer 开发者工具栏

对于 IE 6 和 IE 7，如果你能在你的站点上使用 Firebug Lite 的话，它通常是一个不错的选择。然而，开发者工具栏可以从[www.microsoft.com/downloads/e…](http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535)下载(搜索它可能比在浏览器中输入更简单！)，确实提供了一些有用的特性。

images

图 10-14。 Internet Explorer 开发者工具栏

火狐开发者工具栏提供的一些功能是可用的；对元素应用样式的只读视图也是可用的，但是工具栏不会与列表中的其他项目竞争。但是，如果没有其他选择，它确实提供了一些有用的调试选项。

蜻蜓歌剧院

Opera 蜻蜓是 Opera 提供的产品，它为我们提供了调试功能，否则我们就会求助于 Firebug(见图 10-15 )。由于它是直接从 Opera 作为离线应用程序提供的，最新的版本总是可以无缝下载。当这本书发布时，蜻蜓 1.0 将会推出，所以我们使用了一个实验版本来尽可能多地模拟 1.0 版本的功能 ⁴ 。

images

***图 10-15。*歌剧院蜻蜓

Opera 蜻蜓比名单上的其他产品都年轻，在撰写本文时，它仍处于发展的初级阶段。它提供了内置功能，如颜色选择器、屏幕放大镜和存储颜色管理器，这些功能是其他产品在没有附加组件的情况下无法提供的。其他一些细节也很不错，比如从突出显示的元素中突出出来的水平和垂直规则有助于对齐。

事实上，它正在开发中，这在一些容易发现的直接错误中是显而易见的，但它肯定是值得关注的，并且处于快速迭代开发中。

所有主要的浏览器供应商现在都提供这些工具，这是一件好事，表明他们理解开发人员的需求，并打算提供这些工具。它们都很有用，并在每个浏览器中为我们提供了可以对您的工作流程做出巨大改变的功能。然而，很难推荐任何一款感觉最成熟、功能最强大、可扩展性最强的 over Firebug，不管你更喜欢哪种浏览器。

⁴ 关于启用实验版的说明可以在[my.opera.com/dragonfly/blog/getting-opera-dragonfly-ready-for-opera-11/#enable](http://my.opera.com/dragonfly/blog/getting-opera-dragonfly-ready-for-opera-11/#enable)找到。

代理工具

尽管 Firebug Net 选项卡或等效工具为我们提供了查看 HTTP 请求及其组成部分的能力，但代理工具在较低的级别拦截流量，并为我们提供比其精简版浏览器更多的功能。有许多产品可以实现这一点，但很少有人能在调试能力上与 Charles 和 Fiddler 竞争。

提琴手

Fiddler 2 是微软的 Eric Lawrence 开发的免费 Windows 程序，最初于 2003 年发布(见图 10-16 )。它的成熟使它成为一个非常强大和完美的产品。它使用。NET 微软开发框架(2.0 版或更高版本；Fiddler 1.3 适用于 1.1 版本的用户，因此您需要安装它才能使用 Fiddler。从[www.fiddler2.com/](http://www.fiddler2.com/)开始提供。

images

***图 10-16。*提琴手

Fiddler 的组件太多了，本书无法一一介绍，但我们将提到对 CSS 开发人员有用的最常见的特性。本质上，Fiddler 位于您的浏览器和您的浏览器请求信息的服务器之间。这允许它检查在这两点之间通过的任何流量(包括安全流量)。

屏幕分为两个垂直窗格:第一个显示通过 Fiddler 的流量，第二个允许您进一步检查该流量。在文件菜单下，您可以选择启用或禁用流量捕获(是否在左窗格中显示请求)。

images **提示:**您也可以通过按 F12 快速切换流量捕捉。

当 Fiddler 捕获流量时，每个请求将按照请求的顺序显示在左侧窗格中，包括 HTTP 状态代码、协议、主机(域)、URL、主体(内容的大小)、缓存细节、内容类型和请求它的进程(例如，iexplore)。突出显示该请求将在右窗格中显示更多信息。

许多网站发出的 HTTP 请求比我们预期的要多得多，并且会很快填满左窗格(还有你电脑的内存)。右边的 Filters 选项卡允许您准确地指定您想要显示和捕获的请求类型，这将帮助您专注于您所关心的请求，而不是将它们淹没在噪声中。

Statistics 选项卡提供了关于所选请求所用时间的非常详细的信息，甚至给出了不同互联网速度和地理位置的性能估计，这对于定位性能问题非常有用。

Inspectors 选项卡是最有用的选项卡之一，它提供了所有的标题信息，以及查看响应数据的多种方式。对于请求，您可以看到标头、文本数据、表单数据、十六进制请求、身份验证信息、原始数据以及请求中提供的任何 XML。对于响应，您可以看到标题、文本数据、图像数据、十六进制响应、基本 web 预览、身份验证信息、缓存信息、隐私数据(例如，正在创建/修改/删除的 cookies)和原始响应。如果响应是压缩的，Fiddler 会警告你，替你检测算法，给你呈现解码后的数据。

这些全面的视图主要用于 CSS 开发人员检查意外的大文件、压缩是否正常工作、预期的数据是否被返回以及数据是否被正确缓存。

自动回复标签可能是 Fiddler 提供的最有用的功能。调试时的一个常见问题是，一个环境中的 CSS 文件或 HTML 响应与其他环境不匹配，或者其他一些因素干扰了我们的预期结果。要绝对确定一个 CSS 变化将修复我们的目标环境中的问题是非常困难的。理想情况下，例如，如果我们在生产环境中替换一个文件，我们希望知道确切的结果。自动回复可以让你做到这一点。您可以提供一个 URI 来匹配(例如，[www.mycompany.com/css/style.c…](http://www.mycompany.com/css/style.css))和一个响应。Fiddler 为各种 HTTP 状态代码提供了典型的响应，但它也允许您在本地机器上选择一个文件。这样做允许您用自己的文件替换任何服务器上的单个文件，这对于客户端开发人员来说是一种非常好的开发方式，因为他们不再需要关心服务器或底层基础结构，而是可以自信地独立处理特定的文件。

所提供的 URI 格式并不像看起来那么简单，它可以以“EXACT:”和“regex:”作为前缀，以及其他用于不同模式类型的前缀。也不可能重定向整个文件夹(例如，匹配[www.mycompany.com/css/](http://www.mycompany.com/css/)并重定向到类似c:/projects/mycompany/css的本地文件夹)但保持文件名不变，这样[www.mycompany.com/css/1.css](http://www.mycompany.com/css/1.css)重定向到c:/projects/mycompany/css/1.css , [www.mycompany.com/css/2.css](http://www.mycompany.com/css/2.css)重定向到c:/projects/mycompany/css/2.css等等。

为了解密 HTTPS 流量，Fiddler 在你的电脑上安装了一个证书，这是一个潜在的安全风险，但却是一个必要的方法。您可以在工具> Fiddler 选项中启用它。由于 Fiddler 向您的浏览器提供所有数据，它也能够“节流”这种流量，并模拟较慢的互联网连接。

查尔斯

尽管没有 Fiddler 成熟，Charles 很快成为一个竞争者(见图 10-17 )。Charles 可以在 Windows、OS X 和 Linux 上使用，它比 Fiddler 提供的特性集更好，而且更容易使用。它不是免费的，但也不贵，你可以在[www.charlesproxy.com/](http://www.charlesproxy.com/)下载 30 天的免费试用版。

images

***图 10-17。*查尔斯

Charles 的跨平台特性是一大优势；你只需要学习一次它的界面，这些经验将适用于你选择使用的任何操作系统。这个界面比 Fiddler 的更有吸引力，也不那么吓人，而且它建立在一些可用的功能之上。

要进入录制模式(Fiddler 认为是捕捉模式)，可以在窗口顶部切换一个红色的大圆圈按钮。当处于记录模式时，记录显示在窗口的右下角，Charles 将截取所有通过 web 浏览器请求的 HTTP 数据。在初始安装过程中，Charles 会为 Firefox 安装一个插件，以便能够拦截来自那里的数据。

images **提示:**要检查 HTTPS 流量，需要添加代理下的主机>代理设置> SSL 并安装证书。这方面的说明可在http://www.charlesproxy.com/documentation/using-charles/ssl-certificates/获得。

查看数据有两种主要方法。第一种是在结构视图中，它按主机对所有内容进行分类，以便很容易看到哪些请求来自哪个主机。另一个视图(之前演示过)是 Sequence 视图，它类似于 Fiddler 的默认视图，按顺序显示每个单独的请求。在这个视图中，文本框使得输入过滤字符串变得很简单。任何不包含输入字符串的项目都是隐藏的，这是查询数据的一种快速而直观的方式。在这个文本中也可以使用正则表达式。

在任一视图中，突出显示单个请求会在选项卡式窗格中显示更多信息——在结构视图中位于右侧，在序列视图中位于下方。第一个选项卡是 Overview，类似于 Fiddler 中的 Statistics 选项卡。

接下来的选项卡是请求和响应，分别代表请求和响应数据。根据数据的不同，这些视图的底部可能会显示其他选项卡，包括标题、文本、十六进制、压缩、HTML、查询字符串、Cookies、Raw 和 JSON。信息以比 Fiddler 更直观的格式命名和呈现，这对 CSS 开发人员可能更有用。HTML 在那个视图中是用颜色编码的，尽管不幸的是没有特定于 CSS 的视图。

“摘要”选项卡显示突出显示的请求的基本详细信息，以及作为对该请求的响应而触发的任何请求。例如，突出显示一个 HTML 请求将显示该页面指定的所有资产。这对于高级视图很有用，但是图表选项卡更详细，类似于 WebKit 的 Web Inspector 或 Firebug 的 Net 选项卡。此选项卡还提供了默认时间线视图的其他视图，如与原始请求相关的所有请求文件的可视比较大小、这些请求的持续时间，以及可视演示所请求文件的类型及其数量的类型。

通过切换屏幕顶部的方格标志图标，可以启用和禁用带宽限制。这方面的设置可以在代理>节流设置中设置，有几个有用的预设以及输入您自己的自定义值的能力。

隐藏在工具菜单下的是 Charles 提供的真正的宝石。Map Remote 允许您将任何远程请求重定向到任何其他远程目的地，这对于将一个环境的资源映射到另一个环境非常有用，可能是为了在一个服务器上使用一个特定的 CSS 文件或文件夹，或者替换另一个服务器上的文件或文件夹。Map Local 相当于 Fiddler 的自动回复器，但是它具有更友好的匹配方法和重定向整个文件夹以及文件的能力。Rewrite 选项允许我们以几乎所有可以想到的方式重写请求或响应的内容，以匹配位置，包括替换正文中的字符串或添加新的头。

images **提示:**要检查来自其他设备的流量，将它们与运行 Charles 的机器放在同一个网络上，并手动将该机器设置为设备上的代理服务器。

除了 Charles 提供的额外功能外，它还让人感觉更加精致。当你粘贴一个 URL 并在所有字段中填入代表你的各个部分时，Charles 足够聪明地将 URL 分开，这让你感觉这是一个很好的、可靠的软件。Fiddler 中嵌入的一些更深层次的功能超出了 Charles 的能力，但对于 CSS 开发人员来说，Charles 觉得更合适。

测试

测试是制作一个运行良好、在不同浏览器间外观和工作一致的健壮站点过程中的重要一步。不幸的是，有效地测试 CSS——网站的表示层——是一件非常困难的事情。尽管测试网站的其他层都可以以自动化的方式完成——JavaScript 可以有单元测试，服务器端代码可以有单元测试，HTML 可以被解析和验证——CSS 依赖于浏览器如何呈现它，并且需要由人工进行视觉检查。

从理论上讲，有一个页面应该如何呈现的截屏是可能的，并且作为自动化过程的一部分，将这个截屏与不同浏览器中的实际截屏进行比较。可以定义一个可接受的误差范围，根据两个截图之间的差异，测试可以通过也可以失败。然而，一个网站不可能也不会在不同的浏览器上看起来一样，这是事实。浏览器处理各种属性、字体呈现甚至图像呈现的差异确保了无论多小，不一致性总是存在的。两个文件的比较永远不会考虑哪些不一致是重要的，哪些是可接受的，所以这种测试方法永远不会完全准确。

然而，帮助这一过程的自动化技术确实存在。尽管通常测试人员需要访问每个需要测试的页面，但是在每个受支持的浏览器中，您可以使用技术来代表您生成屏幕截图，测试人员可以快速连续地查看这些截图，并且通过将两者叠加，可以很容易地与主示例进行比较。首先，有必要知道在这种情况下什么是通过或失败。

分级浏览器支持

因为完美地支持每个浏览器是不实际的，所以有必要提出一个矩阵来显示哪些浏览器被支持以及支持到什么程度。该矩阵的内容因地点而异。典型网站的流量主要由最新版本的 Internet Explorer 构成。技术含量更高的网站可能会有更高比例的访问者使用被认为更先进的浏览器，这些浏览器基本上都是当前的浏览器，在较小程度上也是当前版本的 Internet Explorer。在处理高流量网站时，很可能即使是占流量一小部分的旧浏览器也仍然代表着大量的用户。决定你支持哪种浏览器取决于你网站的流量，这应该被跟踪和报告以帮助你做出决定。

保持更新的一个很好的示例矩阵是 Yahoo！分级浏览器支持，可在[developer.yahoo.com/yui/articles/gbs/](http://developer.yahoo.com/yui/articles/gbs/)查看。编写时的当前版本如图 10-18 中的所示。

images

***图 10-18。*雅虎！分级浏览器支持

你决定的矩阵可能与这个有很大不同。例如，许多网站现在从 Windows 上的 Opera 或 Safari，或 OS X 上的 Chrome 看到了合理水平的流量，一些网站从 IE 6 看到了低水平的流量。

我们将在第六章中详细讨论分级浏览器支持。一旦你决定了你接受的浏览器矩阵，有必要确保你(和测试人员)有能力使用你打算测试的所有浏览器。

运行多个版本的 Internet Explorer

大多数浏览器(移动设备除外)都很容易并排安装，只要你有 Windows 安装和 OS X 安装(可能还有 Linux)。这可以通过虚拟机(允许用户在其当前操作系统内运行其他操作系统的软件)来实现，尽管你不能合法地在非苹果硬件上运行 OS X。IE 以外的浏览器更新速度很快，因为这些浏览器的用户通常会很快升级到最新版本。但是，要测试多个版本的 Internet Explorer，还需要采取其他措施。

尽管 IE 的每个版本都有一个独立的虚拟机是可能的(事实上，这是测试人员应该做的)，但这对 CSS 开发人员来说是多余的。一款名为 Multiple IEs 的软件很早就解决了这个问题，允许同时安装 IE 版本 3 到 6。 ⁵

这种方法有一些警告，主要是由于稳定性、过滤器和 cookie 处理，但对于旧版本 ie 中的页面快速视觉检查来说已经足够了。

多个 ie 上的开发已经停止，但是核心服务已经开发了一个名为 IETester 的 Windows 应用程序(见图 10-19 )。IETester 本质上提供了与多个 IE 相同的功能，，但是在一个带标签的窗口中，可以代表从 5.5 开始的任何版本的 IE。尽管这是一个 alpha 版本(从 2008 年就开始了)，但是产品的开发仍然是活跃的，并且稳定性足以满足测试目的。它可能不稳定——有几个已知的问题——但对于 CSS 开发人员来说，它为提供相同功能所需的多个虚拟机提供了一个有用且有能力的替代品。

⁵ 虽然 Multiple IEs 不再是活跃的开发，但是如果你感兴趣的话可以在[tredosoft.com/Multiple_IE](http://tredosoft.com/Multiple_IE)找到它。

images

图 10-19。 IETester

IETester 也可以配置为使用 IE 9，但这需要 Windows Vista Service Pack 2 或 7(或更高版本)。可以从[www.my-debugbar.com/wiki/IETest…](http://www.my-debugbar.com/wiki/IETester/HomePage)下载。

images **注意:**一款名为 ies4osx 的应用也允许你在 osx 下运行 IE 的版本，但它需要 Darwine(一种 Windows 模拟器)或类似的软件，而且安装起来很麻烦。也就是说，如果你想玩它，你可以从[www.kronenberg.org/ies4osx/](http://www.kronenberg.org/ies4osx/)下载。

仿效其他设备

拥有测试网站所需的所有设备并不总是现实的，有时从这些设备访问开发环境可能是一件痛苦的事情。为此，这里有一个快速的模拟器列表，您可以使用它在台式计算机上模拟这些设备:

苹果 iOS SDK : http://developer.apple.com/devcenter/ios
- 该工具允许您模拟 iPhones、ipad 和 iPod Touches。然而，它不是免费的，只能在 OS X 下运行。
Android : [developer.android.com/sdk](http://developer.android.com/sdk)
歌剧迷你模拟器 : [www.opera.com/developer/t…](http://www.opera.com/developer/tools/)
火狐手机 : [www.mozilla.com/en-US/mobil…](http://www.mozilla.com/en-US/mobile/download/)
完美移动 : [vf.perfectomobile.com/np-cas/login](https://vf.perfectomobile.com/np-cas/login)
- 该工具允许您在真实的移动设备和网络上进行远程测试。这个链接是沃达丰版本的，注册沃达丰的开发者是免费的。

自动生成截图

因为测试 CSS 通常需要一个人，所以让这个过程更有效的最好方法是让一个软件为你生成屏幕截图。有许多工具可以帮助解决这个问题。让我们来看看最常见的三种。

硒

Selenium 是一个广泛使用的集成测试工具(见图 10-20 )。Selenium 目前是第 2 版，对原来的版本进行了重要的改进。它最初是作为 ThoughtWorks 的内部框架开发的，但后来已经成为一个完全独立的系统，有许多贡献者。一个名为 Selenium IDE 的 Firefox 插件允许您创建测试，例如:

浏览至[mycompany.com](http://mycompany.com)
等待页面加载
检查特定div中的文本是否包含短语“我们的公司太棒了”
单击特定的锚点
检查特定div中的文本是否包含短语“单击此处联系我们”

这个插件既可以记录你在浏览器中的行为，也可以用来一点一点地构建这些测试。记录对于了解动作是如何构建的以及它们是如何工作的特别有用。这些操作存储在一个“测试用例”中，并且您可以在一个“测试套件”中拥有多个测试用例这些测试可以从 IDE 中运行，每个操作将分别变成绿色或红色，这取决于它是通过(成功执行或为真)还是失败。

images

***图 10-20。*硒 IDE

从 CSS 开发人员的角度来看，Selenium 提供的最有用的命令是 captureEntirePageScreenshot，它确实做了它所说的事情。使用这个命令，很容易在 Firefox 中自动创建一系列截图。

然而，只测试 Firefox 不如测试我们整个支持的浏览器矩阵有用。为此，Selenium IDE 的老大哥 Selenium RC 可用于针对多种浏览器、分辨率、色深和操作系统运行这些测试。Selenium RC 还支持比 Selenium IDE 更多的命令；例如，captureScreenshot 仅捕获当前视口中的视图。测试可能会很快变得非常大，并且完成起来很慢，如果您在持续集成(CI)环境中使用它们，这可能是一个问题(参见第九章)，但是这可以通过 Selenium Grid 来克服，它允许您将许多服务器连接在一起并并行运行所有测试。

一旦您创建了您的截图并批准了它们，就可以将批准的版本与后续的截图进行比较，并基于此通过或未通过测试——但正如我们之前提到的，这可能是一个脆弱的测试。

尽管 Selenium IDE 感觉笨重且功能有限，但可用的工具套件是免费的、成熟的且非常强大。如果您需要所提供的其他功能(您很可能需要)，Selenium 是帮助您实现这一目标的一个很好的工具。你可以在[seleniumhq.org/](http://seleniumhq.org/)了解更多信息。

尽管 Selenium 是您可能找到的最接近行业标准的集成测试工具，但仍有几种替代工具，下面列出了其中一些:

watir:??]
sahi:??]
风车:[www.getwindmill.com/](http://www.getwindmill.com/)

浏览器主机

假设你唯一感兴趣的是截图， Browsershots 是一个简单得多的一次性测试。通过浏览到[browsershots.org/](http://browsershots.org/)，您可以输入一个 URL，勾选您想要测试的浏览器和操作系统，然后提交表单。您的请求将被放入一个队列中，当完成时，您将返回一系列屏幕截图。Browsershots 可能需要很长时间才能完成，但它是免费的。或者，每月大约 30 美元，你可以获得优先处理，跳过许多排队。虽然它是一次性执行大量测试的好工具，但是它有几个缺点:

它是托管的，这意味着您测试的页面必须对外部世界是可访问的，这对于您的组织来说可能是不可接受的
试图使这一过程自动化是非常困难和脆弱的
它非常慢

如果你别无选择，Browsershots 是一个有用的工具。

浏览器摄像头

Browsercam ( [www.browsercam.com/](http://www.browsercam.com/))是 Browsershots 的一个更有能力和功能的等价物，也有能力进行收费的交互。它还提供远程访问服务，以便您可以选择您想要的操作系统和浏览器，并直接连接到具有该配置的机器上进行尝试。从简单地生成截图的角度来看，它与 Browsershots 有相同的缺点，也很昂贵，尽管它更快。

总结

本章展示了许多工具中的一些，这些工具可以帮助您进行调试，以及了解如何决定测试哪些浏览器以及运行这些浏览器的最佳方式。它还向您展示了自动化可以帮助测试 CSS 的一些最佳方式。

在下一章，我们将把我们所有的知识付诸实践，我们将提供关于如何构建你自己的 CSS 框架的指南和例子。

十一、创建您的 CSS

在本章和附录中，我们把前面所有的章节付诸实践。我们打算把你在整本书中学到的一切都拿出来，给你一些现实生活中的例子，你可以根据自己的需要进行修改。虽然我们不打算规定您的流程以及您应该如何建立自己的指导原则，但我们会为您提供模板，供您在团队内部讨论时使用，以建立自己的指导原则。我们也将从头到尾经历制作一个框架的过程，然后你可以适应你的网站的需要。

在附录 1、2、3 和 4 中，您将分别找到示例 CSS 编码标准文档、示例可访问性指南文档、示例浏览器支持指南文档和示例开发流程文档。

在本章中，您将学习以下内容:

如何将设计解构为网站的资产和模板
创建 CSS 框架时要考虑哪些因素
如何记录设计资产的 CSS 库

Igloo 冰箱零件公司网站

让我们向您介绍虚构的冰屋冰箱零件公司的设计。这里向您展示了设计团队提供的主页(见图 11-1 )和内部顶层部分页面(见图 11-2 )。

images

***图 11-1。*冰屋冰箱配件网站首页设计

images

***图 11-2。*冰屋冰箱零件网站的示例内容页面

设计团队努力创造符合业务需求和目标的设计，确保用户体验和交互尽可能清晰简单，信息传达顺畅，用户愉快地完成旅程。

正如在大型组织中经常发生的那样，许多利益相关者可能对设计应该如何，或者网站的某些区域应该包括什么内容有发言权。知道了几个有着不同职责和目标的人对这个结果的影响，CSS 作者和开发人员的工作通常是确保所创建的东西是可行的，尽可能干净地编码，并且所有的东西都被构建成最终产品不仅是可用的和可访问的，而且是可维护的。

下一步是分析这个设计，看看是否有任何问题需要我们在继续构建它之前解决。

分析设计

当在构建设计之前分析它时，有一些重要的问题需要回答:

在不同的浏览器中出现不同的外观是可以接受的(和不可以接受的)是什么？
在实现解决方案时，您可能会遇到什么问题？
你还需要和设计师讨论哪些问题，如果不解决这些问题，它们可能会成为更大的问题？

回答完这些问题后，一个很好的练习是确定页面中使用的公共元素(如果有设计库，这可能已经由设计团队完成了；你可以在第五章中阅读更多关于设计库的内容。这将使您更容易避免代码中的冗余:如果您注意到一个组件在页面的不同位置被重复使用，您将知道您不应该使它的 CSS 过于具体，以便您可以允许它被重用。如果你注意到另一个组件有两个(需要的)变体，你会知道你应该为组件的默认状态创建基本 CSS，然后可以很容易地用另一个类扩展(受面向对象 CSS (OOCSS)的启发，你可以在第四章中读到更多)。

对于第一个问题，在与设计者讨论后，你被告知跨浏览器的不同外观是不可接受的。

至于问题的后半部分，以下元素跨浏览器看起来不同是可以接受的(但对于具有 A 级支持的浏览器，要尽可能相似):

盒子上的圆角
在按钮上投射阴影
在文本上投射阴影

您的团队针对该解决方案提出的一些问题和疑问如下:

如何处理主页横幅上的文本？它使用的是 Futura Condensed ，这不是一种网络安全字体，只能通过font-face通过网络字体服务获得(更多细节见第五章)。
该设计没有为导航项目或链接提供悬停状态。你需要将这些反馈给设计团队，这样你们就能一起找到解决方案。

您应该在自己的团队中提出的一个问题的例子是，使用高级选择器(如:nth-child()选择器)删除第一个/最后一个元素上的边距和边框是否可以接受。高级选择器带来的性能提升值得吗？你应该选择通过一个类来定位这些元素的更简单的解决方案吗？如果你使用高级选择器，你会为不支持它们的浏览器提供 JavaScript 后备吗？

最后一个问题也应该咨询设计团队，因为如果你不提供后备，一些浏览器会显示不同的设计。请记住，不仅要向开发人员，还要向业务部门解释提议的解决方案的利弊，因为设计人员更希望实现的解决方案尽可能与他们的原始作品相似，而不管您是否需要更多的工作来实现它。

网格

设计的底层网格应该在设计指南中指定，而不是前端开发人员通常会创建的东西。意识到这个网格，至少在基础层面上，将会使构建 CSS 更加容易，并且会使你的结果更加准确。网格在第五章中有更详细的介绍。

在我们的示例网站中，网格基于 Blueprint 默认网格，该网格由 24 列组成，宽度为 30 像素，间距为 10 像素(参见图 11-3 )。了解了这一点，您就会知道如果一个元素跨越 4 列，那么它的宽度将是 150 像素(这个结果是通过将 4 * 30px 列的宽度加上 3 * 10px 间距的宽度得到的)。

images

***图 11-3。*冰屋冰箱部件设计，底层网格可见

可复用组件

如前所述，在开始编写标记和 CSS 之前，识别可重用的块是很重要的。如果没有可以遵循的设计库或组件库，这一点尤其重要。

在提供给您的两个页面中，您已经确定了七个不同的框或内容块，它们将在网站的各个不同页面中重复使用(参见图 11-4 ):

圆形苍白色(“接触”)
带背景图像的圆形(“关于”)
带链接列表的渐变(“服务”)
行动号召横幅(“预约工程师”)
搜索
桌子
带 3 列的苍白色(“按”)

images

***图 11-4。*不同类型的箱子。

这个列表给你一个设计的鸟瞰图和一个重要的轮廓，供你开始工作时使用。它还使得检测非常相似的块和元素变得容易，并且可以合并到单个模块中，因此 CSS 和设计可以进一步简化。在我们的例子中，在内容页面上(参见图 11-2 ，你可以看到第一排服务框和第二排非常相似，除了第二排的标题更大(参见图 11-5 )。

images

***图 11-5。*左边方框和右边方框的唯一区别是标题的大小

理想情况下，通过统一标题大小使其成为一个单一框的决定不是由实现团队做出的，而是必须由设计师签字同意。尽管如此，重要的是要意识到这些微小的变化可能会渗入设计中，并使它们变得更加复杂(设计团队和品牌经理也将把它们作为他们角色的一部分)。您的案例中的变化不太可能像前面的例子那样简单，但是您必须意识到，有时设计解决方案可以而且应该被改变，以保持设计和代码的简单。

调色板

该设计为我们呈现了十种经常使用的颜色:

正文
帮助文本(搜索)
未访问的链接
导航背景
选择导航
方框背景(蓝色和黄色)
虚线
渐变框边框
表格背景

还使用了四种渐变:链接列表框、按钮、表格标题和页脚背景。

也使用其他颜色(例如，在奖项宣传横幅上)，但它们主要是一次性的，不应该扰乱基本的调色板。

在分析所使用的颜色时，通过直接与设计团队交谈或参考贵组织的设计指南，确保您有正确的必要值。重要的是，例如，每当你处理简单的文本时，你使用相同的正确颜色，而不是以 12 种不同的非常相似(和不正确)的变化结束。

无障碍问题

理想情况下，设计师或设计团队会对设计进行测试，以便颜色组合为色盲用户提供足够的对比度。在可访问性指南(参见附录 2)中，建议使用诸如 Color Oracle 之类的工具来测试设计，这提供了一种快速简单的方法来模拟色盲用户将会看到的内容。

前景色和背景色也应该使用对比检查器进行测试，比如 Jonathan Snook 的颜色对比检查(同样，在可访问性指南中也提到了)。

对设计的快速分析发现了一个问题:页脚文本和背景之间的对比度似乎不够。在这种情况下，如果怀疑被证明是正确的，你可以与设计团队讨论最佳解决方案:也许简单地将文本颜色改为白色就可以解决问题。

目前，我们只是根据手头的设计来分析可能的复杂情况。在开发此设计解决方案时，应该已经讨论了其他可访问性考虑事项，而其他考虑事项只能在创建代码时解决。

如果存在可以立即发现的可访问性问题，最好在动手使用代码之前解决它们。

沟通很重要

开发人员很容易感觉与设计人员完全分离，交流也很少。这并不理想。设计师和开发人员都在朝着同一个目标努力:拥有一个伟大的网站，人们会觉得必须访问和使用，这将有助于公司实现其目标。虽然开发人员可能不愿意为设计师提供设计建议，但是有理由要求一个勤奋的 CSS 作者不仅反馈、建议甚至教育设计师，还包括所有参与网站创建的人，让他们了解最佳实践、标准以及以某种方式做事的含义。这不是一条单行道:同样勤奋的开发人员应该对业务的其他部分带来的新想法持开放态度，并应该努力找到问题的解决方案，这些问题可能不一定容易在代码中解决，但最终对用户来说是最好的。

一种容易引起混淆的元素是标题，所以它们是一个很好的例子，说明设计者和页面构建者之间的沟通是多么重要。如果设计者牢记在特定情况下使用的标题级别不取决于我们想要的字体大小，而是取决于内容的实际层次，那么他将更容易开发一个解决方案，其中标题(以及它们的大小和相对于它们在页面上的位置的比例)被更好地考虑和更仔细地考虑。

创建 CSS

在分析整体设计的重要步骤之后，是时候开始为网站创建 HTML 和 CSS 了。由于本书关注的是事物的 CSS 方面，我们假设你将遵循 web 标准，使你的标记可访问，并且(尽可能)干净和有语义。请记住:干净高效的 CSS 只能来自干净高效的标记，尽管只有在困难的时刻，需要解决更复杂和混乱的难题时，真正的专业知识才会显露出来。如果你在[procssforhightrafficwebsites.com](http://procssforhightrafficwebsites.com)前往这本书的配套网站，你可以随意查看它的标记。

我们将继续使用冰屋冰箱零件公司的网站作为我们的例子。即使它不是一个过于复杂的网站，我们也会为你提供一些提示，告诉你如何思考和编写可以应用于任何网站和过程的 CSS。

这个练习的主要目标是讨论和修改设计；为您和您的团队提供 CSS，使您无需编辑 CSS 文件即可创建更多页面(除非需要向库中添加不同类型的设计元素)；并向您展示如何创建高效且可维护的代码，以及如何创建和扩充相关的设计库。

Igloo 冰箱配件公司网站的 CSS 创建遵循该组织的 CSS 标准指南(附录 1 )、CSS 可访问性指南(附录 2 )、浏览器支持指南(附录 3 )和开发流程(附录 4 )。

我们将以我们的字符集声明开始每个 CSS 文件:

@charset "UTF-8";

这有助于我们避免以后必须对字符进行转义，从而节省字符并使我们的代码更容易阅读。

正在评论

遵循 CSS 标准指南(参见附录 1)，我们将在开头使用 CSSDOC 注释(参见第二章了解关于 CSSDOC 的更多细节)——文件注释——并用于分隔样式表的各个部分——部分注释。在文件注释中，我们将包括样式表的描述和关于项目、最初创建样式表的团队和版权的信息。我们还将使用该注释来包含整个 CSS 中使用的主色列表(如前面所列)。下面是这个评论的样子:

/** * Igloo Refrigerator Parts Inc Corporate site * * Main CSS file for the IRP Inc's corporate site * * @project IRP Inc Corporate * @author Design Team at IRP Inc * @copyright 2011 Igloo Refrigerator Parts Inc * * @colordef #333; main text * @colordef #999; help text (search) * @colordef #1299b4; unvisited links * @colordef #cdf2f8; navigation background * @colordef rgba(18,153,180,.2); navigation selected * @colordef #a1e0e9; navigation selected fallback * @colordef #e1f4f7; box background blue * @colordef #fffbeb; box background yellow * @colordef #cecac5; dotted lines * @colordef #b0daea; gradient box border * @colordef #fffbeb; table background */

在文件注释之后，我们将声明该文件是否有任何依赖关系。在我们的例子中，我们将导入一个重置样式表(reset.css ),因此我们将包含以下注释:

/** * Dependencies * * Importing reset file: reset.css */

后面是目录，以便更容易地引用样式表的内容。请记住，如果这个目录比较简洁，那么它会更实用，所以不必经常更新。

/** * Table of contents * * Structure * Generic typography and lists * Global elements * Links * Forms * Tables * Visual media * Components * Reusable * One-offs */

这个结构也表明了我们需要在样式表中包含哪些部分的注释。不过，最好已经有一个基本模板，它应该包括一个示例文件注释和 CSS 文件的理想结构，后面是部分注释。这将使开发人员更容易开始创建新的样式表。以下是部分注释的示例，其中描述是可选的:

/** * Reusable * * Modular classes that can be applied to other elements * * @section reusable */

除了介绍性和分段注释之外，您可以添加到样式表中的一些最有用的注释是那些解释为什么采取某个操作的注释。在我们的例子中，我们对使用的每一个 Internet Explorer 过滤器都做了注释，以便文件的未来编辑者知道使用它们的原因。这里有一个例子:

#masthead { margin-top: -20px; *margin-top: 0; /* IE 7 and below: Navigation is partially hidden on IE 7 without this property. */ `padding-top: 20px;

在这种情况下，我们需要反转“masthead”部分的负上边距属性，这样它的内容在 IE 7 中就不会被裁剪。通过在属性名前添加星号，只有 IE 7 及以下版本才会正确解析第二个属性(你可以在第三章中读到更多关于这个的内容)。

您可能希望在 CSS 标准指南的主样式表中包含一个注释，说明哪些 CSS 技巧是可以接受的。有时，当应用的 hacks 数量很少时，不将这些污点从主 CSS 中分离出来会更有效率和性能。你可能会说，在未来，如果你想删除这些黑客，这将使它成为一个更困难的任务，但如果不动这些简单的记录黑客不太可能会造成任何问题。

你也可以(事实上，你应该)用一种共同的语言来标记这些黑客，以便将来容易搜索。我们将使用“HACK_”以及 HACK 的详细信息。我们更新的代码如下:

`#masthead { margin-top: -20px; margin-top: 0; / HACK_IE_LTE_7: Navigation is partially hidden on IE 7 without this property. */ padding-top: 20px;

这段代码的确切语法在附录 3 中有详细说明，你可以在第二章中阅读更多关于注释的内容。

单位

在我们的 CSS 中，我们将使用相对和绝对单位的组合:ems 用于字体大小，像素用于其他测量。这一决定背后的原因是，在大多数浏览器中，以相对单位调整大小的字体可以调整大小，但是使用 ems 作为元素宽度等值会使整个布局扩展，即使用户已经设置了仅调整文本大小的首选项。

为了简化计算，我们在body元素中包含了属性font-size: 62.5%。这将使默认浏览器字体大小为 10 像素(通常是 16 像素)。知道了这些，我们就可以推断出 1 em 等于 10 像素，1.1 em 等于 11 像素，以此类推。

基线样式

我们希望从头开始，所以我们将创建一个重置样式表(您可能希望将其称为“base.css”而不是“reset.css”)，通过重置一些不太一致的属性(如边距和填充)，使大多数 HTML 元素在跨浏览器时工作类似。但是我们不想重置一切，所以我们将利用一些用户代理样式表的缺省值，而不是在以后将它们添加到我们的代码中(你可以在第三章中阅读更多关于用户代理样式表的内容)。

从 Eric Meyer 的 reset 样式表开始(你可以在第四章的中读到更多关于这个和其他 reset 样式表的内容)，我们将从初始声明中删除以下元素:fieldset、dt和dd。尽管这些元素的边距和填充在一些浏览器中不一致，但它们作为基本样式已经足够好了，我们知道，在这种情况下，它们不会经常使用。

下一步是定制body选择器，使其满足我们的需求。在他最初的重置中，Eric 只对body元素应用了line-height: 1。在我们的案例中，我们需要的不仅仅是这些:

body { background: #fbfdfc url(i/bkg.jpg); color: #333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 62.5%; line-height: 1; }

我们还将为blockquote、ins和abbr等元素添加基本样式。我们将把默认的版式留给主样式表，此时只对body元素应用通用的字体相关属性。

结构

我们网站的设计遵循一个简单的两栏布局，顶部是全宽的页眉部分(包含导航)，底部是全宽的页脚。如前所述，底层网格(参见图 11-3 )基于 24 列布局，每列 30 像素宽，由 10 像素宽的间距隔开。容器元素可以跨越 6、9、12、18 和 24 列。

在开始构建您的框架时，记下这些度量是相当简单但极其重要的一步。这些值会在你的样式表中反复出现，所以拥有正确的值而不仅仅是近似值是至关重要的。

这同样适用于边距和填充等值。在我们的设计中，标准盒子的填充值为 14px 11px。优秀的设计师不太可能创造出这样的解决方案，例如，列表项呈现不同的底部边距。一致性很重要，模型中的一致性必须转化为代码中的一致性。

让我们开始写我们的 CSS。在我们的基本模板的“结构”部分，我们将添加主要内容包装器的样式:

.wrapper { width: 950px; margin: auto; }

我们在这个实例中使用了一个类，因为我们将在每页中不止一次地使用这个包装器。因为我们设计的一些区域有全幅背景，内容区域居中，我们将使用这个泛型类来设计内部容器div或section元素的样式，同时保持主区域包装器全幅。下面是页脚标记:

在这个泛型类之后，我们将为其他主容器添加样式，比如顶部header元素、主(#main和次列(#sec区域，以及footer元素。然而，我们将把#main和#sec选择器的宽度留到以后…

因为我们希望我们的元素尽可能灵活，我们将创建可以附加到任何容器的附件类，给它一个我们希望允许页面生成器使用的可能宽度。对于这些，我们将使用表示类。只要有正当的理由，这是可以的；在我们的例子中，除了“span-6”或“col-6”之外，我们如何命名一个表示跨越 6 列的元素的类呢？如果我们包含了每个元素的宽度(例如，“main”和“sec”容器的宽度，等等)，我们就不能为页面创建者(无论是开发人员还是内容编辑人员)快速创建新页面提供足够的灵活性。如果这确实是您需要实现的，那么我们建议您不要使用这些无意义的类名——这是为了更高的灵活性我们愿意接受的一种折衷。以下是我们将为集装箱宽度提供的类别:

.span-6, .span-9, .span-12, .span-18 { margin-right: 10px; } .span-6 { width: 230px; } .span-9 { width: 350px; } .span-12 { width: 470px; } .span-18 { width: 710px; }

这些类遵循了已知框架设置的例子，其中每个宽度选择器还包括一个右边距。当你需要浮动容器的时候，你可以使用类“fRight”或者“fLeft”(后面会提到)。要删除一行中最后一个容器的页边空白，您必须将类“last”添加到该容器中，该类只包含属性margin-right: 0(您可以在本章后面阅读更多关于可重用类的内容)。

当构建一个通用的公共框架时，比如 960.gs 或 Blueprint(你可以在第四章中读到更多关于这些框架的内容)，你需要确保你的代码能适应尽可能多的变化。然而，在创建定制框架时，没有必要走极端。你知道它的用途，你知道可能的变化，你甚至可能知道你不希望它做什么。您可以将该框架视为一种工具，它允许您根据需要创建任意多的页面变体，不多也不少。这个框架不是每个人的一切，而是必须的，这意味着没有浪费或未使用的代码或带宽。

对于我们的网站，我们不需要超过前面列出的容器宽度。在您的特殊情况下，您可能想要更复杂的变化。

排版默认值

在定义了主要的结构元素并为不同的布局创建了可重用的类之后，我们将为我们需要迎合的所有元素添加基本的印刷样式。这与 reset 样式表的区别在于，在这一部分中，只包括具有字体相关属性的选择器。

通过为每个元素设置一个基本样式，您可以确保内容创建者能够创建新的页面，这些页面将始终呈现至少正确的元素层次结构，并遵循设计准则。我们将对所有六个标题级别(h1到h6)、段落(p)、列表元素(li)、定义列表(dt和dd)、引号(blockquote)和预格式化文本(pre)进行样式化。该设计具有非常一致的标题层次结构，因此我们知道，即使某些级别标题位于特定的容器中，它们也会具有相同的font-size、line-height和margin值。有一些变化，但是它们不应该在默认样式部分中处理，而应该只在组件级别添加，只应用必要的更改并利用继承来使变化最小化并避免冗余。

正如我们之前提到的，我们将使用 ems 来定义网站中的font-size值，但是我们将使用像素来定义高度、宽度、边距和填充。这将允许字体大小调整，甚至在旧的浏览器，保持布局一致，并避免不必要的水平滚动条。

以下是前三级标题的样式:

h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1 { font-size: 2.4em; margin-bottom: 10px; } h2 { font-size: 1.8em; margin-bottom: 12px; } h3 { font-size: 1.5em; margin-bottom: 10px; }

下面是我们的段落和列表元素的样式:

p, li, dt, dd { font-size: 1.3em; line-height: 1.4; margin-bottom: 12px; }

line-height值是无单位的，因此它可以适应文本的大小。在这种情况下，计算出的font-size值将是13px，计算出的line-height值将是18.2px(你可以在第三章中了解关于计算值的更多信息)。如果字体大小增加，例如增加到1.5em，计算值将分别为15px和21px—line-height值与font-size成比例增加。

我们有意识地将ul、ol和dl元素排除在基本样式之外:默认的用户代理样式满足设计的需要，因此没有必要重置或覆盖这些样式。

您可以更进一步，为某些元素后面的标题添加样式。例如:

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 24px; }

可能性是无限的:您可以为遵循特定列表类型或图像的标题、遵循相同元素的段落、遵循特定标题级别的列表类型等包含样式。

对于我们的网站，我们还将为放置在blockquote元素中的p和cite元素添加样式:

blockquote p { font-size: 1.3em; font-style: italic; margin-bottom: 8px; } blockquote p:before { content: "“"; } blockquote p:after { content: "”"; } blockquote cite { display: block; font-size: 1.3em; } blockquote cite:before { content: "—"; }

前面的代码应该是不言自明的。我们已经使用了:before和:after伪元素将引号添加到 blockquote 中段落的开头和结尾。因为我们已经声明文件的字符集是 UTF-8，所以没有必要对这些特殊字符进行转义。我们没有使用这些伪元素的 CSS3 版本(分别是::before和::after，以便 Internet Explorer 8 能够理解它们:我们希望向尽可能多的浏览器显示相同的设计。

出于两个原因，我们在本节中没有包括表单和表格样式。我们的表单元素将从用户代理样式表中继承大部分样式，只添加一些用于定位和定制按钮设计的样式。表格样式本身就很复杂，所以在样式表中保留一个单独的部分，将表格作为一种特殊类型的组件，可以使这个基本样式部分更清晰，更容易浏览和引用。

你可以在第五章中阅读更多关于排版考虑的内容。

全球元素

添加基本样式后，我们将为全局元素创建样式。这些元素出现在网站的每个(或者几乎每个)页面上。在我们的例子中，它们是标题区域、主导航和页脚。对于某些应用程序，我们需要覆盖我们已经创建的一些基本样式，例如导航列表:

`nav ul { list-style: none;

} nav li { display: inline; font-size: 1.4em; font-weight: bold; margin-top: -35px; margin-bottom: 0; }`

对于主导航中的列表项，我们必须覆盖默认的用户代理list-style值，应用不同于基本样式的边距值，并增加字体大小。我们将把链接样式留给“链接”部分，这样我们就有了一个集中的区域，可以确保所有的链接状态都得到满足。您不必在自己的样式表中遵循这种结构，但是我们的经验表明，将所有链接放在同一个位置可以使不同的开发人员在需要编辑或扩充时更容易在文档中找到它们。

根据手头的设计，这一部分可能需要包含更多或更少的元素。您可能会发现将全局元素分隔在各自的部分中更容易，然后将不同的部分用于主导航、辅助导航、页脚等等。

组件和可重用类

在我们的例子中，我们将组件分类为应用了特定样式的可重用内容块。通过将组件的类或 ID 添加到容器元素中，可以使其中的元素继承这些样式。这使得 CSS 更加可重用和模块化。这些块不是为它们出现的每个实例设计样式，而是与位置无关的、可移动的块。我们将使用 serviceBox 作为我们的示例组件(参见图 11-6 )。

但是，在创建 serviceBox 之前，我们首先创建了一个基本的 Box 组件:

.box { background: #fffbeb; padding: 14px 11px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

这个类可以应用于任何容器，它将使用正确的圆角值、填充和背景来设置样式。通过“serviceBox”类，我们将扩展“Box”类。这遵循了 OOCSS 的概念，其中类可以被其他类重用和扩展，从而形成更加模块化的样式表。你可以在第四章中阅读更多关于 OOCSS 的内容。

下一步是创建 serviceBox 类:

.serviceBox { background: #fff url(i/box-grad.jpg) repeat-x left bottom; border: 1px solid #b0daea; overflow: hidden; height: 1%; }

如设计所示，serviceBox 有一个不同的背景、一个边框，并以三行显示。“serviceBox”元素的宽度和边距将由父容器div决定，并应用正确的“span”类(在本例中为span-6)。我们包含了值为 1%的height属性，这样 IE 6 将清除容器，因为它不理解overflow: hidden属性(在其他更兼容的浏览器中用于清除容器)。这个框中的内容总是标题、段落和链接列表。了解了这一点，我们可以进一步设计其中的内容:

.serviceBox ul { list-style: none; margin-left: 0; } .serviceBox li { border-top: 1px solid #eef9fb; margin: 0; width: 100%; }

我们已经利用了这个事实，即标题使用的样式与我们文件的基本样式部分中定义的样式相同，所以我们不需要在这里为它添加任何样式。我们现在只需要给列表元素添加圆角。因为这种样式不会随着链接的悬停或活动状态而改变，所以我们可以在本节中添加它:

.serviceBox li:first-child a { border-top: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; border-radius: 4px 4px 0 0; } .serviceBox li:last-child a { -moz-border-radius: 0 0 4px 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-radius: 0 0 4px 4px; }

请注意，WebKit 特定的属性是为 WebKit 的旧版本单独添加的。WebKit 只支持在最新版本的border-radius属性中的简写。一些老的浏览器看不到这种风格，但是他们也不会理解border-radius属性，所以这是一个公平的妥协。我们已经设计了我们的 serviceBox 组件！如前所述，我们将在样式表的适当部分添加链接样式。

组件是可重用的，但是这里我们对组件和可重用类进行了区分，因为可重用类更具有表示性，并且倾向于只满足单个属性/值的组合。创建组件主要是为了保存特定类型或组合的内容。

在我们的主样式表中，我们已经创建了五个不同的可重用类。第一个可重用的类可能是大多数前端开发人员所熟悉的:clearfix。这个类可以应用于任何需要“自我清除”的元素(清除时没有专门为此创建的元素)。我们还包括 Internet Explorer 7 和以下版本的这个小技巧:

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* HACK_IE_LTE_7: IE 7 and below don't support the :after pseudo-element (above). */ *zoom: 1; }

接下来，我们创建两个类，允许开发人员和内容创建者轻松地左对齐或右对齐元素:

.fLeft { float: left; } .fRight { float: right; }

接下来，我们将添加可以应用于一行中最后一个元素的“last”类。这将删除右边距，否则将被应用，以便它整齐地适合可用的宽度:

.last { margin-right: 0; }

最后，我们包括一个可访问性类，允许内容创建者隐藏只有屏幕阅读器才能阅读的文本:

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

一次性的

总会有一些元素需要被创建和设计，这些元素并不遵循我们添加到框架中的任何东西的设计。我们称这些为一次性的。您可能更喜欢称它们为“异常”、“唯一的”，或者任何您认为合适的名称。

在 Igloo 冰箱零件公司网站的例子中，我们已经确定了(到目前为止)两个特例:主页上的横幅和“最佳工程服务奖”框，也在主页上。

对于横幅，我们将创建一个可以附加到#masthead组件的类，包括正确的背景图像和文本大小:

.planet { background:url(i/hp-banner01.jpg) no-repeat center 20px; } .planet h2 { font-size: 4.8em; margin-bottom: 0; } .planet p { font-size: 1.6em; padding-bottom: 6px; }

这个类基本上是#mastead ID 的扩展，并依赖于它。因为它的风格非常特别，并且不适用其他任何东西，所以它被放在样式表的“一次性”部分下。

对于奖励框，我们也将利用一些元素的默认样式，但是我们需要改变许多属性:

#bestEngAward { border: 1px solid #fce8b8; background: #fff; padding: 23px 20px; } #bestEngAward h2 { color: #fcb61a; font: 3em/1.1 Impact, "Helvetica Compressed", "Helvetica Inserat", Arial Narrow, Tahoma, Geneva, "MS Sans Serif", sans-serif; margin-bottom: 20px; text-transform: uppercase; } #bestEngAward p { margin-bottom: 0; width: 100%; } #bestEngAward p a:link, #bestEngAward p a:visited { border: none; } #bestEngAward p a:after { content: " ›"; } #bestEngAward blockquote { background: url(i/blockquote.gif) no-repeat; color: #0f6080; margin: 0 25px 0 0; padding: 3px 0 0 40px; width: 321px; } #bestEngAward blockquote p { font-size: 1.6em; font-style: normal; margin-bottom: 3px; } #bestEngAward blockquote p:before { content: ""; }

为了改变它们的样式，我们必须覆盖h2和p元素的属性、链接样式以及blockquote元素及其子元素的样式。如果最初的样式过于具体，这段代码会更加冗长:我们要么没有利用继承来声明最少的属性，要么不得不重写过于具体的选择器。

小心:随着网站的增长，一次性网站的数量可能会呈指数级增长。设计者应该对这种情况敏感，并确保没有创建与现有元素非常相似的元素。这不仅会使 CSS 变得更加复杂和不确定，而且会使设计方案更加淡化。确保您正在创建的元素还没有以某种方式出现在您的样式表中，或者它不能扩展具有几个属性的现有组件。

妥协

作为有意识的 CSS 作者，我们知道什么是最佳实践；我们了解并遵守网络标准；我们掌握了最新的 CSS 技术，这些技术通常是为了让 CSS 更有效，让开发人员更有效率而开发的。这些我们都知道。但是作为在大型网站上工作的 CSS 作者——数百万用户在无数不同的设备和设置上访问——我们也知道我们需要做出一些妥协。

冰屋冰箱零件公司网站也不例外。我们已经提到了一些妥协，比如使用无意义的类名来增加灵活性，或者求助于用户代理样式表的默认设置来实现一些元素的基本样式。

另一个我们妥协的例子是使用一个图片来在主页的横幅上显示一个自定义的非网页安全字体。最初的设计使用 Futura Condensed Medium，很少有用户会在他们的计算机中安装这种介质。这种情况的选项如下:

使用图像
使用图像替换技术
使用库芬或 sIFR(你可以在第五章中了解更多)
使用 Fontdeck 作为 web 字体服务，因为它提供了这种字体

由于这种字体只在一种情况下使用，简单地用图像替换文本并使用alt属性来识别图像中的文本被证明是最快、最简单、最便宜的解决方案，并且不会妨碍可访问性。如果更多地方需要这种字体，我们最喜欢的解决方案是利用像 Fontdeck 这样的服务，但是额外的下载和增加的费用在这种情况下是不合理的。

以“最佳工程服务奖”框中使用的字体为例，影响，我们知道这是 Windows 和 Mac 电脑中默认普遍安装的字体。在这种情况下，最好的解决方案是创建一个字体堆栈，在没有安装字体的地方，堆栈中的第二、第三甚至第五种字体仍然是可接受的(最终的字体堆栈是Impact, Helvetica Compressed, Helvetica Inserat, Arial Narrow, Tahoma, Geneva, MS Sans Serif,和sans-serif)。参见图 11-6 。

images

***图 11-6。*以首选字体 Impact(顶部)呈现的文本与以字体堆栈中稍后出现的字体呈现的文本之间的比较，在本例中为 Arial Narrow(底部)

这些都是非常简单的例子，说明您可能必须做出妥协，但只要您权衡所有选项，并选择在效率和维护方面最可行的一个，您就应该在正确的轨道上。请记住，您(以及参与设计创建的团队)可能是唯一知道事情看起来不完全正确的人；用户不会在不同的平台上比较网站的表现。

跨浏览器一致性

跨浏览器一致性的主题与前面讨论的妥协主题紧密相关。当我们在开始 CSS 之前分析设计时，我们被告知需要完美跨浏览器的唯一元素是公司的徽标。其他元素在具有 A 级支持的浏览器中应该尽可能看起来相同(浏览器支持指南见附录 3)。

为了确保徽标即使在不支持 alpha 透明 PNG 图像的 IE 6 中看起来也是一致的，我们求助于 Fireworks hack，在那里我们将带有 alpha 透明的徽标导出为 8 位文件；这给了我们支持它的浏览器中的 alpha 透明性和 IE 6 中的索引透明性。这种差异几乎无法察觉，所以被认为是可以接受的。你可以在第八章中读到更多关于这个技巧的内容。

header h1 a:link, header h1 a:visited { background: url(i/logo.png) no-repeat; border: none; width: 132px; height: 46px; display: block; text-indent: -9999px; }

我们可以用下面的代码达到同样的效果，使用一个不同的图像和一个黑客来让我们对 IE 6 的显示有更多的控制:

header h1 a:link, header h1 a:visited { background: url(i/logo.png) no-repeat; ** _background: url(i/logo.gif) no-repeat; /* HACK_IE_6: IE 6 doesn't support alpha** **transparent PNGs */** border: none; width: 132px; height: 46px; display: block; text-indent: -9999px; }

在这种情况下，这种级别的控制是不必要的，但我们已经求助于主样式表中的一些黑客(或过滤器)来克服其他浏览器的差异。我们知道你在想什么:你不应该使用黑客。在需要大量黑客的地方，我们当然不推荐这种技术。但是，当只需要几个文件时(对于整个网站来说)，我们必须务实:我们处理的是高流量的网站，在这里 HTTP 请求需要最小化，并且只为特定的浏览器提供额外的文件从来都不是理想的。只要这是一个全球性的决定，并且开发者被告知他们可以使用哪些黑客技术，我们不认为这是一个你应该绝对忽视的方法。它对性能有积极的影响，并且使值在两种情况下更容易同时更新:符合和不符合。有多少次你忘记了更新 IE 专用样式表中背景图片的文件路径或者相应的min-height / height值？

CSS 中没有考虑到的(但被认为是可接受的变化)最明显的浏览器呈现差异出现在 Internet Explorer 6 和 7 中。

主导航呈现不完美(即 6 和 7)(参见图 11-7 )
不支持用于定位搜索输入的属性选择器，这会影响搜索框的样式(即 6 和 7)。参见图 11-8 。
当不支持:empty伪类时，空的表格单元格呈现背景(即 6、7 和 8)。参见图 11-9 。

images

***图 11-7。*Safari 5(上图)和 Internet Explorer 6(下图)中呈现的主导航

images

***图 11-8。*Internet Explorer 7(右)中搜索框不显示背景图片(火狐 3.6，左)

images

***图 11-9。*火狐 3.6(上)正确渲染空表格单元格。Internet Explorer 8(底部)没有，因为它不理解 :empty 伪类

在某些浏览器中根本不会显示的其他装饰性细节如下:

圆角
主导航中所选链接的透明度
在按钮上投射阴影

根据我们的经验，这些细节是大多数设计师乐于在不同浏览器中以不同方式呈现的。让这些技术在不兼容的旧浏览器中一致地工作所花费的时间以及这些技术对样式表(和标记)的可维护性的影响是不合理的，要知道有更简单的解决方案看起来仍然是正确的。

然而，我们采取了一些措施来为旧浏览器提供最好的解决方案:

一些背景没有使用 CSS3 渐变，而是使用了简单的 GIF 图像。
没有使用高级选择器来定位第一个和最后一个元素，否则会破坏旧浏览器中的布局(由于缺乏支持)，而是使用了类。
在使用透明色的地方，提供了纯色的备用色，尽可能地模拟支持透明的情况下显示的结果。

有时我们需要避开更复杂和高级的功能，如果我们知道这样做会给更多的访问者提供更好的体验。我们不建议你走极端；正如你从上面的列表中所看到的，有更新更简单的方法来做一些在几年前需要几个小时或几天的事情。但有时，通过简单地使用图像而不是 CSS 渐变，对于一些用户来说，体验会成倍地提高，他们会感谢这种努力。

可访问性和链接

在一个网站的创建和开发过程中，易访问性必须是我们脑海中一直存在的东西。就前端开发而言，它必须从最基础的东西开始，即标记，赋予内容意义的东西，然后逐步发展到其他层——样式和行为。

Igloo 冰箱零件公司网站通过以下方式确保尽可能方便访问:

确保网站内容清晰易懂，禁用所有样式，启用 CSS，禁用图片。
确保前景色和背景色的组合对色盲用户有足够的对比度。
测试网站的字体大小上下增加两步(参见图 11-10 )。
不仅为键盘用户提供悬停和活动链接状态，还提供焦点链接状态。
包括一个“跳转到内容”的链接，就在页面的顶部。这将使用户更容易直接进入内容。
以body类和 id 的形式提供钩子，用户可以用它来创建用户样式表。
只要有可能，就使用微格式，微格式可以将内容转换成更易于机器阅读的格式。这有助于屏幕阅读器，以及辅助设备和搜索引擎。
包括一个合理的打印样式表。

images

***图 11-10。*尽管略欠优雅，但这种布局巧妙地保留了两级字体大小的增加。

其他步骤可以添加到您的列表中，例如确保网站的移动版本去除了次要元素(但仍为用户提供查看完整网站的链接)，并确保所有图像文件的大小尽可能小。

所有这些措施都应该存在于 CSS 可访问性指南文档中(参见附录 4)。

我们将链接的主题包含在可访问性中，因为它们是使我们的网站可访问时要考虑的最重要的因素之一，并且经常被遗忘。在我们的样式表中，我们将所有的链接样式加入到一个单独的部分中，这样就更容易比较不同的链接样式，并保证所有必要的链接状态都是样式化的。

你可以在第六章中阅读更多关于可访问性的内容。

文档和设计库

一旦定义了可重用元素，下一步就是将它们保存在一个可以被设计者、开发者和内容编辑者访问的存储库中。

理想情况下，每个可重用的代码片段都应该被可视化地记录下来，并伴随着在页面上使用它所必需的 HTML 标记，以及 Photoshop 文件，以便设计人员可以轻松地进入他们的设计、示例、类名、id 和其他任何可能有用的内容。这个存储库应该对每个人都是可访问的，可搜索的，有版本控制的。

例如，如果我们要记录 serviceBox，显示创建它时使用的不同测量方法将会很有用(见图 11-11 )。

images

***图 11-11。*文档化的可重用模块。

当开发人员需要在页面中使用此框时，他们将复制并粘贴以下 HTML 标记:

Title

Description of title

在这种情况下，我们可以指定这个特定的块不应该被自己使用；它应该总是以三的倍数用于行中，其中每行的最后一个块应该包括“last”类(一个可重用的类，可用于删除一行中最后一个元素的右边距，不管上下文如何)，并在前面加上一个标题(h2)。我们还可以指定每个块应该包含的副本数量，应该包含多少个链接，以及它是否依赖于周围的代码(在本例中不是)。

尽管我们的建议是面向开发人员的，但除了代码和规范之外，还包括可供设计人员使用的 Photoshop 文件(或其他类型的分层文件，如 Illustrator 或 Fireworks)也很有用。

请记住，如果不及时更新，这个库很容易变得无用。给某人分配定期更新的任务是非常重要的。

总结

最后，我们已经准备好了一个网站，它是用 CSS 主干构建的，可以容纳我们想要的任何页面。在这一章中，我们带你剖析了设计，以及你可能必须进行的对话，以确保设计、业务和开发人员之间的一致。我们考虑了哪些元素是可重用的，结构和网格，全局元素，一次性的，以及可访问性。我们还展示了浏览器之间可能的争用点和折衷点，以及如何解决它们。我们得到的 CSS 清晰、简洁、不复杂。覆盖选择器并不困难，并且很容易找到代码中的特定部分。最重要的是，它很快，具有最小的合理文件大小和很少的 HTTP 请求。

我们研究了设计库的构建，这对于实现这些设计的效率和一致性以及将来对网站的修改是至关重要的。我们尽可能地遵循自己的建议，并在我们不同意的地方给出理由。都是为了提高效率，减少冗余。

在四个附录中，您可以找到我们在虚构组织中实现的流程和规则的支持文档，这些文档旨在尽可能对您实用和有用。

我们真诚地希望你能喜欢这本书，并从生产力、成本、品牌认知、用户体验和性能等多个角度，很好地理解 CSS 是如何给你的网站带来巨大变化的。让我们一起努力来构建可扩展的、可访问的、智能的界面，这些界面看起来很美，并且工作起来很直观。每个团队都有自己的做事方式，只要每个人都同意相同的系统，那绝对没问题。我们很想听听你自己的经历。

感谢阅读。现在去写点代码吧！

十二、附录 1 ：CSS 标准指南

本指南仅作为示例，并不详尽。目标是向你展示什么类型的内容可以成为所有 CSS 作者必须遵守的准则。指南的详细程度，或者如何划分不同的文档(例如，您可能希望将本指南和浏览器支持指南合并到一个文档中)由您决定。

这里被称为链接的页面实际上并不存在。它们表明您可能希望创建其他类型的文档，并在公司范围的中央存储库中提供这些文档。

每个指南都应该包括一个理由，以避免进一步的讨论。任何被否决的观点都应该和结论一起记录下来，这样就不会再进行不必要的讨论了。每一项都应编号，以便在文档内或跨文档引用。

Igloo 冰箱零件公司 CSS 标准指南

简介和惯例
履行
通则
评论
格式化
命名
排印
颜色

1。简介和惯例

这些 CSS 指南适用于所有由 Igloo 冰箱零件公司创建和管理的网站，并且在igloorefrigeratorparts.com域名下。

本指南中使用的关键字具有以下含义:

必须遵守这条规则，没有例外。
不得:这个规则意味着绝对禁止，没有例外。
应该:除非有合理的理由，否则任何时候都应该遵守这条规则。
不应:除非有合理的可接受的理由，否则应始终避免这种情况。
MAY :该规则允许在特定情况下实现特定措施。

有关可访问性指南，请阅读可访问性指南。

您可以从“模板和资产”部分访问必要的模板和文件来启动一个新项目。

请参考浏览器支持指南了解关于浏览器支持、QA 的信息，以及如何避免一些常见渲染错误的提示。

2。履行

2.1 所有的 CSS 应该从外部加载，因为它支持缓存控制并使 HTML 更小。

2.2 外部 CSS 必须通过link元素引用，其中必须放置在文档的头部分，尽可能靠近顶部，但在title元素之后。这将提高性能，不会妨碍搜索引擎优化。

2.3 外部样式表必须使用@import导入 而不是，因为它会损害缓存并阻止渲染。调试文件是此规则的唯一例外。

2.4 在仅特定页面需要样式规则的情况下，不应使用文档头 CSS**。这样做会使这些规则不可缓存且不一致。**

2.5 所有链接的样式表必须存在(你不得**使用占位符)。丢失的文件会产生不必要的请求，这可能会影响性能，而 404 错误可能会影响 SEO。

2.6 CSS 文件应该在网站的“CSS”目录下。属于 CSS 的图像应该保存在“CSS”目录中名为“I”的目录中。这使得“css”目录与位置无关。

2.7 所有 CSS 文件必须通过调试文件中的@import语句引用，尽管可能有多个(一个全局文件和一个部分文件)。这有助于调试。

2.8 在生产中，提供的 CSS 文件必须通过 YUI 压缩器连接和缩小。调试文件必须用作 CSS 文件列表的来源。这提高了性能和可维护性。

2.9 你应该在适当的时候使用 CSS 精灵。这提高了性能，因为它减少了 HTTP 请求。这在针对低带宽设备时尤为重要。

2.10 你一定不要使用 CSS 表达式，因为浏览器支持很差，而且它们没有性能。

2.11 你不能使用 CSS 行为(HTC 文件)，因为浏览器支持很差，它们会产生 JavaScript 依赖。

2.12 您不应该使用数据 URIs，因为它们比它们的等效文件要大，会破坏缓存控制。

3。通则

3.1 您应该使用 UTF-8 字符编码。这有助于避免本地化错误。

3.2 你不得使用内联 CSS。这样做会使这些规则不可缓存且不一致。

3.3 你不得使用!important。它可能会妨碍用户样式表的良好使用，并使其他作者很难覆盖该 CSS 声明。

3.4 您不应该使用通用选择器(*)创建规则，因为它可能会产生意想不到的效果，破坏继承性并影响性能。

3.5 您不得创建通用选择器(*)与其他选择器一起使用的规则，因为这将破坏继承并影响性能。

3.6 你应该避免使用高级的、复杂的选择器，或者 CSS3 选择器，当一个简单的类或 id 就足够了。复杂的选择器会影响性能。

3.7 你应该从不太具体的规则(p)开始，并在需要时增加具体性(从右到左)。aside p”)。这有助于在必要时覆盖规则，并保持规则简单。

3.8 每个将要使用的 HTML 标签必须至少有一个简单的 CSS 元素选择器，并应用基本样式，或者必须有意识地决定使用浏览器默认设置(例如，在表单元素中)。这确保了浏览器之间的一致性。

3.8 您不应为 0(零)值指定单位。这些都没必要。

3.9 你必须只用 CSS 动画做视觉装饰，不做功能性。不能指望对他们的支持。

3.10 你应该测试你的样式表是否有多余或重复的选择器。

3.11 应尽可能使用的速记属性**。请注意，它们将覆盖单个属性。**

3.12 你应该 而不是修改已建立的文件(缩小并连接的文件)。这会造成混乱，您的更改将会丢失。

3.13 除字体之外的所有内容都应以像素为单位调整大小。

3.14 每个页面应该在引用该页面的body标签上有一个 ID，这样就可以有针对性地定位。例如:

**<body id="home">

3.14 每个页面必须在的body标签上有一个类，该类引用页面语言的语言和国家组合，这样就可以有针对性地使用。例如:

<body class="en-us">

4。评论

4.1 文件(CSS 文件顶部的初始注释)和节注释应遵循 CSSDOC ( [cssdoc.net/](http://cssdoc.net/))格式。CSSDOC 提供了一种标准化的注释方式。CSSDOC 注释块(DocBlock)具有以下结构:

/** * Short description * * Long description * * @tags (optional) */

4.2 一个 CSS 文件必须在顶部包含一个文件注释，包括以下信息:文档标题、简短描述、详细描述(可选)、相关项目、作者、版权和颜色信息(可选)。例如:

/** * Christmas theme * * CSS theme for the Christmas version of the Igloo Refrigerator * Parts Inc website * * This theme should only be used between the dates of November * 7th and January 7th * * @project IRP Christmas Site * @author Design Team at IRP Inc * @copyright 2011 Igloo Refrigerator Parts Inc * * @colordef #111111; main text * @colordef #999999; headings * @colordef #9f0000; unvisited links * … */

4.3 CSS的所有相关块应该以这种格式加上一个节注释作为前缀，以帮助 CSS 文档的可视扫描和可搜索性:

/** * Typography * * @section typography **/

请访问“模板和资产”部分，访问带有注释示例的基本 CSS 模板。

4.4 您不应在评论中提及版本号或日期，因为版本控制系统会维护这些信息，如果手动管理，这些信息可能会过时。

4.5 你应该维护文件中各部分的目录。例如:

/** * Table of contents * * Structure * Generic typography and lists * Global elements * Links * Forms * Tables * Visual media * Components * Reusable * One-offs */

4.6 需要计算的值应该有一个行内注释，显示得出该值的必要步骤。例如:

#main { margin-left: 220px; /** aside width + 20px of margin */ } aside { width: 200px; float: left; }

4.7 需要在不同文件中更新的属性应被正确注释。比如修改min-height属性时，IE 6-only 样式表中的height属性需要同时更新。两个属性旁边的注释应该反映这一点。

5。格式化

5.1 规则的左括号应该与最后一个选择器在同一行，选择器和括号之间有一个空格。每个属性/值对应该在一个单独的行中声明，并带有一个缩进标签。规则的右括号应该在单独的一行。每个属性应该在冒号和属性值之间有一个空格，并以分号结束。这里有一个例子:

#content { color: red; font-size: 1em; }

5.2 多个选择器规则应该每行声明一个选择器。例外可能适用于重置样式表或其他有许多短选择器的多重选择器规则。

5.3 供应商特定属性应包含在所有其他属性之后，以形成清晰的视觉区别。指定的 W3C 名称必须在特定于供应商的替代项之后声明(例如，border-radius 必须在-moz-border-radius和-webkit-border-radius之后声明)。

6。命名

6.1 类名和 ID 名必须小写。类别和 ID 名称应该只包含一个单词。如有必要，单独的单词必须通过驼峰式大小写分隔，例如:highlightModule。在使用骆驼大小写和首字母缩写词的情况下，如果首字母缩写词在开头，它应该是小写的(例如，wwwLink)；否则大写(linkWWW)。

6.2 类别和 ID 名称必须仅使用字母数字字符和连字符。它们不得包括下划线、正斜杠或反斜杠或星号；或者以数字字符开头。

6.3 类名和 ID 名应该尽可能具有语义，而不是表示性的。例如，你应该将警告消息样式命名为“警告”，而不是“红色”你应该总是尝试使用易于识别的类名和 ID 名，比如“nav”、“side”或“footer”

6.4 您应该使用微格式或等同物，如微数据或 RDFa，如果存在适当的用途。

6.5 名称空间必须用连字符与类名或 ID 名的其余部分隔开。例如:“igr-blogWidget”，其中“igr”是命名空间。

7 .。排印

7.1 您必须仔细选择字体堆栈(遵守品牌指南)。 ¹ 从理想字体开始；随后是更可能安装在用户系统上的字体；随后是安装在大多数用户系统中的字体；最后这些默认fonts: sans-serif、serif,或monospace中的一个。

7.2 当你用大写字母显示文本时，你必须通过text-transform属性转换文本。这有助于以后设计的改变。

7.3 字体应使用 ems 调整的大小，但可以用%或关键字值调整的大小。它们不能以像素为单位，因为这破坏了只缩放文本的能力。

8。颜色

8.1 使用十六进制颜色时，你必须用小写字母，因为这有助于提高压缩效率。

8.2 您可以使用以下小写的命名颜色:黑色、白色、红色、蓝色。命名的颜色更容易阅读。

8.3 您不应使用 8.2 中定义的颜色之外的命名颜色，因为它们的值可能会被开发人员解释。

8.4 具有图像背景的元素必须具有定义的后退背景颜色。这使得页面在加载图像时更容易使用，并避免了不协调的颜色变化。

我们不会给你提供品牌指南的例子，因为它们超出了本书的范围。我们假设您的组织已经有了它们。

8.5 当使用 RGBA 颜色时，你必须在它之前声明一个后退的十六进制颜色，这样不支持 RGBA 的浏览器仍然可以显示一种颜色。你不应该在非透明色就足够的地方使用 RGBA 色。

8.6 您不得使用与背景颜色相同的前景文本颜色来隐藏文本。这将导致搜索引擎惩罚搜索结果。

CSS 编码标准参考文献

存在许多示例编码标准。以下是我们从中获得的一些灵感，你可能也会觉得有用:

BBC 未来媒体标准和指南——层叠样式表(CSS)标准 1.3 版[www.bbc.co.uk/guidelines/…](http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml)
BBC 未来媒体标准和指南——颜色和颜色对比标准 1.7 版[www.bbc.co.uk/guidelines/…](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/colour_contrast.shtml)
英国广播公司未来媒体标准和指南――文本链接标准 v2.1 [www.bbc.co.uk/guidelines/…](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/links.shtml)
BBC 未来媒体标准和指南――浏览器支持标准 3.72 版[www.bbc.co.uk/guidelines/…](http://www.bbc.co.uk/guidelines/futuremedia/technical/browser_support.shtml)
Drupal CSS 编码标准[drupal.org/node/302199](http://drupal.org/node/302199)
WordPress CSS 编码标准[codex.wordpress.org/CSS_Coding_Standards](http://codex.wordpress.org/CSS_Coding_Standards)
斯托扬·斯特凡诺夫的 CSS 编码惯例[www.phpied.com/css-coding-…](http://www.phpied.com/css-coding-conventions/)
安索帕北美代码标准[na.isobar.com/standards/](http://na.isobar.com/standards/)****

十三、附录 2：无障碍指南

您的组织用来确保网站可访问性的准则可能独立于您的编码标准。它们将比这里展示的例子更加全面，因为它们还应该涵盖标记、JavaScript 和内容。我们重复了编码标准文档中的一些项目，以便这两个文档作为独立的实体工作。

Igloo 冰箱零件公司 CSS 可访问性指南

简介和惯例
通则
排印
链接
颜色

1。简介和惯例

这些可访问性指南适用于所有由 Igloo 冰箱零件公司创建和管理的网站，并且在igloorefrigeratorparts.com域名下。

本指南中使用的关键字具有以下含义:

必须遵守这条规则，没有例外。
不得:这个规则意味着绝对禁止，没有例外。
除非有合理的理由，否则应始终遵守这条规则。
不应该:除非有合理的理由，否则应始终避免这一规则。
MAY :该规则允许在特定情况下实现特定措施。

关于编码标准，请阅读 CSS 标准指南。

您可以从“模板和资产”部分访问必要的模板和文件来启动一个新项目。

请参考浏览器支持指南了解关于浏览器支持、QA 的信息，以及如何避免一些常见渲染错误的提示。

2。通则

2.1 站点必须满足优先级 1 的 WCAG 检查站([www.w3.org/TR/WCAG10/f…](http://www.w3.org/TR/WCAG10/full-checklist.html))。

2.2 站点应满足优先级 2 的 WCAG 检查站。

2.3 站点应满足优先级 3 的 WCAG 检查站。

2.4 你不得使用!important。它可能会妨碍用户样式表的良好使用，并使其他作者很难覆盖该 CSS 声明。

2.5 你必须为网站上的每个页面在body元素上放置一个一致的类，给用户样式表一个钩子。例如:

<body class="iglooRefrigeratorSite">

2.6 您应该避免任何闪烁的内容。

2.7 你应该用大白鲨([www.freedomscientific.com/products/fs…](http://www.freedomscientific.com/products/fs/jaws-product-page.asp))、NVDA ( [www.nvda-project.org/](http://www.nvda-project.org/))或麦克·OS X 画外音([www.apple.com/accessibili…](http://www.apple.com/accessibility/voiceover/))等屏幕阅读器查看网站。

2.8 你可以使用替代样式表，但是如果你这样做，你必须提供一种页面内切换的方法，而不是依赖于浏览器。

2.9 您不得依赖悬停状态或动画来传达信息。

3。排印

3.1 默认字体大小不得小于【12px。

3.2 网站必须接受至少两步(每个方向)的字体大小增减测试。

3.3 字体应使用 ems 调整的大小，但可以用%或关键字值调整的大小。它们不能以像素为单位，因为这会破坏某些浏览器中的纯文本缩放。

3.4 当你用大写字母显示文本时，你必须通过text-transform属性转换文本。这避免了屏幕阅读器拼写单词，好像它们是首字母缩写词。

4。链接

4.1 链接应该总是按照以下顺序为它们的已访问、悬停、活动和聚焦状态定义一个样式::link, :visited, :hover, :active, :focus。

4.2 你不能**给不是链接的文本加下划线，因为这会让用户感到困惑。

4.3 链接应该有大的可点击区域。

5。颜色

5.1 已访问链接的颜色应该不同于未访问链接的颜色。对于色盲用户来说，这种色差必须明显。

5.2 文本和背景的颜色对比必须至少有 125 的亮度差和至少 400 的色差。使用 Jonathan Snook 的色彩对比检查([snook.ca/technical/colour_contrast/colour.html](http://snook.ca/technical/colour_contrast/colour.html))进行确认。

5.3 您不得使用任何色盲患者无法辨别的颜色组合。

5.4 您不得仅用颜色传达信息。

5.5 导航必须能够通过颜色以外的方式识别。

5.6 具有图像背景的元素必须具有定义的后退背景颜色。这使得页面在加载图像时更容易使用，并避免了不协调的颜色变化。

5.7 你应该用色盲模拟器测试网站的颜色组合，比如 Color Oracle ( [colororacle.cartography.ch/index.html](http://colororacle.cartography.ch/index.html))。**

十四、附录 3：浏览器支持指南

浏览器支持的准则可能独立于您的编码标准。所有这些指导方针都应该相互链接，并存在于维基上。有些项目可能会重复其他文件，使指南可以作为一个单独的实体。

Igloo 冰箱部件公司浏览器支持指南

简介和惯例
通则
避免常见错误
黑客和过滤器
设备

1。简介和惯例

这些浏览器支持指南适用于由 Igloo 冰箱零件公司创建和管理的所有网站，并且在igloorefrigeratorparts.com域名下。

本指南中使用的关键字具有以下含义:

必须遵守这条规则，没有例外。
不得:这个规则意味着绝对禁止，没有例外。
除非有合理的理由，否则应始终遵守这条规则。
不应:除非有合理的可接受的理由，否则应始终避免这种情况。
MAY :该规则允许在特定情况下实现特定措施。

关于编码标准和可访问性考虑，请分别阅读 CSS 标准指南和可访问性指南。

您可以从“模板和资产”部分访问必要的模板和文件来启动一个新项目。

2。通则

2.1 您必须根据分级浏览器支持页面上的分级浏览器支持图表测试网站。 ¹

2.2 您必须使用以下设置组合测试网站:CSS on/images on、CSS on/images off 和 CSS off/images off，因为它们涵盖了大多数真实场景。

2.3 每个设备上的位置必须清晰可辨且功能正常。

3。避免常见错误

3.1 你不应该在同一个元素上同时设置宽度/高度和填充，因为如果浏览器以怪癖模式呈现页面，这可能会导致布局中断。

3.2 绝对定位的元素应该定义水平和垂直定位，以避免继承问题。

3.3 浮动元素应该有一个固定的宽度，因为有些浏览器会有不可预测的行为。

3.4 你应该在 IE 6 中为height设置一个值，其中min-height是为其他浏览器设置的，因为这个浏览器不理解min-height。

3.5 相对定位一个元素时，你应该确保你触发了 hasLayoutposition:relative不触发 hasLayout(见 4.7)。

4。黑客和过滤器

4.1 你不得使用可能潜在地针对未来浏览器的条件注释。例如，你不得瞄准 IE，但你可以瞄准 IE 6 或更低版本。

4.2 应避免的黑客攻击和过滤**。当它们不可避免时，它们必须被适当地记录；你应该提供一个到文档化解决方案的链接，以及 bug 的通用名称，如下所示:**

/** HACK_IE_LTE_6: “display: inline” fixes the Double Float Margin bug on IE5/6\. More on this bug/solution: http://www.positioniseverything.net/explorer/doubled-margin.html */

4.3 在 Internet Explorer 中使用黑客和过滤器时，它们必须以注释为前缀，如下所示:

HACK_IE_LTE_7:

我们在此不包括本文档，因为我们通常建议使用 Yahoo！分级浏览器支持作为一个开端。您应该根据您的报告工具和用户使用的浏览器来修改它。

此评论意味着对 IE 7:

HACK_IE_7:

这个评论意味着对 IE 版的一次黑客攻击。这种方法使得将来搜索这些黑客变得容易。

4.4 您不得使用黑客攻击此列表以外的浏览器:

下划线黑客
- 要针对 IE 6 及更低版本，请在属性名前加下划线。
- 示例:_property: value;
明星黑客
- 要针对 IE 7 和更低版本，请在属性名前面加一个星号。
- 示例:*property: value;
反斜杠 9 hack
- 要将 IE 8 及更低版本作为目标，请在该值后面加上反斜杠 9。
- 示例:property: value\9;

4.5 为了瞄准 IE 的多个版本，你可以结合 4.4 中描述的技巧。例如:

property: value\9; /* HACK_IE_8: Comment… */ *property: value; /* HACK_IE_7: Comment… */ _property: value; /* HACK_IE_LTE_6: Comment… */

4.6 如果 4.4 中没有提到您需要使用的黑客，您必须同意并将其添加到本文档中，然后才能使用。

4.7 你不应该将zoom:1用于正常目的，而只是为了修复 IE 中无法用更干净的解决方案修复的 hasLayout。

4.8 你应该使用 CSS 验证作为修复可能错误的第一步。

5。设备

5.1 您必须根据移动分级浏览器支持页面中的移动分级浏览器支持图表测试网站。 ²

5.2 背景图像应该应用于具有该设备特有的类的元素，而不是没有应用类的元素，因为这些图像可能会被不必要地下载。

² 我们在这里不包括这个文档，因为我们通常建议使用 jQuery Mobile 的移动分级浏览器支持([jquerymobile.com/gbs/](http://jquerymobile.com/gbs/))作为起点。您应该根据您的报告工具和用户使用的浏览器来修改它。

5.3 你应该支持打印样式表。主样式表应该将指向“所有”，这样就不会遗漏任何设备。

5.4 在打印样式表中，使用背景图像作为项目符号的列表应该恢复默认的项目符号，因为大多数浏览器在默认情况下不会打印背景图像。

5.5 对于印刷媒体来说，导航元素通常不是必需的，因此应该通过 CSS 隐藏。

5.6 在可能的情况下，浮动容器应该为打印样式表而不浮动。

5.7 在打印样式表中，字体大小应该用 pt 设置。

5.8应该是外部链接上链接的href属性的指示。关于如何做到这一点，请访问一个列表:“CSS 设计:打印”([www.alistapart.com/articles/go…](http://www.alistapart.com/articles/goingtoprint/))。

5.9 您应该确保表格和图像不会在分页符上被裁剪。

十五、附录 4：开发流程

你的开发过程指南应该和你的编码标准分开放在 wiki 上。这些过程可以(也应该)经常改变，所以需要有一个单一的授权点供团队参考。

Igloo 冰箱零件公司的发展过程

本文件描述了我们打算在组织内使用的流程。这个过程可以从一个团队修改到另一个团队，但是这个指南应该作为新项目的基线。这份文件应该放在维基上，应该鼓励围绕改进它的讨论。每个项目都应该根据自己的目的修改文档，使其更加符合预期的过程。

开发过程跨越了从接收需求到部署到生产的时间。

团队

该项目的团队定义如下:

项目管理人
服务器端开发人员 x 2
前端开发人员 x 2
测试员

迭代

该项目被分成两周的冲刺(或迭代)。这个长度足够长，以避免每次冲刺的成本和时间影响，但又足够短，以对变化做出快速反应。每次迭代将在星期一开始，在之后的第二个星期五结束。在项目开始之前，我们必须已经有了业务需求和设计的列表。这些不应该改变，但它们可能会改变，这个过程就是为了适应这一点。

第一次冲刺被称为零迭代。在迭代 0 期间，任何阻碍团队执行其角色的事情都将被处理。这可能包括设置环境和构建、向工具添加用户或许可证、购买软件和硬件等等。在此迭代结束时，团队将拥有以下内容:

对需求的良好理解
代表整个项目的故事的优先列表
系统预期架构的概念
团队成员开始开发所需的一切
具有必要的构建脚本和调试方法的工作持续集成环境

故事

在迭代 0 期间，需求将被分解成当前时态的故事，如下所示:

登录 web 服务存在
用户可以登录

每个故事都有一个验收标准，这是用来定义一个完整的故事。测试人员应该熟悉边缘情况和安全漏洞，他们会帮助解决这些问题。在这个过程中，可能会发现其他需求。非功能需求 ¹ 也应该被考虑，因为故事也可能由此产生。验收标准示例如下:

登录 web 服务存在
- 服务必须接受两个参数:用户名和密码
- 服务必须忽略任何进一步的参数
- 当用户名和密码与数据库中的条目匹配时，必须设置登录的 cookie 和用户重定向到安全页面
- 如果用户名和密码与数据库中的条目不匹配，用户必须被重定向回原始页面并显示错误

这些故事将在 JIRA 和绿漏斗中被追踪。这些故事也将按优先顺序排列。没有哪两个故事具有相同的优先级。

结构和版本控制

我们将使用 SVN。我们的(前端)文件夹结构如下:

/ css/ build/ [Build files] i/ [CSS imagery] [CSS files] all-debug.css i/ [Imagery] js/ [JS files] [HTML files] favicon.ico

非功能需求是那些描述系统应该如何而不是应该做什么的需求。例子包括正常运行时间、性能、可靠性和可用性。

所有的 CSS 文件都将建立在css文件夹中。需要多少就有多少，以使开发容易。每个 CSS 文件都将在@import 语句的all-debug.css中被引用。这里有一个例子:

`@charset "UTF-8";

@import url(reset.css); @import url(main.css);`

构建脚本 ² (在构建目录中)将手动运行，该脚本将解析该文件，连接所有引用的文件(以@charset为前缀)并将这些文件保存为all-concat.css.最后，它将使用 YUI 压缩器缩小该文件并将其保存为 all.css。在开发中，HTML 文件将指向all-debug.css，但在生产中，它们将指向all.css. all-concat.css可能对调试构建过程有用。每当一个 css 文件被提交到 SVN 时，CSS 目录上的一个 SVN 钩子将自动触发这个构建脚本。

计划会议

在迭代 0 之后的每个 sprint 的开始，在上午 10 点，团队将召开一个计划会议，由项目经理主持。首先，项目经理将计算他可用的资源。我们将只需要服务器端和前端开发人员的总数。我们假设团队的每个成员每天有六个小时的工作时间来开会、回复邮件等等。我们会考虑计划的假期或休息日。我们将从这个迭代的第一天和最后一天的会议总数中减去三个小时。例如，这将为我们提供以下总数:

服务器端开发人员
- 2 *(6 * 10)-3)= 114 小时
前端开发人员
- 2 *(6 * 10)-3)= 114 小时

接下来，最高优先级的故事将被分解成任务。这些任务是为开发人员准备的，所以它们需要对开发人员有意义。每个任务都将被标记为服务器端或前端任务，并且每个任务都需要一个针对它的时间估计。估计值应该能被三个小时整除——如果少于三个小时，多个任务可能会合并在一起。估计应该是四舍五入。当估计任务的适当时间时，两个适当的开发人员应该进行对话，直到他们都同意估计时间，尽管团队的其他成员可能会参与讨论。任务应该(像故事一样)按优先顺序排列。以下是任务示例:

故事:登录 web 服务存在
- 前端:创建 HTML—3 小时
- 服务器端:创建服务器端表单验证—3 小时
- 前端:创建前端表单验证—6 小时
- 前端:创建 CSS—6 小时
- 服务器端:设置 cookie—3 小时
- 服务器端:根据数据库检查详细信息—6 小时
- 服务器端:实现重定向—3 小时 ³

本书的网站上有一个构建脚本的例子。

项目经理应该根据他可用的总资源来计算。一旦对这个故事进行了评估，剩下的可用资源是 99 个前端开发小时和 99 个服务器端开发小时。这个故事及其任务现在应该在我们的工具(GreenHopper)中移动到迭代中。接下来，团队将对剩余的最高优先级的故事做同样的事情，并将继续这个过程，直到没有更多的时间可用。最后，将估计另一个故事，并将其视为项目的延伸，即我们可能无法实现这一点，但如果我们实现了，我们会实现的。

站立会议

在第一次计划会议后，团队可以开始开发。每天上午 10 点会有一个站立会议，由项目经理主持。任何迟到的团队成员都会被扣分。三次标记后，该成员必须在下一次会议上购买整个团队的甜甜圈！公司代表将被鼓励参加这些会议，但不应发表意见。会议期间，每个人都将聚集在一个显示 JIRA 项目当前状态的屏幕周围。这会让你立刻清楚每个人都在做什么。项目经理应该突出任何看起来需要很长时间才能完成的任务，任何没有正在进行的任务的开发人员，并隔离任何阻碍团队完成任何工作的东西(以及创建解决这些问题的行动)。

日常发展

在会议之外，开发人员应该从队列中取出优先级最高的任务，并将其标记为进行中。他们应该什么也不做，只是继续工作，直到任务完成。当它完成时，他们应该添加一个注释，让测试人员知道如何测试该任务，然后继续下一个可用的任务。

测试人员应该签署任何已完成的任务，并将其标记为完成。如果它因为某种原因没有通过测试，测试人员应该添加一个注释来解释它是如何没有通过测试的，并将它移回任务队列中。只有从事该任务的开发人员应该去做。

当一个故事的所有任务都被标记为完成时，测试人员和项目经理应该一起检查这个故事的所有验收标准。如果一切都可以接受，这个故事将被标记为完成。

在迭代过程中，sprint 中不应该有任何改变或添加。然而，只要有可能，可以将新的故事添加到 backlog 中，或者重新排列当前 sprint 之外的故事的优先级。

总结会

每次冲刺的最后一天都有两次会议。首先，由项目经理主持的总结会议将在下午 3 点举行。在这个会议中，任何未完成的任务和故事都将被移回到 backlog 中，项目经理将计算出 sprint velocity。这是在之前的 sprint 中实际完成的估计工作的小时数。随着时间的推移，这个值可以用来计算实际达到的平均小时数，这将有助于在未来的迭代中进行更准确的估计。

请注意，CSS 将是最后发生的事情。这是为了在过程中尽可能晚地修改设计。设计是最有可能改变的东西，虽然我们应该尽量避免这一点，但我们也应该为此做好准备。

回顾

每个 sprint 最后一天的第二次会议是回顾会议，由项目经理主持。回顾的目的是讨论迭代进行得如何，出现了什么问题，以及如何解决这些问题。它也应该被用来认可任何在前一次迭代中表现良好的团队成员。如果团队实现了高速度，在可能的情况下，我们会带团队去附近的酒吧或餐厅，在那里开会作为奖励。

回顾的形式如下:

首先，团队(不包括项目经理)将花一分钟在便利贴上写下他们认为在前一次迭代中进展顺利的事情。
项目经理将仔细检查这些，把相似的项目放在一起。一堆物品越多，团队对这些特定物品的感觉就越积极。每一个都应该加以讨论，并向适当的成员表示祝贺。
接下来，团队(不包括项目经理)将花一分钟在便利贴上写下他们认为在前一次迭代中做得不好的事情。
项目经理将仔细检查它们，对于每一个项目，必须记录一个行动来解决它。每个行动必须有一个人负责执行(通常是项目经理)，并且必须在下一次回顾时完成。
如果流程需要改变，我们会改变！
最后，团队应该就所有事情的进展进行非正式的交谈。这是提出一般抱怨或与工作无关的问题的好时机，也是团队团结的好时机。

整个项目的最后一次回顾将是项目回顾。这将采取与任何其他回顾相同的形式，但是将基于整个项目，而不仅仅是前一次迭代。项目经理可能希望向比他的团队更广泛的观众展示他的发现，认可他们，并分享他们可能已经实现的对他们的过程的任何改变，这可能对整个组织有帮助。

调度

下面是迭代计划的快速回顾:

星期一
- 上午 10 点计划会议
星期二至星期五
- 上午 10 点单口相声
周一至周四
- 上午 10 点单口相声
星期五
- 上午 10 点单口相声
- 下午 3 点总结会
- 下午 4 点回顾

保修

整个过程将被重复，直到没有更多的故事，或该项目被视为完成。在这一点上，项目被发布到一个质量保证(QA)的环境中，这涉及到更深入的测试，以确保项目为发布做好准备。然后，项目立即发布到生产，并被认为是在三个月的保修期内。

最后，团队将转移到下一个项目，尽管它必须能够解决在保修期内发现的任何进一步的错误。