CSS History

Preface

若是隻是要寫程序，那的確是不須要這麼麻煩，上來直接看Syntax，動手寫上至少300行代碼，作上3個應用程序，這門語言你也就差很少會用了，接下來不過就是模式，特殊的地方以及記住一些函數而已。可是若是你想更深入的瞭解這門語言爲何這麼設計，想知根知底的時候，那麼回顧歷史是最好的選擇。並且通過這麼多年對於學習自己的研究，若是想要精通同樣東西，研究促使它誕生的問題會更加準確的明白它的缺點和優勢，以及理解它爲何會是這個邏輯，怎麼改善等等。而研究歷史的時候，有時候也會發現，由於當年某些限制條件沒法實現的更好的解決方案，如今正是實施的時候。

Style Sheets’ History

後面就像你們所知道的同樣，在95年11月6-7日的W3C Workshop上面，Håkon Lie 介紹了Cascading Style Sheets，算是開啓了CSS的歷史。可是針對於Style Sheet Language自己來講，則早於CSS一些，這部分在我打算查閱CSS歷史的時候才發現並無多少中文資料可供查詢。出於對起源的好奇以及自身的學習方法，將一些資料本身進行了彙總。

在好久好久之前(固然，是在有了HTML以後)，你們都是作學術的，所以大部分人只是用HTML來傳遞文檔，瀏覽器也只是要讓文檔能解析的好看一些就行了。從我得到的資料來看，用戶本身定義的樣式好像更加受到重視。

從1993年開始，你們相繼提出了本身的Style Sheet協議提案，然而不少都很複雜。若是讓如今的前端來看，部分看起來絕對是天書級別的。

Robert Raisch : Stylesheets for HTML1

# DEFAULT for all succeeding objects..

@UL in(le=5) 
@LI ma(pr=ro,be=4) in(le=10,ri=10)

我想這個能夠算是天書級別的協議了。開頭定了全部object適用的標準，在這之下大部分的屬性作了縮寫。好比nu對應的是number，be對應的是before。key和value之間使用的是=進行鏈接。 從現代的角度來講，這個標準的確不怎麼樣，可是他提供了幾個思路，應該說這個思路在後來的CSS裏面有所體現。

HTML documents would include a LINK STYLE tag which would point to a stylesheet associated with the current document. Multiple stylesheets could be used per document to include stylistic changes. Once a new stylesheet was loaded it would hide, not overwrite, the previous stylesheet. The previous stylesheet would become visible once an empty LINK STYLE tag was encountered.

第一條是推薦如何將style載入HTML裏面，在後面他提出了使用

<LINK STYLE="{URL}"/>

的方式進行載入，這個算是外鏈樣式表的起源的。而第二條，用我4級剛過的的英語看起來是很像是今天的層疊的概念。 Robert Raisch的提案是我目前見過的提案當中比較像CSS早期的起源協議了。

Pei-Yuan Wei:Stylesheet Language2

(HEAD,BODY  fontSize=normal
        BGColor=white
        FGColor=black
(H1     fontSize=largest
        BGColor=red
        FGColor=white)
(STRONG fontWeight=bold)
        )

這個感受起來很像中國的人提出了一個看起來很是酷的提案，可是很是很是短。若是是使用過LESS和Sacss的人就會頗有感受。沒錯，這是早期的嵌套語法。看起來很像是子選擇器和後代選擇器的原型，不過就算他不是，我想在動態CSS裏面基本上都包含了這個提案的概念。

Håkon Wium Lie: Cascading HTML style sheets – a proposal3

30%
h1.font.family = times
 
40%
font.family = times
h1.font.family = helvetica 100%
AGE > 3d ? background.color = pale_yellow : background.color = white
RELEVANCE > 80 ? h1.font.size *= 1.5
h1.font.size = 18pt 100%
h1.font.family = times;
h1.space.above = 36pt;
h1.space.below = 8pt;
 
speech.*.weight = 35db
speech.em.weight = 40db

這個是最先出現Cascade概念的Style Sheet提案，首先將樣式載入的方式作了規範，看起來已經很像咱們如今使用的規範了，而後他將Robert Raisch的提案進行了擴展，增長了權重值。這是最先期的權重值的使用。

首先，每一個樣式表當中先定義權重值是多少（而不是像今天是隨着selector計算出來的），解析的時候根據以前的權重值進行overwrite。語法方面更像是lisp和js。有心的人應該看出了，這裏面有三元表達式以及計算..固然也有帶單位的計算方式。LESS在這個方面算是弱爆了吧？他在協議裏面提到了如何計算，鑑於時間的緣由，我就沒在看下去了。

另外值得關注的是他針對HTML的多平臺特性，提出了多媒體的解決方案，就是上面的speech前綴，這個前綴可讓程序自動識別是針對哪一個平臺渲染。若是不指定前綴，默認是在全部的設備上面渲染。

