CSS 发明者 Håkon Wium Lie 访谈--csdn zhangxin09

Posted 2020-06-16

原文地址：https://dev.opera.com/articles/css-twenty-years-hakon/

---------------------------------------------------------------------------------------------------------------------

二十年前的今日，Opera 的 CTO Håkon Wium Lie 推出了 html 层叠样式的第一个草案：CSS（下面的文字过于文艺，非本人能力所及，不如不译了……）

Twenty years ago today, Opera’s CTO Håkon Wium Lie published Cascading HTML style sheets – a proposal. If Paul McCartney were a web developer, and writing ‘Sergeant Pepper’s Lonely Hearts Club Band’ today, he would almost certainly write:

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!

However, when we went round to Paul’s house to ask him to sing this for us, he declined and set his guard dogs, FontTag and Bgcolor, on us. So, instead, to mark this occasion, Bruce sat down with Håkon to ask a few questions about the past, present and future of CSS.

CSS 诞生了二十年了。如同家有儿女初长成，你会感到十分开心吗？
CSS was conceived twenty years ago. Are you happy about how your baby, child and teenager has turned out?

是啊，我当然十分开心。CSS 是Web 基石之一而且 Web 页面越来越漂亮也可以说归功于 CSS。事实上 HTML 与 CSS 之间健康的相互发展是相得益彰的。同时，对于接下来的发展，仍有相当多的空间。
Yes, I’m very happy with CSS. CSS is a cornerstone web specification and web pages are more beautiful as a result of CSS being there. The fact that HTML is still alive and well is also a testimonial to the success of CSS. As with all youngsters, however, there is room for improvement.

你说过“CSS 拯救 HTML”，此话何解？
You’ve been quoted as saying you proposed CSS “to save HTML”. Please explain.

CSS 的缺席会让 HTML 世界显得不仅仅是寂寞，而且贫瘠。那时候 Web 开发者都是从桌面程序员过度而来的，包括我也是，那时甚至连 <color> 或 <font> 标签都没有。我想起我第一幅公开的 Web 页面，没有恰当的手段于是只能令图片文本化。那时候我记得是 1993 年。如果没有制定这些标准如果 CSS 没有出现，HTML 将会变得迥然不同，Web 将会变成一个只传递文本图片的巨大传真机。对失明者或搜索引擎来说，Web 将会是一片可怕之地。CSS 提供了一个可以表达作者设计意图的方式，而不需要添加新的 HTML 标签。
HTML would have been very different if CSS had not appeared. Authors who came to the web from a desktop publishing background were baffled by the lack of <color> and <font> tags. Including myself. In my first real publication on the web, I resorted to making images with text in it — you can see it in this publication from 1993. If this development had continued, the web would have become a giant fax machine where pictures of text would be passed along. This would have been terrible for blind users and search engines alike. CSS was proposed to prevent this development by giving authors a way to express their designs without adding new HTML tags.

在第一份草案中，还有百分比的影响符，如 h1.font.size = 24pt 100%，说明如下：
In the first proposal, there was a percentage of influence specifier, e.g. h1.font.size = 24pt 100%, described as follows:

在行尾的百分比表示需求的影响程度（此处100％）。如果这是初始样式表（即在用户控制下的一个），该需求可被满足，即，所有的标题元素将使用 Helvetica 字体。如果该语句是在一个更高的样式表，任何未声明的子级都会受影响。
The percentage at the end of the line indicates what degree of influence that is requested (here 100%). If this is the initial style sheet (i.e. the one under user control), this request can be fulfilled, i.e. all headline elements will be rendered using Helvetica. If the statement comes in a later style sheet, any unclaimed influence is granted.

后来为何放弃？
Why was this dropped?

