CSS生日快乐：CSS之父Håkon Wium Lie访谈录

r囧r小猫 2022-08-04 17:30 117阅读 0赞

20年前的今天（10月10日），Opera CTO Håkon Wium Lie发布了[Cascading HTML style sheets – a proposal][Cascading HTML style sheets _ a proposal]。假如[Paul McCartney][]是一名Web开发者，并在今天写下[《Sergeant Pepper's Lonely Hearts Club Band》][Sergeant Pepper_s Lonely Hearts Club Band]，那他一定会这样写：

> It was twenty years ago today  
> That Håkon wrote a doc to say  
> That if the Web's gonna last a while  
> Then we need a way to define style.  
> So may I introduce to you  
> a way to add visual treats:  
> It's Sergeant Håkon's Cascading Style Sheets!

不过，当我们找到Paul家，请他为我们唱这首歌的时候，他却拒绝了，而且放出了他的看门狗`FontTag`和`Bgcolor`。那还是算了，为纪念这个好日子，Bruce面对面向Håkon提了一些问题，关于CSS的过去、现在和未来。

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

当然，我对CSS的发展非常满意。CSS是Web规范的一块基石，有了CSS网页漂亮多了。HTML依旧生机勃勃就是CSS成功的明证。不过就像一个年青人一样，它还是有很大的上升空间。

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

如果没有CSS，那么HTML恐怕会与今天大不相同。有桌面出版背景的作者认为它没有`<color>`和`<font>`标签，很不习惯。当然也包括我自己。我自己发布的第一个网页就使用了带有文本内容的图片，[历史存档在这里][Link 1]。 如果按照这个思路继续发展下去，Web就会变成一台巨型传真机，文本图片可以传来传去。但对视障用户或者搜索引擎而言，这就很讨厌了。我建议CSS就是想阻止这种发展势头，同时为作者提供一种表达自己设计意图又不必增加新HTML标签的方式。

在第一稿建议中，有一个影响百分比说明符，像`h1.font.size = 24pt 100%`，就是这样描述的：

> 该行末尾的百分比表示要求的影响程度（这里是100%）。如果它在一个初始样式表（如用户控制的样式表）里面，则这个要求可以满足，比如用Helvetica来显示所有标题元素。如果这个语句来自后来的样式表，则保证满足未声明影响的样式。

**为什么又抛弃了？**

这种办法是想把作者和用户的要求与偏好组合到一起，是受了[MIT Media Lab][]的一个思路的启发，他们认为未来电视可能不会提供亮度和色彩的控制，而是会控制色情和暴力，或者左派、右派之类的。我的CSS建议是想着有一把滑尺，作者对滑尺的一端有完全控制力，而用户则对另一端有完全控制力。在滑尺中间，浏览器又可以混入一些要求，从而让所有人都能接受。这个办法对有的属性管用（如`font-size`），但对另一些属性（如`font-family`）则不行。Bert在对第一稿的回复中[批评了这个思路][Link 2]：

> 我觉得把两种设计方案折中成一个中性样式表的思路是错误的。如果我要求蓝黄，而别人要求黄蓝，那怎么办？结果难道是绿绿吗？谁希望看到标题很新潮，而正文却使用Helvetica？

[我回复道][Link 3]：

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

当然，Bert是对的（通常他都是对的），那样的话不仅不解决问题还会制造新问题，所以我就抛弃了混合的思路。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最初的Acid测试之后又出现了[Acid2和Acid3][Acid2_Acid3]，背后的逻辑都一样：一个可视化的高要求的网页，用于测试各种CSS特性。Acid2的推出是受到[比尔·盖茨一封公开信][Link 6]的激发，那封信赞美了互操作性。让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][CSS Regions_ Absolute Positioning and Z-Ordering]的草案中提出了绝对定位这个特性（没记错的话，当时的讨论仅限于W3C成员的邮件列表；最接近的公开文档是[WD-positioning][]）。有些新成立的CSS工作组成员持保留意见，Bert和我写了[一个简单的反对案][Link 7]。我们提议删掉`position`属性（用`display`代替），只描述相对定位（从而有时间好好讨论绝对定位）。但微软已经实现了自己的建议，不情愿删掉这个功能。最终，唯一重要的变化就是添加了`right`和`bottom`属性（平衡`left`和`top`），以及`position: fixed`。这就在后来的CSS2中体现了出来。

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

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

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

