【Hello CSS】序章-起源

如果你困惑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海洋”。衷心希望可以遇见你。