Throwing Tables Out the Window

这是一篇翻译自 blogger.com 的新版网站界面设计者 stop design 网站的文章，如果对原文感兴趣，可以访问 Douglas Bowman 的英文原著。

如果您对本译文有任何疑问或者意见，请直接对本 blog 文章发表评论，或者给我发送电子邮件。

文章摘要

很多网站已经对 CSS 这片海洋进行了深入充分的测试，现在我们从水底开始欢呼的时候到了，让我们奉劝并鼓励那些还没有跳下水来的人，赶紧加入我们的行列。现在已经没有任何理由继续用表格来排版，也没有理由为不同的浏览器维护同一个网站的多个版本。赶快把表格扔掉吧，相信我们，你不再需要它们了！（译文：巴西葡萄牙语，丹麦语，法语，德语，意大利语，日语，西班牙语和土耳其语）

Throwing Tables Out the Window

妈妈快看，没有表格哟！

那些参加了今年在西雅图的 Digital Design World 的朋友们可能看到我主持了一场题为“No More Tables, CSS Layout Techniques”的讨论。在讨论中，我们回顾了一下表格的正确用法，以及一些用 CSS 来达到同样目的的方法。然后我们转向无表格排版，列举了一些范例并概括出两种基本的途径：控制位置和悬浮（positioning and floats）。

讨论进行到一半的时候，我改换了风格，宣布我们将就现实中的实例，实现从表格和占位 GIF 图片的排版方式向纯 CSS 排版的转换。我原本可以设置一个虚拟的例子用在讨论中，但是这个看起来会显得非常做作。如果我设置了我自己的例子，它看起来可能会显得漂亮整洁，所有的一切都会被按照我想象的那样被渲染，会避开所有我已知的问题点。
虚拟的还不够好，我要向真实的案例挑战。所以我选择了一个为大部分听众所熟悉的西雅图本地的小公司：

OK，大概并不只有一部分听众熟悉这个并不那么小的公司。很多用户每天都要登录微软网站的官方网站，不管它是不是像搜索巨头 Google 以及 Yahoo! 那样出名或者被经常用到，勿庸置疑的是，每天有数以百万计的用户访问 microsoft.com ，它为我们的互联网带来了极大的流量。

遗憾的是微软并没有竭尽全力优化她的网站。用户下载着不必要的大型页面，服务器为了支持他们浪费着额外的带宽。对于 40KB 来讲，微软首页的 HTML 还算不上是洪水猛兽，但是它负担着无法访问的、七拼八凑的、基于表格并充斥着各种属性的标记，以及一些笨拙的 JavaScript。注意我并没有提到这些是不是有效的标记。尽管它采用了 XHTML 风格，但是微软在其页面上漏掉了 doctype 声明。

为什么是微软？

这是不是仅仅另外一次对微软的挑剔？

直率地，诚恳地说，不是！

我选择微软并不是为了跳上时尚的抨击讲坛，或者向业内人们喜欢讨厌的公司多扔些鸡蛋。（我从未放弃任何机会来置疑微软做出的某些决定，但是我总是避免指责。）

我承认我有意地选择并锁定了一个备受瞩目的公司，我天生喜欢追逐领头羊。不过，作为范例，大部分人都熟悉她。microsoft.com 曾经是（现在仍然是）完美的 CSS 标准改造候选者。

以下是原因……

原因 #1

因为它低效率地用大量的表格和占位 GIF 来排版。当内容用表格进行排版后，页面的兼容性会更差，甚至无法访问。并不只有微软有这个问题。目前网络上绝大多数的网站仍然使用大量的表格用于页面排版，或者其它纯粹的视觉目的。我选择微软的网站，是因为它和很多其它网站有着同样的问题，而且它可以作为一个著名的范例（甚至最后成为模范）。

原因 #2

因为微软网站首页当前设计的基本结构和成千上万的网站的设计有着共同的模式：页眉 + 3 栏 + 页脚。进一步讲，页眉横跨整个页面上部，左栏主要包含导航系统，主栏放内容，右栏提供额外的资料，然后页脚在三栏下面同样横跨整个页宽。即使不是三栏式排版，很多网站也可能使用和这个结构类似的二栏式排版：一个边栏放在主栏的左边或者右边：

