【Hello CSS】序章 - 起源

HTML是怎么来的？

在1982年的时候，万维网的发明者Tim Berners-Lee爵士为了让全世界的物理学家能够方便的进行合作与信息共享，造了 HTML(HyperText Markup Language) 超文本置标语言。

在1991年3月， Tim Berners-Lee 把 HTML 介绍给了给他在 CERN(欧洲核子研究中心) 工作的朋友，当时网页浏览器被其世界各地的成员用来浏览 CERN 庞大的电话薄。

然后在8年之后的1990年，博士发明了世界上第一个浏览器WorldWideWeb，也因此推动着互联网高速发展。

在 WorldWideWeb 问世之后的1993年NCSA推出了Mosaic浏览器并且迅速火了起来，成为第一个世界级应用的浏览器，推动着互联网发展。随后跟着的有当时的两大霸主 Netscape deNetscape浏览器与 MicroSoft 的Internet Explorer浏览器，这两个浏览器在当时掀起了一场互联网浏览器大战。这场战争的结果是以 Internet Explorer 全胜告终。但也因此大大的推动了互联网的发展。

CSS的诞生

CSS是怎么来的？

就在承载 HTML 的浏览器迅猛发展的90年代， CSS (Cascading Style Sheet) 也应运而生。不同的浏览器结合各自 HTML 语法结构实现了很多不同的外部样式语法。但随着 HTML 的发展，为了满足设计师的要求而增加了很多显示功能，随着这些功能的增加，外部样式语法作用越来越没有意义。

在1994年10月10日，CSS之父Håkon Wium Lie提出了 CSS 的最初建议，并且为 HTML 样式在芝加哥的一次会议上正式提出了 CSS 。

在1996 年 12 月， W3C 在经过多方的讨论之后，推出了 CSS1.0 。这一规范一出现就引起了各方的注意，随即 MicroSoft 公司和 Netscape 公司纷纷表示自己的浏览器能够支持 CSS1.0 。

CSS的各个版本

CSS各版本的更新

1. CSS1.0 在1997 年 由 W3C 发布，第一版主要规定了 选择器 、 样式属性 、 伪类 / 对象 几个大的部分；
2. CSS2.0/2.1 在1998 年 由 W3C 发布，CSS2 规范是基于 CSS1 设计的，扩充和改进了很多更加强大的属性。包括 选择器 、 位置模型 、 布局 、 表格样式 、 媒体类型 、 伪类 、 光标样式 ；
3. 由于 CSS2 经历了 9 年的时间（从 2002 年 8 月到 2011 年 6 月）才达到 Recommendation（推荐） 状态，此后W3C为了加快那些已经确认没有问题的特性的标准化速度，便作出了一项被称为Beijing doctrine 的决定，将CSS模块化，并且按照每个模块的进度来标准化。所以从形式上来讲， CSS3 已经不存在了。现在CSS 包括了修订后的 CSS2.1 以及完整模块对它的扩充，模块的 level（级别）数并不一致。可以在每个时间点上为 CSS 标准定义一个 snapshots（快照）。

下图为CSS模块化的发展进程图，来自 MDN

差点要成为CSS的语言

现在的CSS也是经过一番争斗才脱颖而出的

以下内容翻译于 The Languages Which Almost Became CSS

第一个提案

早在1993年 Mosaic 浏览器1.0发布之前，当时现有的浏览器已经开始独立处理 HTML 了，但是它们并没有能给标签定制样式的方式，这就意味着你看到的标签长什么样就长什么样，不能改。

所以在1993年的6月， Robert Raisch 给 www-talk 邮件发了一个提案，希望创建一个“一种易于解析可以与Web文档一起提供样式信息的格式”，并给它起名叫 RRP 。

格式如下：

@BODY fo(fa=he,si=18)
复制代码

看不懂上面的代码是情有可原的。在 gzipping 之前的时代，网络传输速度只有14.4K，所以格式尽量压缩都是合理的。这个特殊规则是将 font family (fa) 设置为 helvetica (he) ，将 font size(si) 设置为 18 points 。

Viola 以及原始浏览器之战

和流行的看法不一样， Mosaic 并不是第一个图形浏览器，ViolaWWW才是。由Pei-Yuan Wei花了4天写的。

以下是 Pei-Yuan Wei 创建的样式表语言：

(BODY fontSize=normal
      BGColor=white
      FGColor=black
  (H1   fontSize=largest
        BGColor=red
        FGColor=white)
)
复制代码

在这个例子中我们给 body 添加了颜色选择器，并且给 body 中的 h1 添加了样式。

值得一提的是PWP还是引用外部样式表的方法提出者，他提出的方法一直沿用至今。

<LINK REL="STYLE" HREF="URL_to_a_stylesheet">
复制代码

不幸的是， ViolaWWW 只能运行在X Window System系统中，这个系统只在Unix中受欢迎。当 Mosaic 移植到 Windows 上不久后就把 ViolaWWW 抛到身后了。

Web之前的样式表

早在互联网之前就有对文档样式进行修改的语言要求。

正于你所知道的， HTML 源于一个在互联网之前就出现的语言， SGML 。早在1987年，美国国防部就决定研究 SGML 是否可以使文档存储和传输更加便捷，他们有大量的文档需要处理。跟其他好的政府项目一样，他们没有时间可以浪费在起名上。这个团队最初叫计算机辅助后勤支持队，后来叫计算机辅助采集和后勤支持队，最后叫持续获取和生命周期支持计划。反正简写都是 CALS 。

CALS 为 SGML 创建了一个叫 FOSI （这是一个四字单词简写，但是因为年代久远，已经不知道是哪四个单词了）的语言来为文档添加样式。 例子如下：

<outspec>
  <docdesc>
    <charlist>
      <font size="12pt" bckcol="white" fontcol="black">
    </charlist>
  </docdesc>
  <e-i-c gi="h1"><font size="24pt" bckcol="red", fontcol="white"></e-i-c>
  <e-i-c gi="h2"><font size="20pt" bckcol="red", fgcol="white"></e-i-c>
  <e-i-c gi="a"><font fgcol="red"></e-i-c>
  <e-i-c gi="cmd kbd screen listing example"><font style="monoser"></e-i-c>
</outspec>
复制代码

如果你困惑 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
复制代码

他的语言还引入了 conten t关键字作为从样式表控制 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之魂

一门语言，至少从名字上，直接引出了 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
复制代码

你知道接下来发生了什么

###最终BOSS

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】系列

【Hello CSS】 是以 CSS 基础概念为主题的系列文章，旨在帮助大家更深刻地了解并且提高 CSS 在各位开发者心目中的地位。由于鱼头我水平有限，文笔有限，如果各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会非常感谢的；如果通过文章有任何想法或疑问，也希望各位能积极留言，我们互相探讨；如果通过本系列文章有所收获，这就让鱼头我喜不自胜了！