Joe English:Style Sheets for HTML (postscript)4

<stylesheet>
      <colors>
        <color id=red rgb="#F00">
          </colors>
  <!-- Highlight all code sections in red: -->
    <style gis = "code kbd pre" fgcolor=red>
    </style>
</stylesheet>

這個是基於SGML定義了一些font的常量，看起來ms對CSS的影響不是很大。

James Clark : DSSSL & DSSSL Lite5

(define *heading-font* "Times New Roman")
(define *heading-weight* 'bold)
(define *heading-posture* 'italic)
 
(element H1
(make paragraph
font-family-name: *heading-font*
font-weight: *heading-weight*
font-posture: *heading-posture*
font-size: 20pt
quadding: 'center))
 
(element H2
(make paragraph
font-family-name: *heading-font*
font-weight: *heading-weight*
font-posture: *heading-posture*
font-size: 18pt
quadding: 'left))

這段代碼是Lisp格式的，可是若是你熟悉CSS的話，就會有一種感受:」嘿，老兄，這看起來好像是定義樣式用的。」沒錯，在CSS還沒有成型的時候，和它算是齊名的DSSSL［ISO標準］的的樣式。若是你更加熟悉LESS和SACSS的話，就會更有感受，由於它有更增強大的語法表達式以及變量定義。假想當時人們接受的是DSSSL而不是CSS的話，如今要再去區分黑客和設計師就會有點困難。雖然從歷史上，DSSSL不該該和CSS進行比較，不過那個時候Bert Bos在他的協議提案裏面提到了它。

Bert Bos：Stream-based Style sheet Proposal6

! Effect of `delay image loading' on FIG element
!
*FIG.inline: !SRC
*FIG.hide: true
delay_images*FIG.inline:
delay_images*FIG.hide: false
!
! Indentation and justification made dependent on window width
!
*DL.leftindent: 3.0
narrow*DL.leftindent: 1.0
wide*DL.leftindent: 5.0
!
narrow*P.justify: left
!
! Use colours only if on colour screen
!
*A.textcolor: red
*A.textbackground: yellow
b&w*A.textcolor: white
b&w*A.textbackground: black
monochrome*A.textcolor: black
monochrome*A.textbackground: gray80

1995年早期，Bert Bos提出了他本身的提案，有趣的是在前面先將各個提案比較了一番。這個講的就是後面覆蓋前面的基於流的樣式協議，在語法上借鑑了Håkon Wium Lie。不過這個時候採用了:去作分割，而且沒有分號。並且語法也很複雜，儘管Bos當時認爲這個很人性化。

Netscape：JavaScript-Based Style Sheets（JSSS）7

with(tags) {
  contextual(UL, LI).color = "red";
  contextual(UL, UL, LI).color = "blue";
}
 
ids.z098y.letterSpacing = "0.3em"
classes.foo.H1.color = "red"
tags.EM.color = "red";  /* red, really red!! */
tags.B.color = "blue";  // blue, really blue
contextual(tags.DIV, tags.P).color = "green";
contextual(classes.reddish.all, tags.H1).color = "red";
contextual(ids.x78y, tags.CODE).background = "blue";

1996年Netscape提出了它本身的標準給W3C，使用js去寫style。語法使用with來肯定做用域，這個時候js能夠將document解析爲tags，ids，classes這些object，而後使用js來進行查找賦值。對應group selector，則使用contextual函數去作。可是相應的，它死的悄無聲息，不過有傳聞說Netscape4內部是將CSS解析成JSSS來執行的，由於若是禁用JS的話，CSS也不會出現。

最後的勝利

最終的勝利，依舊仍是使用者(設計師)的勝利，由於他們得到了更加簡單的語言實現。CSS沒有引入上述協議當中的變量部分，它簡單的計算方式，人性化的語法，算是響應的暴雪的易於上手的規則，可是它也沒有難於精通，大部分的CSS只是在於你怎麼控制文檔流。無怪乎 Jakob Nielsen 來了一句:」Hopefully, future Web innovations will emulate the example set by the Web Consortium in its work on CSS.」

相關資料

• CSS History
• Wikipedia:CSS History
• Web Style Sheets
• W3C Workshop on Style Sheets 1995
• Historical Style Sheet proposals
• Effective Use of Style Sheets

UPDATE:

• [2011-10-16]拆分History部分和變量部分到新的文章，補全相關的協議

1. http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/443.html↩

2. http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q4.messages/263.html↩

3. http://www.w3.org/People/howcome/p/cascade.html↩

4. http://www.w3.org/Style/History/jenglish.ps↩

5. http://www.falch.no/~pepper/DSSSL-Lite/↩

6. http://www.w3.org/People/Bos/stylesheets.html↩

7. http://www.w3.org/Submission/1996/1/WD-jsss-960822.html↩