如果你困惑docdesc或charlist，那么你要知道，www-talk的成員跟你有同樣的困惑。唯一給出上下文信息的是e-i-c，即element in context。FOSI值得注意的是引入了em作為字體單位，現在已經成為了很多熟悉CSS的人中更受歡迎的方法。

由于它的復雜性，FOSI被認為是格式化文檔問題的臨時解決方案。長遠的解決方案是創建一個基于函數式編程語言Scheme的新語言，它可以做任何你能想象到的文檔轉換。這門語言叫DSSSL。

下面是語法：

(element H1
  (make paragraph
    font-size: 14pt
    font-weight: "bold"))

因為它是一門編程語言，所以你可以函數化：

(define (create-heading heading-font-size)
  (make paragraph
    font-size: heading-font-size
    font-weight: "bold))

(element h1 (create-heading 24pt))
(element h2 (create-heading 18pt))

并在樣式中使用數學結構，例如“條帶化”表的行：

(element TR
  (if (= (modulo (child-number) 2)
        0)
    …   ;even-row
    …)) ;odd-row

最后，讓你妒忌一下，DSSSL可以把繼承的值當成變量進行數學運算：

(element H1
  (make paragraph
    font-size: (+ 4pt (inherited-font-size))))

不幸的是，DSSSL擁有和跟所有Scheme類語言一樣的致命弱點：括號太多了。此外，當它最終發布時，它可能過于完整，使瀏覽器開發人員感到害怕。 DSSSL規范包含210多個獨立的可以定制樣式的屬性。

CSS 沒有父級選擇器（一種基于子元素的樣式給父元素設置樣式的方法）。 這個問題在Stack Overflow上被頻繁的提問（這是其中一個）。但是事實證明，這個特性缺失是有理由的。特別在互聯網早期，讓網頁在完全加載完成之前被渲染，是很重要的。意思就是，大家希望HTML加載完之前，就可以渲染已經加載完的部分。

父選擇器意味著樣式得在HTML文檔一邊加載時，一邊更新。像DSSSL這樣的語言如果實現了這個功能，因為它們可以對文檔進行操作，所以也沒很可能就不能用了。

在1995年3月，Bert Bos作為第一個提出這個問題的人，還提供可行方案。他的提案中還包括了一個早期的笑臉表情包:-)。

這個語言有點像面向對象：

*LI.prebreak: 0.5
*LI.postbreak: 0.5
*OL.LI.label: 1
*OL*OL.LI.label: A

使用.來指定直接子節點，使用* 來指定祖先節點。

他的語言還有一個很酷的屬性，就像這樣在樣式表中定義超鏈接：

*A.anchor: !HREF

在上面的例子中，指定link的目標為其HREF的值。像這種可控制鏈接等元素的行為在很多提案中都很流行。在Javascript還沒出來之前，沒有什么可控制元素的方法，所以它們看起來是很合理的。

一個函數式的提案，1994年被一位叫C.M. Sperberg-McQueen的紳士提出，里面包含了類似的行為。

(style a
  (block #f)     ; format as inline phrase
  (color blue)   ; in blue if you’ve got it
  (click (follow (attval "href)))  ; and on click, follow url

他的語言還引入了content關鍵字作為從樣式表控制HTML元素內容的一種方式，這個概念后來被引入到CSS 2.1中。

在我談到實際成為CSS的語言之前，還有另一種語言值得一提，因為它在某種程度上是早期Web開發者的夢想。

它就是PSL96，按照當年的命名規范，1996年版的Presentation Specification Language。PSL的核心很像CSS：

H1 {
  fontSize: 20;
}

然而，它很快就變得很有趣了。例如，你不僅可以根據元素寬度來渲染它的位置，也可以基于瀏覽器的實際寬度來渲染。

LI {
  VertPos: Top = LeftSib . Actual Bottom;
}

甚至你可以使用元素左邊的兄弟姐妹來定制。

你還可以為樣式添加邏輯表達式。例如，僅設置具有href的錨元素的樣式：

A {
  if (getAttribute(self, "href") != "") then
    fgColor = "blue";
    underlineNumber = 1;
  endif
}

這種樣式可以擴展到我們今天用樣式來完成的各種事情：

LI {
  if (ChildNum(Self) == round(NumChildren(Parent) / 2 + 1)) then
    VertPos: Top = Parent.Top;
    HorizPos: Left = LeftSib.Left + Self.Width;
  else
    VertPos: Top = LeftSib.Actual Bottom;
    HorizPos: Left = LeftSib.Left;
  endif
}

支持這功能的話或許真的可以實現內容與樣式分離的夢想。遺憾的是這門語言拓展性太強，這就以為著不用瀏覽器的實現可能會不一樣。而且，它是以一系列的文章出現出現在學術界，并沒有經過www-talk郵件列表進行討論，所以，它永遠不會出現在主流瀏覽器。

一門語言，至少從名字上，直接引出了CSS，它叫CHSS (Cascading HTML Style Sheets)，提案在1994年被H?kon W Lie提出。

跟很多好主意一樣，這個原始提案非常瘋狂。

h1.font.size = 24pt 100%
h2.font.size = 20pt 40%

注意行尾的百分比，這個百分比是指當前樣式表占用該值的“權重”。例如，如果之前的樣式表已將h2字體大小定義為30pt，擁有60％，并且此樣式表將h2s設置為20px 40％，則這兩個值將根據其權重百分比進行組合在一起，大概就是26pt。

很明顯，這個提案是在基于文檔的HTML頁面的時代，基于拖鞋的設計是無法在我們面向應用的世界里發揮作用的。不過，它已經具備了樣式表應該可以疊加的基本思想。換句話說，應該可以將多個樣式表應用于同一頁面。

它最初的形式被認為是重要的，因為它讓用戶可以控制他們所看到的內容。頁面有一個樣式表，并且Web用戶將擁有自己的樣式表，這兩個樣式表一起渲染在頁面上。支持多個樣式表被視為一種維護Web個人自由的方法，而不是支持開發人員（他們仍然手動編寫多帶帶的HTML頁面）的方式。

用戶可以控制該頁面作者的建議的權重，就如提案中的ASCII 圖那樣。

       User                   Author
Font   o-----x--------------o 64%
Color  o-x------------------o 90%
Margin o-------------x------o 37%
Volume o---------x----------o 50%

像許多這些提案一樣，它包含了幾十年來不可能出現在CSS中的特性。例如，可以根據用戶的環境編寫邏輯表達式。

AGE > 3d ? background.color = pale_yellow : background.color = white
DISPLAY_HEIGHT > 30cm ? http://NYT.com/style : http://LeMonde.fr/style 

在一個有點樂觀的未來場景中，瀏覽器會根據給定的內容對你的相關性，允許它以更大的尺寸展示給你看。

RELEVANCE > 80 ? h1.font.size *= 1.5

H?kon Lie繼續簡化他的提案，且和Bert Bos合作，并在1996年11月發布的CSS規范的第一版。最終他將創造CSS寫進了他的博士論文里，也就是這個文檔幫助我寫了這篇文章。

與許多其他提案相比，CSS的一個值得注意的事實是它的簡單性。它易于分析，易于編寫和輕松閱讀。與互聯網歷史上的許多其他例子一樣，對于初學者來說，需要的是最容易上手的技術，而不是那些給更強大的專業人員用的技術。

它本身就給我們一個提醒，這是一個偶然發生的創新。例如，僅添加了對上下文選擇器（body ol li）的支持，因為Netscape已經有一種方法可以從超鏈接的圖像中刪除邊框，并且似乎有必要實現流行瀏覽器可以執行的所有操作。這個功能本身就大大拖延了 CSS的實現，因為大多數瀏覽器在解析HTML時沒有保留標簽的“堆棧”。這意味著必須重新設計解析器才能完全支持CSS。

像這樣的挑戰（以及廣泛使用非標準HTML標簽來定義樣式）導致著CSS直到1997年才可使用，直到2000年3月才有瀏覽器完全支持它。這跟每個開發者跟你說的一樣，瀏覽器近幾年才真正標準化，這里距首次發布CSS已經過去了21年（原文15年）了。

IE 3以（有點可怕的）CSS支持著稱。為了競爭，Netscape 4也考慮了CSS。但它還是決定通過將CSS轉換為JavaScript并執行它來實現它，而不是將第三種（考慮HTML和JavaScript）。更有甚者，Web開發人員應該可以訪問這個“JavaScript樣式表”中間語言。

語法是直接使用JavaScript，然后添加了一些特定樣式的API：

tags.H1.color = "blue";
tags.p.fontSize = "14pt";
with (tags.H3) {
  color = "green";
}

classes.punk.all.color = "#00FF00"
ids.z098y.letterSpacing = "0.3em"

你甚至可以定義一個每遇到一個標簽就執行一次的函數：

evaluate_style() {
  if (color == "red"){
    fontStyle = "italic";
  } else {
    fontWeight = "bold";
  }
}

tag.UL.apply = evaluate_style();

我們應該簡化樣式和腳本之間分界線的想法是合理的，現在在React社區還出現了各種類似的思路。

在當時，JavaScript本身就是一種非常新的語言，但是通過一些逆向工程，IE已經在IE3中添加了對它的支持（如“JScript”）。更大的問題是社區已經在CSS周圍團結起來，而Netscape在這個時候被大多數標準社區視為胖虎(原文bullies)。當Netscape確實向標準委員會提交JSSS時，它被置若罔聞。三年后，Netscape 6放棄了對JSSS的支持，而且自己也準備安樂死了。

由于W3C的一些公開羞辱，IE 5.5在2000年推出了幾乎完整的CSS1支持。當然，正如我們現在所知，瀏覽器的CSS在未來10年里都非常粗糙且難以使用。還好今天情況大大改善了，讓開發者寫一份代碼并在不同瀏覽器中都可以運行的夢想（幾乎）實現了。

我個人的結論是，無論這些決策是拍大腿決定的還是深思熟慮的，都決定了當前工具的形式。如果CSS的設計方式只是為了滿足1996年的限制，那么20年后的我們做事的方式應該會有些不同。

CSS之父的訪談錄

基于 CSS3 的下一代 Web 應用開發，第 1 部分

差點要成為CSS的語言

CSS3(MDN)

【Hello CSS】是以CSS基礎概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開發者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收獲，這就讓魚頭我喜不自勝了！

如果你也喜歡CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，魚頭非常希望你能加入一個有趣的微信群 — “進擊的CSS”。你可以掃描下方二維碼，添加魚頭微信，添加時注明 “加群”，如果你覺得我的文章有趣，歡迎關注微信公眾號“魚頭的Web海洋”。衷心希望可以遇見你。