你指的机制是尝试把作者和读者的喜好和需求结合起来。它设计灵感来自麻省理工学院媒体实验室的想法：在未来的电视不会有亮度和色彩控制，但对于色情，暴力，或者左翼和右翼内容敏感。 CSS 的建议是弹性的，让作者自己来，决定取舍。在这期间，浏览器会尝试混合的需求，使每个人都高兴。这非常适用于某些属性（如字体大小font-size），但某些就不适合（如 font-family 的）。对于这份草案的想法，Bert 进行了批评（此处大家将就吧，太难翻译了……）：
The mechanism you refer to was there to try combine the needs and preferences of both authors and readers. It was inspired by an idea from the MIT Media Lab: TVs in the future would not have controls for brightness and color, but for sex and violence, or left-wing and right-wing, perhaps. The CSS proposal was to have sliding scale where the author was fully in charge in one end of the scale, and the user was fully in charge in the other end of the scale. In between, the browser would try to mix requests to make everyone happy. This works well for certain properties (like font-size) but is hard to do for others (like font-family). In his first response to the CSS proposal, Bert criticized this idea:

The idea that two designs can be averaged to come up with an intermediate style seems utterly wrong to me. What happens when my blue-on-yellow style is combined with somebody else’s yellow-on-blue? Do I get green-on-green? Or who wants to look at a page with Avant-garde titles over Helvetica paragraphs?

I responded:

Some attributes mix better than others. A typical use of “weighted average” is to soften the author’s attempt to be distinct, e.g. the suggested font sizes – while the user still gets the message. One doesn’t have to use this feature, but while “100%” is equal to a binary “1” there is no going back from a binary syntax. In general, I think computer interfaces are much too binary.

Of course, Bert was right (he is, almost always) that the proposal created more problems than it solved, and the mixing was dropped.

有点像 JS 风格，后来为什么改了？
Ditto the JS-style dot syntax. Why did it change?

你管这个叫 JS 风格，有意思。不过那时候 javascript 好像还没有那么普及吧，所以我也不可能参照那玩意。我是用 X11 Windows 系统的 X 资源得到灵感的，那是一个 MIT 的项目。
It’s interesting you call it JS-style syntax. When I first proposed CSS, JavaScript was not around so I couldn’t borrow it from there. Rather, the syntax was inspired by X resources from the X11 Window System, another inspirational project coming out of MIT.

之所以把 CSS 语法从 font.size转换到 font-size，是基于两方面的原因：一、使用分隔符看起来更像在书写英语，增加了可读性；二、DSSSL 和 DSSSL-Lite 都采用分隔符作为属性名。James Clark，写了第一份 DSSSL-Lite 的人，参见了 W3C 工作组的层叠样式，我和 Bert 就在 DSSSL 身上借用了分隔符。从缺点来说，就是分隔符看起来像数学的减号，解析器会分不清。
The reason for changing the CSS syntax from font.size to font-size was twofold. First, the hyphen makes it look more like written English, which improves human readability. Second, DSSSL and DSSSL-Lite used hyphenated property names. James Clark, who wrote the first draft of DSSSL-Lite, participated in the first W3C workshop on style sheets, and Bert and I borrowed the hyphen from DSSSL. On the downside, the hyphen represents minus in math, which sometimes confuses parsers.

 

Bert Bos 如何参与进来的，你们怎么一起工作的？
How did Bert Bos get involved, and how did you work together?

 

伯特·波斯回顾我的初步建议。他的背景和重点是与我的有点不同，但是当他写了自己的建议，我们很快就意识到，这两项建议可以合并成一个。在这一点上，网络项目被踢出欧洲核子研究中心的出来，W3C 成立。我开始了W3C 的 INRIA 欧洲分公司和 Bert 立即被录用。大多数 CSS1 被敲定在索菲亚 - 安提波利斯白板在1995年7月伯特仍然是工作的 W3C 在索菲亚 - 安提波利斯。每当我挣扎着困难的技术问题，我想伯特和白板在那里。

