二十周年：CSS之父Håkon Wium Lie访谈录(上)？

20年前的今天(10月10日)，Opera CTO HKON Wiumlie发布了层叠式HTML样式表a。

提议.如果保罗麦卡特尼是Web开发人员，今天写《Sergeant Pepper's Lonely Hearts Club Band》，他肯定会这样写：

那是二十年前的今天

霍恩写了一份文件说

如果网络要持续一段时间

那么我们需要一种定义风格的方法。

我可以给你介绍一下吗

增加视觉处理的方法：

这是霍根中士的级联样式表！然而，当我们找到保罗的家，请他为我们唱这首歌时，他拒绝了，并释放了他的看门狗FontTag和Bgcolor。你做梦去吧。为了纪念这美好的一天，布鲁斯问了霍恩一些关于CSS的过去、现在和未来的问题。

CSS的构想诞生于20年前。你对自己这个宝贝、孩子、小青年的成长感到满意吗？

当然，我对CSS的发展非常满意。CSS是网络规范的基石。网页用CSS漂亮多了。HTML依然活得好好的，这就是CSS成功的证明。但和年轻人一样，它还有很大的提升空间。

你说过自己建议CSS是“要拯救HTML”，为什么这么说？

没有CSS，HTML将与今天大不相同。有桌面出版背景的作者认为它没有标签，不习惯。当然包括我自己。我自己发布的第一个网页用的是有文字内容的图片，历史就存档在这里。如果我们继续按照这个思路发展下去，Web就会变成一台巨型传真机，文字和图片就可以到处传递。但是对于视障用户或者搜索引擎来说，这就很烦人了。我建议CSS只是为了阻止这种发展趋势，同时为作者提供一种表达设计意图的方式，而不需要添加新的HTML标签。

在提案初稿中，有一个影响百分比说明符，如h1.font.size=24pt 100%，描述如下：

线末端的百分比表示所需的影响程度(此处为100%)。如果它在初始样式表(如用户控制的样式表)中，则可以满足这一要求，例如用Helvetica显示所有标题元素。如果这个语句来自于后面的样式表，那么可以保证满足未声明影响的样式。为什么又抛弃了？

这种方法是结合作者和用户的需求和偏好。它的灵感来自麻省理工学院媒体实验室的一个想法。他们认为未来电视可能不会提供亮度和色彩控制，而是会控制色情和暴力，或者左派和右派。我的CSS建议是有一个滑块，作者完全控制滑块的一端，用户完全控制另一端。在滑块的中间，浏览器可以混合一些需求，这样每个人都可以接受。此方法适用于某些属性(如字体大小)，但不适用于其他属性(如字体系列)。伯特在对初稿的回复中批评了这一观点：

我认为将两种设计方案折衷成一种中性的样式表是错误的。如果我要求蓝色和黄色，而其他人要求黄色和蓝色怎么办？结果是绿色的吗？谁想看

我回复道：

有些属性可以混合，有些不行。“加权平均数”的典型应用是弱化作者的个性化倾向，比如建议的字号大小优艾设计网_设计百科，而用户仍然可以对此有所控制。当然不一定非要使用这个功能，尽管“100%”等于二进制的“1”，但在二进制里反过来则不行。我认为计算机接口的二进制有点过。

上面使用的是JS风格的点语法。后来为什么又改了？

你管它叫JS风格的语法，这很有意思。我在提出CSS建议的时候，JavaScript还不存在呢，所以我不可能借鉴它的语法。实际上这个写法借鉴了X11 Window System中的X资源，那是MIT的又一个令人激动的项目。

之所以CSS语法由font.size改成font-size，有两个想法。首先，连字符让属性更像书面英语，让人觉得亲切易懂。其次，DSSSL和DSSSL-Lite就使用这种连字符属性名。编写过DSSSL-Lite第一稿的James Clark参加了W3C关于样式表的第一次研讨会，Bert和我就从DSSSL中借鉴了连字符。说到不方便，就是连字符在数学里表示减号，有时候会给解析器制造点麻烦。

Bert Bos是怎么参与进来的，你们俩怎么分工？

Bert Bos审阅了我的建议初稿。他的背景和兴趣跟我有点不一样，但在他写完了他的建议后，我们很快意识到我俩的建议可以整合成一个。那时候，CERN不再支持Web项目，而W3C成立了。于是我就在INRIA组建了W3C的欧洲分支，立刻聘用了Bert。CSS1的大部分内容都是1995年7月我们在索菲亚安替城（Sophia-Antipolis）用白板讨论出来的。Bert直到现在还在索菲亚安替城的W3C上班。每当我遇到棘手的技术难题，都会想起Bert和那块白板。

说到对CSS做出过贡献的人，我不能不提Thomas Reardon和Chris Wilson，他们都是微软的。Thomas是IE（InternetExplorer）的项目经理，他很早就想到了为Web引入样式表。Chris Wilson是负责把CSS加入IE3的程序员。IE3的实现很不标准，但别忘了它是在CSS1制定完成前发布的。SimonDaniels（也是微软的）用IE3写了一些叫人过目不忘的演示。他们的工作表明了一家大软件公司在支持刚刚诞生的标准。