**如果你能施展魔法，那你最希望当前CSS中的哪些东西从这个世界上销声匿迹，又希望添加并让哪些东西瞬间无所不在？**

我希望清除特定于浏览器版本的代码，比如`<!--[if lt IE 7 ]>`。虽然从技术上说这不属性CSS，但这种“注释”不应该成为必要的东西，它们败坏了Web标准的名誉。

你提的后一个问题更有意思。如果是在2006年，我想说[Web字体][Web]。如果是在2007年，我想说[`<video>`元素][video]（误入HTML领地有年头了）。这两者现在所有浏览器都支持了。

2011年，看到那么多应用使用页面（不带滚动条）创建令人眩目的幻灯片，我开始想让网页变成真正的页面。思路就是样式表可以触发分页模式，把内容分配到多个页面中。用户可以通过手势或者PageUp和PageDown切换页面。我希望这样一来在浏览器中创建电子书不仅成为可能，甚至更容易。为此，有点魔法会更好。你可以帮我在所有浏览器提供商的额头上撒些仙尘吗？

而且CSS并不是只能服务于浏览器。Bert和我在2005年写了一本[CSS主题的书][CSS]，到第三版时，我们想用CSS本身来排版这本书。当时浏览器还胜任不了，不过[Prince][]出现了。Michael Day和他在墨尔本的同仁创造了一个了不起的产品，能够从HTML和CSS产生漂亮的PDF文件，我们可以直接把这PDF交付给印刷厂。为了让他们修复一些我关心的bug，我还加入了他们的董事会。自那时起，已有成百上千本书是用Prince排版的。我相信未来还是会有纸质书——它们会用HTML和CSS写成。

**为什么我们还不能通过CSS实现分页布局，又不是什么尖端技术？（Flexbox，注意啦……）**

布局很复杂，在Web上实现布局更复杂，因为页面要在很多不同设备中显示。CSS有几种排布内容的机制，包括绝对定位元素、浮动、多栏布局和CSS表格。这些特性综合运用起来非常复杂，但我也不认为这是什么尖端技术。不过我承认没有怎么用过Flexbox。

**你怎么看SASS和LESS这些预处理器？CSS可以从这些技术上借鉴什么？**

当然，预处理器很有用。我想可能可以从预处理器的功能里选择5个左右最流行的，内置到CSS里。我个人比较喜欢嵌套选择符、单行注释（以`//`开头）。等CSS 50岁的时候，我会告诉你为什么CSS一开始并没有考虑这些。

**你是WHATWG的成员，怎么会出现这个组织？**

[WHATWG][]成立于W3C想要放弃HTML，并把工作重心转移到基于XHTML、XForms、SMIL和SVG构建[混合文档][Link 9]上的时候。对浏览器制造商而言，HTML太重要了，怎么能放弃呢！因此，当时还在我的Opera团队的Ian Hickson成立了WHATWG，继续开发新的Web标准。同时，我们也关注微软的[XAML][]，它在专有应用语言上面加入了一层简单的XML。因此WHATWG的目标就是应用，而不是文档。Ian作为编辑还在继续开发HTML标准，[硕果累累][Link 10]。

**你是CSS之父，但你最近却在WHATWG而非W3C的CSS工作组名义下发布了一些规范。为什么？**

事实上，[CSS Figures][]和[CSS Books][]是WHATWG的工作项目。以WHATWG的名义发布这些规范有重大的意义。这个“活标准”模型可以低成本快速更新，这与过去发布W3C Working Drafts的困难程度形成了鲜明的对比。WHATWG[保持规范适度超前于实现而不致使实现放弃][Link 11]的目标，我非常认同。

**最后一个问题，CSS还能胜任自己的角色吗？或者说，我们是不是应该换一个新模型，比如网格样式表（[Grid Style Sheets][]）？**

1999年，Ethan Munson和Philip M Marden就提到“对样式表语言的研究严重不足”。这个结论到今天依然不过时，任何研究和改进样式表的努力都必须鼓励。

GSS是个有意思的例子，它在样式表机制中添加了“Cassowary”约束求解器。在1995年最初的CSS实现中，我使用的是“SkyBlue”约束求解器来解决样式表语句的冲突。（顺便说一下，这两种约束求解器都是华盛顿大学开发的。）通过约束求解器可以表达任意两个元素之间的关系，并能自动解决冲突。可是，随着旧元素的消失和新元素的加入（比如通过DOM操作），问题会变复杂。此外还要恰当地处理好循环依赖。考虑到这些问题，我很早就打消了通过CSS表达任意元素间布局约束的念头。