Bert Bos reviewed my initial proposal. His background and focus was a bit different from mine, but when he wrote up his own proposal we quickly realized that two proposals could be combined into one. At that point, the web project was being kicked out of CERN and W3C was formed. I was starting up the European branch of W3C at INRIA and Bert was hired immediately. Most of CSS1 was hammered out on a whiteboard in Sophia-Antipolis in July 1995. Bert is still working for W3C in Sophia-Antipolis. Whenever I’m struggling with a difficult technical problem, I wish Bert and the whiteboard were there.

 

在列出的人谁做的 CSS 可能，我还必须提到托马斯·里尔登和微软的克里斯·威尔逊。托马斯是项目经理的 Internet Explorer（IE）谁早抓上添加样式表来对网站的想法。克里斯·威尔逊是谁添加 CSS 来 IE3 的程序员。IE3 的实施远没有标准，但是我们必须记住 CSS1 结束之前，它被释放。西蒙·丹尼尔斯（也是微软）写了一些令人印象深刻的演示中 IE3，和他们一起犯了一个主要的软件公司支持的新兴标准。
When listing people who made CSS possible, I must also mention Thomas Reardon and Chris Wilson of Microsoft. Thomas was the program manager for Internet Explorer (IE) who early caught onto the idea of adding style sheets to the web. Chris Wilson was the programmer who added CSS to IE3. IE3’s implementation was far from the standard, but one must remember that it was released before CSS1 was finished. Simon Daniels (also of Microsoft) wrote some impressive demos in IE3, and together they committed a major software company to support an emerging standard.

是否有竞争的其他草案，为何你的较优？
Were there any competing proposals? Why was yours better?

有要使用的十几个建议样式表语言。然而，并不是所有的人都适合的，因为在网络的特性。例如，浏览器使用渐进式渲染文件显示，他们必须处理，其中样式表无法访问的情况。有一个广泛的网络设备在那里，你不能写一个样式表的每一个。因此，样式表语言表达必须是可扩展性和响应性设计。这是研究的一个迷人的地方，我已经写了博士论文，其中比较所采取的各种样式表建议的方法。
There were a dozen or so proposals for style sheets languages to be used. However, not all of them were suitable due to the characteristics of the web. For example, browsers use progressive rendering to display documents, and they must handle situations where style sheets are not accessible. There’s a wide range of web devices out there and you can’t write a style sheet for each one. So, style sheet languages must express designs that are scalable and responsive. It’s a fascinating area of study and I’ve written a PhD Thesis, which compares the approach taken by the various style sheet proposals.

 

当然，我有偏见你问题的第二部分。但我相信，CSS 有几个显着的特点，这使得它特别适合于网络应用：级联，伪类和伪元素，向前兼容的解析规则，针对不同的媒体类型，十分注重选择，以及令人称奇的em单位的支持。

Naturally, I’m biased in the second part of your question. But I believe CSS has several notable features which makes it especially suitable for web use: cascading, pseudo-classes and pseudo-elements, forward-compatible parsing rules, support for different media types, strong emphasis on selectors, and the amazing em unit.

 

敢问，你和 Bert 出过最大的篓子是什么？
What’s the biggest mistake you (and Bert) made?

在我博士论文的主题，就是研究 CSS 的问题。有相当于问题是其自身的问题。但 CSS1 最大的问题不是设计问题（如果你问我设计好不好，我觉得还是不错的~哈哈），而是最初版本的实现，很糟糕。 Jeffrey Zeldman 这样说：
I devote a chapter in my PhD thesis to problems in CSS. There are some, even self-inflicted ones. But the biggest problem CSS1 experienced was not in its design (which is pretty good, if you ask me), but rather in the initial implementations. Jeffrey Zeldman described the situation:

If Netscape 3 ignored CSS rules applied to the element and added random amounts of whitespace to every structural element on your page, and if IE4 got right but bungled padding, what kind of CSS was safe to write? Some developers chose not to write CSS at all. Others wrote one style sheet to compensate for IE4’s flaws and a different style sheet to compensate for the blunders of Netscape 4.