有其他竞争性的建议吗？为什么你们的比别的好？

样式表语言的建议大概有十来个吧。不过，这些建议并不都适合Web。比如，浏览器会渐进地渲染并显示文档，那就必须处理找不到样式表的情况。能上网的设备也不少，需要能够为不同的设备编写样式表。因此，样式表语言必须能表达可伸缩且适应性强的设计。这是一个令人神往的研究领域，我为此还写过一篇博士论文，其中比较了不同的样式表建议的手段。

当然，你的第二个小问题，我肯定就比较主观了。但我相信CSS确实具有几个显著的特性，特别适合在Web上使用：层叠、伪类和伪元素、向前兼容的解析规则、支持不同的媒体类型、重点突出选择符，还有特别棒的em单位。

你（和Bert）犯过最大的错误是什么？

我的博士论文专有一章说明CSS的问题。确实有问题，甚至有些都是自找的。但CSS1遇到过的最大的问题并非其设计（设计还是相当好的，我觉得），而是最初的实现。JeffreyZeldman曾提到这个情况：

如果Netscape 3忽略应用到元素的CSS规则，并随意为页面中的每个结构化元素都添加一些空白，如果IE4能正确处理但填充却很拙劣，那怎么写CSS才能放心？有些开发者为此根本就不会写CSS。有人写了一个样式表来补偿IE4的缺陷，写了另一个样式表纠正Netscape4的错误。

微软和网景（Netscape ）在这个问题上都有责任，而我们——我、Bert、W3C——如果能依照CSS1规范拿出一套测试也可以避免很多问题。第一个真正的CSS测试是1998年10月份才出现的，那就是Todd Fahrner发布的Acid测试。那个测试很有创意、一目了然，让开发者马上就知道自己是否通过了测试。一开始，没有一款浏览器能通过测试。但自从有了这个测试，加上CSS社区的强力推动，事情开始有了转机。WaSP在推动标准化的进程中扮演了重要角色。Opera浏览器也起到了重要作用，它向世人展示CSS实际上是可以正确实现的。在了解到Opera的CSS实现非常彻底（比微软和网景都强太多）之后，我加入了Opera。

我在加入之前，Opera就以其浏览器能装进一张软盘（1.44 MB）而著称。“装进一张软盘”在当时是个很厉害的标志。添加对CSS的支持之后，浏览器有点“发福”，Opera不能再那么宣传了。“几乎可以装进一张软盘”听起来可没原来那么牛。

最初的Acid测试之后又出现了Acid2和Acid3，背后的逻辑都一样：一个可视化的高要求的网页，用于测试各种CSS特性。Acid2的推出是受到比尔·盖茨一封公开信的激发，那封信赞美了互操作性。让IE7遵循CSS标准看起来就是自然而然的了，随后微软就受到了Acid2的挑战。公平地讲，其他浏览器也有问题，Acid2让它们暴露了很多bug。微软的IE7对Acid2视而不见，但随后的IE8却完美地通过了测试，挺神奇的。现在的浏览器也都能了。

为什么你决定在盒模型中使用外边距、内边距、边框声明宽度，而没有使用IE5的box-sizing: border-box盒模型？

这两种盒模型都有相应的用武之地。如果你想拉伸一张图片以填充整个内容盒子，那么就要使用最初CSS的盒模型。如果你认为内边距和边框不应该扩展到某个区域之外，那IE5的盒模型更合适。个人认为，CSS盒模型的用途更广一些，可一些我很敬重人都不这么认为。这个冲突现在已经通过增加对box-sizing属性的支持得到了很好的解决。

我一直非常不喜欢绝对定位。是我的问题吗？规范中怎么会加入这个特性呢？

你这个问题让我想起了1996年的一些激烈的争论。简单地说，就是微软在一个叫做CSS Regions: Absolute Positioning and Z-Ordering的草案中提出了绝对定位这个特性（没记错的话，当时的讨论仅限于W3C成员的邮件列表；最接近的公开文档是WD-positioning）。有些新成立的CSS工作组成员持保留意见，Bert和我写了一个简单的反对案。我们提议删掉position属性（用display代替），只描述相对定位（从而有时间好好讨论绝对定位）。但微软已经实现了自己的建议，不情愿删掉这个功能。最终，唯一重要的变化就是添加了right和bottom属性（平衡left和top），以及position: fixed。这就在后来的CSS2中体现了出来。

跟你一样，我也一直不怎么喜欢绝对定位。有人说，绝对定位在Web上已经有了它的位置，而我时不时会用它实现一些编码不太可能实现的效果。

我曾听人说过不应该使用浮动来布局，因为这不是浮动特性“设计的初衷”，浮动最初只是为了实现图文绕排的。这样用有问题吗？

图文绕排是一个基本的布局技术。因此毫无疑问，浮动应该可以用于布局。我希望CSS能进入屏幕分页展示这个领域。在分页内容时，浮动会更重要，因为你可以把元素浮动到屏幕的上头和下头。