过去，要支持新规范必须说服所有浏览器制造商，要他们拿出宝贵的开发时间。这就提高了门槛，可能还高得离谱。而现在，已经可能像通过库扩展JavaScript一样扩展浏览器了，试验和研究样式表容易多了。

回到你的问题上：CSS还胜任它的角色吗？我认为胜任。我还没看到有可能取代它的新模型出现。新想法一定会有，但应该会扩展而非替代CSS。我相信我们今天写的CSS代码，500年后的计算机仍然能看懂。

[Cascading HTML style sheets _ a proposal]: http://www.w3.org/People/howcome/p/cascade.html
[Paul McCartney]: http://zh.wikipedia.org/wiki/%E4%BF%9D%E7%BD%97%C2%B7%E9%BA%A6%E5%8D%A1%E7%89%B9%E5%B0%BC
[Sergeant Pepper_s Lonely Hearts Club Band]: http://zh.wikipedia.org/wiki/%E6%AF%94%E4%BC%AF%E8%BB%8D%E6%9B%B9%E5%AF%82%E5%AF%9E%E8%8A%B3%E5%BF%83%E4%BF%B1%E6%A8%82%E9%83%A8
[Link 1]: http://people.opera.com/howcome/1993/telektronikk-4-93/
[MIT Media Lab]: http://www.media.mit.edu/
[Link 2]: http://www.w3.org/Style/History/www.eit.com/www.lists/www-talk.1994q4/0158.html
[Link 3]: http://www.w3.org/Style/History/www.eit.com/www.lists/www-talk.1994q4/0167.html
[X11 Window System]: http://en.wikipedia.org/wiki/X_Window_System_protocols_and_architecture
[X]: http://en.wikipedia.org/wiki/X_resources
[DSSSL]: http://people.opera.com/howcome/2006/phd/#h-88
[DSSSL-Lite]: http://people.opera.com/howcome/2006/phd/#h-210
[W3C]: http://www.w3.org/Style/951106_Workshop/
[Link 4]: http://www.w3.org/People/Bos/stylesheets.html
[INRIA]: https://en.wikipedia.org/wiki/French_Institute_for_Research_in_Computer_Science_and_Automation
[Link 5]: http://www.wiumlie.no/2006/phd/
[CSS1]: http://www.w3.org/TR/1999/REC-CSS1-19990111
[Acid]: https://en.wikipedia.org/wiki/Acid1
[WaSP]: http://en.wikipedia.org/wiki/Web_Standards_Project
[Acid2_Acid3]: http://www.acidtests.org/
[Link 6]: http://web.archive.org/web/20050204082749/https://www.microsoft.com/mscorp/execmail/2005/02-03interoperability.asp
[CSS Regions_ Absolute Positioning and Z-Ordering]: https://lists.w3.org/Archives/Member/html-erb/1996OctDec/att-0282/WD-regions-positioning-961121.htm
[WD-positioning]: http://www.w3.org/TR/WD-positioning-970131
[Link 7]: https://lists.w3.org/Archives/Member/w3c-css-wg/1997JanMar/0161.html
[Link 8]: http://alistapart.com/blog/post/ten-css-one-liners-to-replace-native-apps
[Web]: http://web.archive.org/web/20111109020901/http://news.cnet.com/Microsofts-forgotten-monopoly/2010-1032_3-6085417.html
[video]: http://people.opera.com/howcome/2007/video/
[CSS]: http://www.amazon.com/Cascading-Style-Sheets-Designing-Edition/dp/0321193121/
[Prince]: http://www.princexml.com/
[WHATWG]: http://en.wikipedia.org/wiki/WHATWG
[Link 9]: http://www.w3.org/2004/04/webapps-cdf-ws/
[XAML]: http://en.wikipedia.org/wiki/Extensible_Application_Markup_Language
[Link 10]: https://html.spec.whatwg.org/multipage/
[CSS Figures]: https://figures.spec.whatwg.org/
[CSS Books]: https://books.spec.whatwg.org/
[Link 11]: https://wiki.whatwg.org/wiki/FAQ#What_does_.22Living_Standard.22_mean.3F
[Grid Style Sheets]: http://gridstylesheets.org/