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↩