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

由于它的復(fù)雜性，FOSI被認(rèn)為是格式化文檔問(wèn)題的臨時(shí)解決方案。長(zhǎng)遠(yuǎn)的解決方案是創(chuàng)建一個(gè)基于函數(shù)式編程語(yǔ)言Scheme的新語(yǔ)言，它可以做任何你能想象到的文檔轉(zhuǎn)換。這門(mén)語(yǔ)言叫DSSSL。

下面是語(yǔ)法：

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

因?yàn)樗且婚T(mén)編程語(yǔ)言，所以你可以函數(shù)化：

(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))

并在樣式中使用數(shù)學(xué)結(jié)構(gòu)，例如“條帶化”表的行：

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

最后，讓你妒忌一下，DSSSL可以把繼承的值當(dāng)成變量進(jìn)行數(shù)學(xué)運(yùn)算：

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

不幸的是，DSSSL擁有和跟所有Scheme類(lèi)語(yǔ)言一樣的致命弱點(diǎn)：括號(hào)太多了。此外，當(dāng)它最終發(fā)布時(shí)，它可能過(guò)于完整，使瀏覽器開(kāi)發(fā)人員感到害怕。 DSSSL規(guī)范包含210多個(gè)獨(dú)立的可以定制樣式的屬性。

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

父選擇器意味著樣式得在HTML文檔一邊加載時(shí)，一邊更新。像DSSSL這樣的語(yǔ)言如果實(shí)現(xiàn)了這個(gè)功能，因?yàn)樗鼈兛梢詫?duì)文檔進(jìn)行操作，所以也沒(méi)很可能就不能用了。

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

這個(gè)語(yǔ)言有點(diǎn)像面向?qū)ο螅?/p>

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

使用.來(lái)指定直接子節(jié)點(diǎn)，使用* 來(lái)指定祖先節(jié)點(diǎn)。

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

*A.anchor: !HREF

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

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

(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

他的語(yǔ)言還引入了content關(guān)鍵字作為從樣式表控制HTML元素內(nèi)容的一種方式，這個(gè)概念后來(lái)被引入到CSS 2.1中。

在我談到實(shí)際成為CSS的語(yǔ)言之前，還有另一種語(yǔ)言值得一提，因?yàn)樗谀撤N程度上是早期Web開(kāi)發(fā)者的夢(mèng)想。

它就是PSL96，按照當(dāng)年的命名規(guī)范，1996年版的Presentation Specification Language。PSL的核心很像CSS：

H1 {
  fontSize: 20;
}

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

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

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

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

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

這種樣式可以擴(kuò)展到我們今天用樣式來(lái)完成的各種事情：

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
}

支持這功能的話或許真的可以實(shí)現(xiàn)內(nèi)容與樣式分離的夢(mèng)想。遺憾的是這門(mén)語(yǔ)言拓展性太強(qiáng)，這就以為著不用瀏覽器的實(shí)現(xiàn)可能會(huì)不一樣。而且，它是以一系列的文章出現(xiàn)出現(xiàn)在學(xué)術(shù)界，并沒(méi)有經(jīng)過(guò)www-talk郵件列表進(jìn)行討論，所以，它永遠(yuǎn)不會(huì)出現(xiàn)在主流瀏覽器。

一門(mén)語(yǔ)言，至少?gòu)拿稚希苯右隽?b>CSS，它叫CHSS (Cascading HTML Style Sheets)，提案在1994年被H?kon W Lie提出。

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

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

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

很明顯，這個(gè)提案是在基于文檔的HTML頁(yè)面的時(shí)代，基于拖鞋的設(shè)計(jì)是無(wú)法在我們面向應(yīng)用的世界里發(fā)揮作用的。不過(guò)，它已經(jīng)具備了樣式表應(yīng)該可以疊加的基本思想。換句話說(shuō)，應(yīng)該可以將多個(gè)樣式表應(yīng)用于同一頁(yè)面。

它最初的形式被認(rèn)為是重要的，因?yàn)樗層脩艨梢钥刂扑麄兯吹降膬?nèi)容。頁(yè)面有一個(gè)樣式表，并且Web用戶將擁有自己的樣式表，這兩個(gè)樣式表一起渲染在頁(yè)面上。支持多個(gè)樣式表被視為一種維護(hù)Web個(gè)人自由的方法，而不是支持開(kāi)發(fā)人員（他們?nèi)匀皇謩?dòng)編寫(xiě)多帶帶的HTML頁(yè)面）的方式。

用戶可以控制該頁(yè)面作者的建議的權(quán)重，就如提案中的ASCII 圖那樣。

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

像許多這些提案一樣，它包含了幾十年來(lái)不可能出現(xiàn)在CSS中的特性。例如，可以根據(jù)用戶的環(huán)境編寫(xiě)邏輯表達(dá)式。

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

在一個(gè)有點(diǎn)樂(lè)觀的未來(lái)場(chǎng)景中，瀏覽器會(huì)根據(jù)給定的內(nèi)容對(duì)你的相關(guān)性，允許它以更大的尺寸展示給你看。

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

