英文原文:CSS: It was twenty years ago today — an interview with Håkon Wium Lie
20 年前的今天(10 月 10 日),Opera CTO Håkon Wium Lie 发布 Cascading HTML style sheets – a
proposal。假如 Paul McCartney 是一名 Web 开发者,并在今天写下《Sergeant Pepper's Lonely Hearts Club Band》,那他一定会这样写:
It was twenty years ago todayThat 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>
标签,很不习惯。当然也包括我自己。我自己发布的第一个网页就使用了带有文本内容的图片, 历史存档在这里。 如果按照这个思路继续发展下去,Web 就会变成一台巨型传真机,文本图片可以传来传去。但对视障用户或者搜索引擎而言,这就很讨厌了。我建议 CSS 就是想阻止这种发展势头,同时为作者提供一种表达自己设计意图又不必增加新 HTML 标签的方式。
在第一稿建议中,有一个影响百分比说明符,像h1.font.size = 24pt 100%
,就是这样描述的:
该行末尾的百分比表示要求的影响程度(这里是 100%)。如果它在一个初始样式表(如用户控制的样式表)里面,则这个要求可以满足,比如用 Helvetica 来显示所有标题元素。如果这个语句来自后来的样式表,则保证满足未声明影响的样式。
为什么又抛弃了?
这种办法是想把作者和用户的要求与偏好组合到一起,是受了 MIT Media Lab 的一个思路的启发,他们认为未来电视可能不会提供亮度和色彩的控制,而是会控制色情和暴力,或者左派、右派之类的。我的 CSS 建议是想着有一把滑尺,作者对滑尺的一端有完全控制力,而用户则对另一端有完全控制力。在滑尺中间,浏览器又可以混入一些要求,从而让所有人都能接受。这个办法对有的属性管用(如font-size
),但对另一些属性(如font-family
)则不行。Bert 在对第一稿的回复中 批评了这个思路:
我觉得把两种设计方案折中成一个中性样式表的思路是错误的。如果我要求蓝黄,而别人要求黄蓝,那怎么办?结果难道是绿绿吗?谁希望看到标题很新潮,而正文却使用 Helvetica?
我回复道:
有些属性可以混合,有些不行。“加权平均数”的典型应用是弱化作者的个性化倾向,比如建议的字号大小,而用户仍然可以对此有所控制。当然不一定非要使用这个功能,尽管“100%”等于二进制的“1”,但在二进制里反过来则不行。我认为计算机接口的二进制有点过。
当然,Bert 是对的(通常他都是对的),那样的话不仅不解决问题还会制造新问题,所以我就抛弃了混合的思路。
上面使用的是 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(Internet Explorer)的项目经理,他很早就想到了为 Web 引入样式表。Chris Wilson 是负责把 CSS 加入 IE3 的程序员。IE3 的实现很不标准,但别忘了它是在 CSS1 制定完成前发布的。Simon Daniels(也是微软的)用 IE3 写了一些叫人过目不忘的演示。他们的工作表明了一家大软件公司在支持刚刚诞生的标准。
有其他竞争性的建议吗?为什么你们的比别的好?
样式表语言的建议大概有十来个吧。不过,这些建议并不都适合 Web。比如,浏览器会渐进地渲染并显示文档,那就必须处理找不到样式表的情况。能上网的设备也不少,需要能够为不同的设备编写样式表。因此,样式表语言必须能表达可伸缩且适应性强的设计。这是一个令人神往的研究领域,我为此还写过 一篇博士论文,其中比较了不同的样式表建议的手段。
当然,你的第二个小问题,我肯定就比较主观了。但我相信 CSS 确实具有几个显著的特性,特别适合在 Web 上使用:层叠、伪类和伪元素、向前兼容的解析规则、支持不同的媒体类型、重点突出选择符,还有特别棒的 em 单位。
你(和 Bert)犯过最大的错误是什么?
我的博士论文专有一章说明 CSS 的问题。确实有问题,甚至有些都是自找的。但 CSS1 遇到过的最大的问题并非其设计(设计还是相当好的,我觉得),而是最初的实现。Jeffrey Zeldman 曾提到这个情况:
如果 Netscape 3 忽略应用到<body>
元素的 CSS 规则,并随意为页面中的每个结构化元素都添加一些空白,如果 IE4 能正确处理<body>
但填充却很拙劣,那怎么写 CSS 才能放心?有些开发者为此根本就不会写 CSS。有人写了一个样式表来补偿 IE4 的缺陷,写了另一个样式表纠正 Netscape 4 的错误。
微软和网景(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 能进入 屏幕分页展示这个领域。在分页内容时,浮动会更重要,因为你可以把元素浮动到屏幕的上头和下头。
如果你能施展魔法,那你最希望当前 CSS 中的哪些东西从这个世界上销声匿迹,又希望添加并让哪些东西瞬间无所不在?
我希望清除特定于浏览器版本的代码,比如<!--[if lt IE 7 ]>
。虽然从技术上说这不属性 CSS,但这种“注释”不应该成为必要的东西,它们败坏了 Web 标准的名誉。
你提的后一个问题更有意思。如果是在 2006 年,我想说 Web 字体。如果是在 2007 年,我想说<video>
元素(误入 HTML 领地有年头了)。这两者现在所有浏览器都支持了。
2011 年,看到那么多应用使用页面(不带滚动条)创建令人眩目的幻灯片,我开始想让网页变成真正的页面。思路就是样式表可以触发分页模式,把内容分配到多个页面中。用户可以通过手势或者 PageUp 和 PageDown 切换页面。我希望这样一来在浏览器中创建电子书不仅成为可能,甚至更容易。为此,有点魔法会更好。你可以帮我在所有浏览器提供商的额头上撒些仙尘吗?
为什么我们还不能通过 CSS 实现分页布局,又不是什么尖端技术?(Flexbox,注意啦……)
布局很复杂,在 Web 上实现布局更复杂,因为页面要在很多不同设备中显示。CSS 有几种排布内容的机制,包括绝对定位元素、浮动、多栏布局和 CSS 表格。这些特性综合运用起来非常复杂,但我也不认为这是什么尖端技术。不过我承认没有怎么用过 Flexbox。
你怎么看 SASS 和 LESS 这些预处理器?CSS 可以从这些技术上借鉴什么?
当然,预处理器很有用。我想可能可以从预处理器的功能里选择 5 个左右最流行的,内置到 CSS 里。我个人比较喜欢嵌套选择符、单行注释(以//
开头)。等 CSS 50 岁的时候,我会告诉你为什么 CSS 一开始并没有考虑这些。
你是 WHATWG 的成员,怎么会出现这个组织?
WHATWG 成立于 W3C 想要放弃 HTML,并把工作重心转移到基于 XHTML、XForms、SMIL 和 SVG 构建 混合文档上的时候。对浏览器制造商而言,HTML 太重要了,怎么能放弃呢!因此,当时还在我的 Opera 团队的 Ian Hickson 成立了 WHATWG,继续开发新的 Web 标准。同时,我们也关注微软的 XAML,它在专有应用语言上面加入了一层简单的 XML。因此 WHATWG 的目标就是应用,而不是文档。Ian 作为编辑还在继续开发 HTML 标准, 硕果累累。
你是 CSS 之父,但你最近却在 WHATWG 而非 W3C 的 CSS 工作组名义下发布了一些规范。为什么?
事实上, CSS Figures 和 CSS Books 是 WHATWG 的工作项目。以 WHATWG 的名义发布这些规范有重大的意义。这个“活标准”模型可以低成本快速更新,这与过去发布 W3C Working Drafts 的困难程度形成了鲜明的对比。WHATWG 保持规范适度超前于实现而不致使实现放弃的目标,我非常认同。
最后一个问题,CSS 还能胜任自己的角色吗?或者说,我们是不是应该换一个新模型,比如网格样式表(Grid Style Sheets)?
1999 年,Ethan Munson 和 Philip M Marden 就提到“对样式表语言的研究严重不足”。这个结论到今天依然不过时,任何研究和改进样式表的努力都必须鼓励。
GSS 是个有意思的例子,它在样式表机制中添加了“Cassowary”约束求解器。在 1995 年最初的 CSS 实现中,我使用的是“SkyBlue”约束求解器来解决样式表语句的冲突。(顺便说一下,这两种约束求解器都是华盛顿大学开发的。)通过约束求解器可以表达任意两个元素之间的关系,并能自动解决冲突。可是,随着旧元素的消失和新元素的加入(比如通过 DOM 操作),问题会变复杂。此外还要恰当地处理好循环依赖。考虑到这些问题,我很早就打消了通过 CSS 表达任意元素间布局约束的念头。
过去,要支持新规范必须说服所有浏览器制造商,要他们拿出宝贵的开发时间。这就提高了门槛,可能还高得离谱。而现在,已经可能像通过库扩展 JavaScript 一样扩展浏览器了,试验和研究样式表容易多了。
回到你的问题上:CSS 还胜任它的角色吗?我认为胜任。我还没看到有可能取代它的新模型出现。新想法一定会有,但应该会扩展而非替代 CSS。我相信我们今天写的 CSS 代码,500 年后的计算机仍然能看懂。
谢谢你接受采访,祝 CSS 生日快乐!