CSS發明者HåkonWiumLie訪談（二）

Bert Bos 如何參與進來的，你們怎麼一起工作的？
How did Bert Bos get involved, and how did you work together?

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.

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.