原因 #3

因为微软的网站对 CSS 的利用，仅限 FAC （字体和颜色）。我更希望看到这个曾经在应用环境下发明了样式表基础理论的公司，更偏重于 CSS，而非旧的方法。

原因 #4

因为目前微软根据浏览其网站的浏览器的不同，提供网站的不同版本。一个提供给 Windows 的 Internet Explorer (v5.5 及以上)，另一个什么 dumbed-down 的版本提供给所有其它的浏览器（包括 IE 和 Mac），它省略了一些图片，以及所有的产品徽记。这个非 IE/Win 的版本去掉了一些功能（如弹出式菜单），并用不同的技术来渲染页面元素。如果您有 IE 5.5 或以上版本，以及另外一个浏览器，您可以自己查看。如果没有，以下是两种不同版本的屏幕截图，并用红色的圈标出了不同的地方：

非 IE/Win 的版本和为 IE/Win 提供服务的版本相比，明显简陋得多。我们都知道它其实并不需要这样。这并不只是在某些浏览器上能够工作而在其它的浏览器上却不行的草率代码。微软故意做了一个 JavaScript 浏览器探测，当浏览器是 IE 5.5 或更高版本时，它会将浏览器重定向到另一个页面上。其实，微软可以只维护一个能够运行在所有浏览器上的版本。

微软还只是为非 IE/Win 的浏览器用户提供了其网站的另一个版本，有些开发者所做的可能远不止这些。一些网站放弃对其它浏览器提供支持，我们听到的最多的原因是 MSIE/Win 被绝大多数用户使用，同时为任何其它的浏览器提供正确的页面会花费太多时间。有些则抱怨说为 IE/Win 之外的浏览器开发太昂贵。其实，“太多时间”和“太昂贵”的说法并不成立。

很多开发者相信这些说法，因为他们是从为 IE 开发——并在 IE 中检查——开始的。当他们用另一种浏览器来查看的时候就会感到沮丧——他们看到各种各样他们认为必须去修正的 bug。

IE 和其它在近两年不断升级版本的浏览器（Mozilla、Firefox、Safari、Opera……）相比，对 CSS 的理解更加松散。从 IE 开始开发，意味着在开发早期发现的问题会更少一些。先在 IE 上开发，然后尝试更新支持其它浏览器，从长期来看这将增加时间和金钱的消耗。但是，我们有一个更好的办法能够更快更省钱的解决这个问题。

从更严格的浏览器开始开发，这些浏览器通常按照它们应该渲染页面的方式去渲染。先让页面在这些浏览器上运行正常，然后再回来为 IE 做一些“修补”。用这种方式，开发将快得多。虽然初期这样会让页面在您流量分析中出现得绝大多数浏览器上不太直观，但是如果您并不打算习惯——或者依赖——IE 松散的渲染行为的话，这个开发过程要流畅和有效率得多。从 IE 开始开发，您可能会花费更长的时间来修改开始的代码，以便适应更严格的浏览器。

走这条路，我们仍然有 IE 方面的问题需要关注。但是，当我们有了更多关于 IE 错误的 CSS 渲染行为的经验后，IE 方面的问题从一开始就降到最少，这是肯定的。

请说事实

在讨论的后半段，我们从头到尾地经历了将微软基于表格和占位 GIF 排版的页面，转换为更容易访问的、纯 CSS 驱动的版本，使其能在任何浏览器上运行。这并不新潮，以前已经有人对 microsoft.com 进行过重新编码。本站一些常来的读者从事无表格的设计到现在已经一年多了。尽管 CSS 海洋的水已经被公平的全面测试过，但是我们仍然没有看到更多的人跳下水。因此有了 Digital Design World 上的讨论，有了这片文章。

在接下来的讨论中，我们将每个环节分成容易操作的若干个小块。我指出了过程中的主要步骤，包括去掉表格，将它们转换成更容易理解的标记，以及用来忠实重现微软首页设计每一个环节的 CSS 技术。