这当然是微软和网景的责任（译注：属于实现的层面，不关我事哦），但是我、Bert、W3C在制定 CSS1 规范的时候，原本是可以通过测试套件来检测出许多问题的。话说第一款测试工具还是 1998年，为 Todd Fahrner 于 1998 年十月所推出，叫做 Acid。这是个神器，前所未有，让开发者看到结果到底是不是通过，而且还是可视化的。刚开始的时候，没有一款浏览器可以通过。及后，CSS 社区强力发劲，推动了 CSS 发展。WaSP 对标准的坚定支持亦是关键的一步。同时 Opera 在正确编写 CSS 实现方面也扮演了其重要的角色。当我知道 Oprea 对 CSS 实现的态度是如何坚定的时候，便促使我投奔向 Oprea 公司，而非什么微软或网景。
Microsoft and Netscape both deserve some blame, but we — me, Bert, W3C — could have avoided many problems by producing a test suite along with the CSS1 specification. The first real CSS test appeared in October 1998 when Todd Fahrner published his Acid test. The test was creative, visual, and developers could immediately see whether they passed the test or not. In the beginning, no browsers passed. But then, with a strong push from the CSS community, things started to improve. The WaSP played a key role in assuring support for standards. The Opera browser also played a role by showing it was actually possible to implement CSS correctly. When I realized how solid Opera’s CSS implementation was — much better than Microsoft’s or Netscape’s — I joined Opera.

在我加入之前，Opera 曾标榜其体积极小，一张软盘就搞定了（1.44MB），这是当其时的一个亮点。不过~哈哈，加入 CSS 之后，越来越大了，一张软盘哪搞得定呀~
One of Opera’s claims to fame before I joined was that the browser would fit on a floppy disk (which is 1.44 MB). “Fits on a floppy” was a great slogan in those days. When CSS was added, a few more bytes were needed and Opera would no longer fit. “Almost fits on a floppy” doesn’t quite have the same ring to it.

Acid 的后续有 Acid2 和 Acid3，但都是同一条准则，即对 Web 页面进行多项严格的测试。后来，Bill Gates 看到问题所在，也按捺不住了，发表一封公开信。该公开信得到了 Acid2 开发团队的响应。总之，这使得 IE7 开始兼容标准，当然仍是很多问题。不过公道地讲，其他浏览器也有问题，通通都给 Acid2 暴露出来了。微软对 IE7 在 Acid2 的表现糟糕，干脆不理——到 IE8 的时候却跟上来了，完全通过！同期的其他浏览器也没啥问题了。
The original Acid test inspired Acid2 and Acid3, which use the same formula: a visual and demanding web page which tests a wide range of features. The development of Acid2 was triggered by an open letter from Bill Gates, where he praised interoperability. Making IE7 follow the CSS standards seemed like a natural follow-up item, and Microsoft was challenged by Acid2. In fairness, other browsers also had issues, and Acid2 exposed bugs in all of them. Microsoft ignored Acid2 in IE7, but — magic sometimes happens — IE8 supported it perfectly. As do all current browsers.

你为什么决定包装盒上的模式，即的margin，padding，边框都加入到申报的宽度，而不是IE5箱大小：边界盒模型？
Why did you decide on the box model whereby margin, padding, border are added to declared width rather than the IE5 box-sizing: border-box model?

有良好的用例两款车型，我相信。如果你想要的图像伸出来填充整个内容中，原来的 CSS 框模型是一个使用。但是，如果它是填充和边框并不一定区域之外的延伸是重要的，在IE5的模型更好。我个人认为还有更多的用例的CSS 框模型，但有些人说我尊重看得起并非如此。冲突已经通过加入其中所有的浏览器都支持的盒集束性的正常解析。
There are good use cases for both models, I believe. If you want want an image to stretch out to fill the whole content box, the original CSS box model is the one to use. However, if it’s important that padding and borders do not extend outside a certain area, the IE5 model is better. Personally I think there are more use cases for the CSS box model, but some people that I respect highly think otherwise. The conflict has been gracefully resolved by the addition of the box-sizing property which all browsers now support.