H?kon Lie繼續(xù)簡(jiǎn)化他的提案，且和Bert Bos合作，并在1996年11月發(fā)布的CSS規(guī)范的第一版。最終他將創(chuàng)造CSS寫(xiě)進(jìn)了他的博士論文里，也就是這個(gè)文檔幫助我寫(xiě)了這篇文章。

與許多其他提案相比，CSS的一個(gè)值得注意的事實(shí)是它的簡(jiǎn)單性。它易于分析，易于編寫(xiě)和輕松閱讀。與互聯(lián)網(wǎng)歷史上的許多其他例子一樣，對(duì)于初學(xué)者來(lái)說(shuō)，需要的是最容易上手的技術(shù)，而不是那些給更強(qiáng)大的專(zhuān)業(yè)人員用的技術(shù)。

它本身就給我們一個(gè)提醒，這是一個(gè)偶然發(fā)生的創(chuàng)新。例如，僅添加了對(duì)上下文選擇器（body ol li）的支持，因?yàn)?b>Netscape已經(jīng)有一種方法可以從超鏈接的圖像中刪除邊框，并且似乎有必要實(shí)現(xiàn)流行瀏覽器可以執(zhí)行的所有操作。這個(gè)功能本身就大大拖延了 CSS的實(shí)現(xiàn)，因?yàn)榇蠖鄶?shù)瀏覽器在解析HTML時(shí)沒(méi)有保留標(biāo)簽的“堆棧”。這意味著必須重新設(shè)計(jì)解析器才能完全支持CSS。

像這樣的挑戰(zhàn)（以及廣泛使用非標(biāo)準(zhǔn)HTML標(biāo)簽來(lái)定義樣式）導(dǎo)致著CSS直到1997年才可使用，直到2000年3月才有瀏覽器完全支持它。這跟每個(gè)開(kāi)發(fā)者跟你說(shuō)的一樣，瀏覽器近幾年才真正標(biāo)準(zhǔn)化，這里距首次發(fā)布CSS已經(jīng)過(guò)去了21年（原文15年）了。

IE 3以（有點(diǎn)可怕的）CSS支持著稱(chēng)。為了競(jìng)爭(zhēng)，Netscape 4也考慮了CSS。但它還是決定通過(guò)將CSS轉(zhuǎn)換為JavaScript并執(zhí)行它來(lái)實(shí)現(xiàn)它，而不是將第三種（考慮HTML和JavaScript）。更有甚者，Web開(kāi)發(fā)人員應(yīng)該可以訪問(wèn)這個(gè)“JavaScript樣式表”中間語(yǔ)言。

語(yǔ)法是直接使用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"

你甚至可以定義一個(gè)每遇到一個(gè)標(biāo)簽就執(zhí)行一次的函數(shù)：

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

tag.UL.apply = evaluate_style();

我們應(yīng)該簡(jiǎn)化樣式和腳本之間分界線的想法是合理的，現(xiàn)在在React社區(qū)還出現(xiàn)了各種類(lèi)似的思路。

在當(dāng)時(shí)，JavaScript本身就是一種非常新的語(yǔ)言，但是通過(guò)一些逆向工程，IE已經(jīng)在IE3中添加了對(duì)它的支持（如“JScript”）。更大的問(wèn)題是社區(qū)已經(jīng)在CSS周?chē)鷪F(tuán)結(jié)起來(lái)，而Netscape在這個(gè)時(shí)候被大多數(shù)標(biāo)準(zhǔn)社區(qū)視為胖虎(原文bullies)。當(dāng)Netscape確實(shí)向標(biāo)準(zhǔn)委員會(huì)提交JSSS時(shí)，它被置若罔聞。三年后，Netscape 6放棄了對(duì)JSSS的支持，而且自己也準(zhǔn)備安樂(lè)死了。

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

我個(gè)人的結(jié)論是，無(wú)論這些決策是拍大腿決定的還是深思熟慮的，都決定了當(dāng)前工具的形式。如果CSS的設(shè)計(jì)方式只是為了滿足1996年的限制，那么20年后的我們做事的方式應(yīng)該會(huì)有些不同。

CSS之父的訪談錄

基于 CSS3 的下一代 Web 應(yīng)用開(kāi)發(fā)，第 1 部分

差點(diǎn)要成為CSS的語(yǔ)言

CSS3(MDN)

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

如果你也喜歡CSS，喜歡探討技術(shù)，或者對(duì)本文，本系列有任何的意見(jiàn)或建議，魚(yú)頭非常希望你能加入一個(gè)有趣的微信群 — “進(jìn)擊的CSS”。你可以掃描下方二維碼，添加魚(yú)頭微信，添加時(shí)注明 “加群”，如果你覺(jué)得我的文章有趣，歡迎關(guān)注微信公眾號(hào)“魚(yú)頭的Web海洋”。衷心希望可以遇見(jiàn)你。