在整个讨论过程中，我们每个环节都演示了很多形象的东西（图示、截屏、统计图表等）来帮助理解这些渲染技术。我也预先准备了在每个环节需要的文件代码。

撰写此篇文章的其中一个目的，是为了发布对 microsoft.com 进行改造的最终结果，看起来有点让人难忘：

	当前设计 (IE/Win)	当前设计 (其它)	改造后
使用表格	40	36	0
占位 GIF	35	76	0
总 <img> 标签	43	122	6
CSS 背景图片	1	1	11
浏览器支持	2	Most modern	Most modern
HTML 文件大小	40 KB	39 KB	15 KB
文件大小减少	-	3%	62%

更多

当我们开始进行 Meyer/Davidson ESPN-style 评价和设计时，这些数字变得更加有趣了。在微软一篇公开的题为“Inside Microsoft”的网页上，微软公布了其流量统计：mocrosoft.com 在 2004 年 5 月获得了 12 亿次的 page view。在以上的讨论中，我显示了如何减少一个页面 62% 的标记，或者说 25 KB。我也同样预言了如果微软能够在整个网站上更加积极的应用 CSS，每页面 25KB 是一个公平的估计。如果乘以平均每天 3870 万次的 page view，每页面 25 KB 的减少每天可以为我们节省约 924 GB 的带宽，也就是每年 329 terabytes。

光凭这些数据，就应该足以让一些人回头。

现在，回到现实中，我们改造的仅仅只是一个版本，但这种改造仍然支持微软更多“高级”的设计（就像现在在 IE/Win 中看到的那样），在很多其它流行的浏览器中仍然如此。

不管像微软这样的公司是不是需要只维护其主页的一个版本来支持所有的浏览器，来提高页面加载速促，来使其更容易被所有的用户和设备所访问，我觉得值得指出的是，现在非常容易的展示他们——或者任何公司—— 能够创建一个高级的版本，使用更干净的标记，能支持更多的浏览器，能更容易地被访问。所有的展示花费不过一两小时。

更多要点和警示

• 如果您感到好奇，并且想更仔细一些，CSS 在改造过程中对原版本仅仅增加了 3KB / 5KB（分别对应 IE/Win 和非 IE/Win 版本）到 8KB。
• IE/Win 版本左侧导航中两个选项所带有的弹出式菜单一样可以被重现。所有这些都由纯 CSS，简单、易懂且更容易访问的标记实现。当鼠标悬垂到列表父列表条目上时，改造版本用 :hover 伪类（pseudo-class）来开关一个内嵌的无序列表（子菜单）。考虑到 IE 在列表条目上不支持 :hover，所以为了在此浏览器上支持弹出式菜单，微软正在使用的 JavaScript 仍然是必要的。或者类似于 Suckerfish Dropdowns 的东西能够用来保持和改造版本所使用的同样易懂的内嵌列表标记。
• 微软当前的非 IE/Win 版本上如此大的图片标签缩减主要是来源于占位 GIF 的滥用。另外，非 IE/Win 版本单独调用所有列表强调符图片，而不像其 IE/Win 版本以及改造版本那样，通过一条单独的 CSS 声明来调用。
• 微软网站上能够找到的所有 JavaScript 标记都被移除了。链接元素上成百上千的属性标记显然是出于点击追踪目的。Microsoft would likely want to add some of this layer back in - though hopefully through a valid means of doing so.
• 正如前面提到的，此文的目的是为了公布使用 CSS 和更简单的、易懂的标记来构建页面所带来的潜在结果和益处。我们仅仅用微软作为一个注明的范例。此文有意没有给出改造后的代码。我明白很多人能够从本次演讲讨论的成果中学到东西。即使没有参加演讲，也能够从对 HTML 和 CSS 代码的修改上获益。但是，我无意通过公开发表对源代码的修改来贬低任何人在微软的角色。我更倾向于有机会能够直接将它们展示给微软，与合适的团队成员讨论这些改变以及相关技术，如果他们愿意这么做的话。