我本人不太喜欢绝对布局。是我理解有问题吗？它是怎么来到规范中的？
I’ve always disliked absolute positioning. Am I wrong? How did it come about in the spec?

你的问题令我回忆 1996 年时候大家争得面红耳赤。简单说，就是那时候微软提出了一份草案，那时候还不叫绝对布局，说是 CSS Regions：里面有绝对布局和 Z-Ordering。仅限 W3C 会员的讨论，我猜。这是刚组建不久的 CSS 工作组。对此，里面几个成员均有所保留。于是我和 Bert 撰写了一份简单的反对草案，在这个草案中移除掉定位属性 position property（取而代之的是 display 属性）。最后，微软也移除了他们在草案中已经实现了的功能。作为妥协，加入了 right /bottom 属性（相对于 left/top属性），还加入了 position:fixed。这都成为 CSS2 的一部分。
Your question takes me back to some heated debates in 1996. The short story is that Microsoft proposed absolute positioning in a draft called CSS Regions: Absolute Positioning and Z-Ordering (discussions took place on W3C member-only lists, I’m afraid; the closest public document is WD-positioning). Several members of the newly formed CSS Working group had reservations, and Bert and I wrote up a simplified counter-proposal. Our proposal got rid of the position property (display was used instead) and only described relative positioning (which would give us time to think through absolute positioning). Microsoft, however, had already implemented their proposal and were reluctant to remove functionality. In the end, the only material changes were to add the right and bottom properties (to balance left and top), and to add position: fixed. This became part of CSS2.

我和你身同感受，不怎么感冒绝对布局。不过话虽这么说，绝对布局找到了它自己合适发挥的地方，我不时用它来实现的某些东西，不用的话将会很困难，否则就要进行硬编码。
Like you, I have never become comfortable with absolute positioning. That being said, absolute positioning has found its place on the web and I use it from time to time to achieve things that would otherwise be hard, if not impossible, to encode.

我有听人说过，不要采用浮动布局，就像他们“不想”在文字围绕图片中使用浮动。不过，如果可行，这种想法重要吗？
I’ve heard people say that you shouldn’t use floats for layout, as they “weren’t intended” for that — they were just to wrap text around images. Does the intention matter, if they work?

文字围绕图片是个简单的活。这种情况肯定使用浮动布局。另外我希望在屏幕分页的时候也把浮动派上用场。因为你可以轻易地把页码标记作为浮动元素标记在屏幕的任意一个地方，如左上或左下。
Having text wrap around images is one of the basic layout techniques. For sure, floats should be used for layout. One area I’d like for CSS to progress into is paginated onscreen presentations. When you paginate content, floats become even more useful because you can float elements to the top and bottom of the screen.

 

 

如果你手上有魔棒，你会发出什么的魔咒，让 CSS 按照你的想法走？另外，还有什么你想搞进来的，而且又会受到大家欢迎的？
If you could wave a magic wand, which bit of current CSS would you banish from the world, and what would you magically add and implement everywhere?

首先，我会把浏览器专属特定的代码干掉，像 <!--[if lt IE 7 ]> 诸如此类的。CSS 里面没有这样浏览器特定的代码——尽管不提供，但是也不要用“注释”这样子的风格呈现，而且这样子是“反” Web 标准的。
I’d banish browser-version-specific code like: <!--[if lt IE 7 ]> . While technically not expressed in CSS, these kinds of “comments” should not be necessary and they lower the standards of the web.

你的第二个问题，我觉得是个有意思的问题，啥东西突然叫好又叫座？2006 年，我想是非 Web fonts 莫属。2007 年，我会说 <video> 元素（<video> 元素冒进来 HTML 已经一段时间了）。而时至今日，各家浏览器都支持好这些特性了。
The second part of your question is even more interesting: what parts of CSS should be magically implemented everywhere? In 2006, I would have said web fonts. In 2007, I would have said the element (straying into HTML-land for a while). Both of these are now implemented in all browsers.

2011 年，我看到 app 用户是以 页 的方式，而不是以 滚动 的方式浏览内容的。于是我提倡 Web 内容页面化。什么是页面化？就是把很长的一段内容自动划分到不同的页面，用户通过手势看完一页又翻到下一页，或者按 PageUp/PageDown——这不就是浏览器里的电子书嘛~不过我希望可以更简单些。这就是我想的魔咒啦~哈哈。
In 2011, seeing that many apps used pages (and not scrollbars) to create compelling presentations, I started advocating for web pages to become real pages. The idea is that the style sheet would trigger paged mode so that content is split into pages. Users would navigate from one page to the next with gestures, or perhaps with PageUp and PageDown. I want it to be possible, even easy, to create ebook-readers in browsers. For this to happen, a bit of magic would be helpful. Could you sprinkle some fairy dust on the pillows of all browser vendors, please?

CSS 不仅仅为浏览器而设的。2005 年的时候，我和 Bert 合著了一本关于 CSS 的书。第三版的时候，我们就想，看看能不能在写书的过程中，就用 CSS 来编写（译注：定义格式之类的）。后来，神器 Prince 出现了！ Michael Day 和墨尔本的伙伴发明了这种好东西，可以把 PDF 里文档采用 HTML/CSS 来定义，简直是神器！然后发送到打印机打印，毫无问题！于此期间，我发现了 Prince 的若干 bug。为此，我还参与 Prince 的开发。Prince 已经导出了上百本书籍了。我相信，未来仍然有相当的纸质书，不过稍有点不同的是，纸质书被印刷之前，它们采用 HTML/CSS 定义格式。
But CSS is not just for browsers. Bert and I wrote a book on CSS and in 2005, for the third edition, we wanted to use CSS itself for formatting. The browsers were not up to the job, but then Prince came along. Michael Day and his colleagues in Melbourne made a terrific product which was able to create a beautiful PDF document from HTML and CSS which we could send to the printer. In order to them to fix my favorite bugs, I joined the board of directors. Prince has since been used to format hundreds of books. We will still have some paper books in the future, I believe. And they will be made from HTML and CSS.

Why do we still not have a method of laying out pages in CSS that doesn’t require a Doctorate in Rocket Surgery? (I’m looking at you, Flexbox…)

布局是个复杂的话题，而且鉴于多种多样的显示设备，Web 之上的布局更显复杂。针对内容，CSS 有几种不同的布局机制：绝对布局，浮动，多列布局，Table 布局等。它们之间的嵌套更是复杂，但我不认为 doctorate 是需要的。我必须承认
Layout is complex, and layout on the web is even more complex due to pages being displayed on so many different devices. CSS has several mechanisms for laying out content, including absolutely positioned elements, floats, multi-column layout, and CSS tables. The interaction between them can be complex, but I don’t think any doctorate is needed. I must admit to not having used Flexbox much, though.

你对诸如 SASS 和 LESS 这类预处理器的看法是如何？CSS 应该从中汲取些什么优点？What’s your opinion on pre-processors like SASS and LESS? Does CSS have anything to learn from them?

是的，预处理器是好东西。我们应该把预处理器好的东西进行“拿来主义”来改造 CSS 本身。我个人最喜欢内嵌选择器，呃，还有单行注释吧（//……）。卖个关子，到 CSS 50周年的时候我告诉为啥一开始 CSS 没单行注释。Yes, pre-processors make a lot of sense. We should probably take the five or so most popular features from pre-processors and add them to CSS itself. My own favorites would be nested selectors, and single-line comments (starting with //). When CSS turns 50 I’ll tell you why they were not part of CSS from the beginning.