【Hello CSS】序章-起源

【Hello CSS】序章-起源

• 首发：https://juejin.im/user/576b433bd342d30057aaa1e9/posts
• 作者：陈大鱼头
• github： https://github.com/KRISACHAN

HTML的诞生

HTML是怎么来的？

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

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

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

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

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月， RobertRaisch给 www-talk邮件发了一个提案，希望创建一个“一种易于解析可以与Web文档一起提供样式信息的格式”，并给它起名叫 RRP。

格式如下：

@BODYfo(fa=he,si=18)

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

Viola 以及原始浏览器之战

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

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

1. (BODY fontSize=normal
2. BGColor=white
3. FGColor=black
4. (H1 fontSize=largest
5. BGColor=red
6. FGColor=white)
7. )

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

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

1. <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（这是一个四字单词简写，但是因为年代久远，已经不知道是哪四个单词了）的语言来为文档添加样式。 例子如下：

1. <outspec>
2. <docdesc>
3. <charlist>
4. <font size="12pt" bckcol="white" fontcol="black">
5. </charlist>
6. </docdesc>
7. <e-i-c gi="h1"><font size="24pt" bckcol="red", fontcol="white"></e-i-c>
8. <e-i-c gi="h2"><font size="20pt" bckcol="red", fgcol="white"></e-i-c>
9. <e-i-c gi="a"><font fgcol="red"></e-i-c>
10. <e-i-c gi="cmd kbd screen listing example"><font style="monoser"></e-i-c>
11. </outspec>

如果你困惑 docdesc或 charlist，那么你要知道， www-talk的成员跟你有同样的困惑。唯一给出上下文信息的是 e-i-c，即 elementincontext。 FOSI值得注意的是引入了 em作为字体单位，现在已经成为了很多熟悉CSS的人中更受欢迎的方法。

图灵完备的样式表

由于它的复杂性， FOSI被认为是格式化文档问题的临时解决方案。长远的解决方案是创建一个基于函数式编程语言Scheme的新语言，它可以做任何你能想象到的文档转换。这门语言叫 DSSSL。

下面是语法：

1. (element H1
2. (make paragraph
3. font-size: 14pt
4. font-weight: 'bold'))

因为它是一门编程语言，所以你可以函数化：

1. (define (create-heading heading-font-size)
2. (make paragraph
3. font-size: heading-font-size
4. font-weight: 'bold))
6. (element h1 (create-heading 24pt))
7. (element h2 (create-heading 18pt))

``

并在样式中使用数学结构，例如“条带化”表的行：

1. (element TR
2. (if (= (modulo (child-number) 2)
3. 0)
4. … ;even-row
5. …)) ;odd-row

最后，让你妒忌一下，DSSSL可以把继承的值当成变量进行数学运算：

1. (element H1
2. (make paragraph
3. font-size: (+ 4pt (inherited-font-size))))

不幸的是， DSSSL拥有和跟所有 Scheme类语言一样的致命弱点：括号太多了。此外，当它最终发布时，它可能过于完整，使浏览器开发人员感到害怕。 DSSSL规范包含210多个独立的可以定制样式的属性。

为什么样式表脱颖而出？

CSS 没有父级选择器（一种基于子元素的样式给父元素设置样式的方法）。 这个问题在Stack Overflow上被频繁的提问（这是其中一个）。但是事实证明，这个特性缺失是有理由的。特别在互联网早期，让网页在完全加载完成之前被渲染，是很重要的。意思就是，大家希望HTML加载完之前，就可以渲染已经加载完的部分。

父选择器意味着样式得在HTML文档一边加载时，一边更新。像DSSSL这样的语言如果实现了这个功能，因为它们可以对文档进行操作，所以也没很可能就不能用了。

在1995年3月， BertBos作为第一个提出这个问题的人，还提供可行方案。他的提案中还包括了一个早期的笑脸表情包 :-)。

这个语言有点像面向对象：

1. *LI.prebreak: 0.5
2. *LI.postbreak: 0.5
3. *OL.LI.label: 1
4. *OL*OL.LI.label: A

使用 .来指定直接子节点，使用 * 来指定祖先节点。

他的语言还有一个很酷的属性，就像这样在样式表中定义超链接：

1. *A.anchor: !HREF

在上面的例子中，指定 link的目标为其 HREF的值。像这种可控制链接等元素的行为在很多提案中都很流行。在 Javascript还没出来之前，没有什么可控制元素的方法，所以它们看起来是很合理的。

一个函数式的提案，1994年被一位叫 C.M.Sperberg-McQueen的绅士提出，里面包含了类似的行为。

1. (style a
2. (block #f) ; format as inline phrase
3. (color blue) ; in blue if you’ve got it
4. (click (follow (attval 'href))) ; and on click, follow url

他的语言还引入了 content关键字作为从样式表控制 HTML元素内容的一种方式，这个概念后来被引入到 CSS2.1中。

可能还有什么

在我谈到实际成为CSS的语言之前，还有另一种语言值得一提，因为它在某种程度上是早期Web开发者的梦想。

它就是 PSL96，按照当年的命名规范，1996年版的 PresentationSpecificationLanguage。PSL的核心很像CSS：

1. H1 {
2. fontSize: 20;
3. }

然而，它很快就变得很有趣了。例如，你不仅可以根据元素宽度来渲染它的位置，也可以基于浏览器的实际宽度来渲染。

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

甚至你可以使用元素左边的兄弟姐妹来定制。

你还可以为样式添加逻辑表达式。例如，仅设置具有href的锚元素的样式：

1. A {
2. if (getAttribute(self, "href") != "") then
3. fgColor = "blue";
4. underlineNumber = 1;
5. endif
6. }

这种样式可以扩展到我们今天用样式来完成的各种事情：

1. LI {
2. if (ChildNum(Self) == round(NumChildren(Parent) / 2 + 1)) then
3. VertPos: Top = Parent.Top;
4. HorizPos: Left = LeftSib.Left + Self.Width;
5. else
6. VertPos: Top = LeftSib.Actual Bottom;
7. HorizPos: Left = LeftSib.Left;
8. endif
9. }

支持这功能的话或许真的可以实现内容与样式分离的梦想。遗憾的是这门语言拓展性太强，这就以为着不用浏览器的实现可能会不一样。而且，它是以一系列的文章出现出现在学术界，并没有经过 www-talk邮件列表进行讨论，所以，它永远不会出现在主流浏览器。

CSS之魂

一门语言，至少从名字上，直接引出了 CSS，它叫 CHSS(CascadingHTMLStyleSheets)，提案在1994年被 Håkon WLie提出。

跟很多好主意一样，这个原始提案非常疯狂。

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

注意行尾的百分比，这个百分比是指当前样式表占用该值的“权重”。例如，如果之前的样式表已将h2字体大小定义为30pt，拥有60％，并且此样式表将h2s设置为20px 40％，则这两个值将根据其权重百分比进行组合在一起，大概就是26pt。

很明显，这个提案是在基于文档的 HTML页面的时代，基于拖鞋的设计是无法在我们面向应用的世界里发挥作用的。不过，它已经具备了样式表应该可以叠加的基本思想。换句话说，应该可以将多个样式表应用于同一页面。

它最初的形式被认为是重要的，因为它让用户可以控制他们所看到的内容。页面有一个样式表，并且Web用户将拥有自己的样式表，这两个样式表一起渲染在页面上。支持多个样式表被视为一种维护Web个人自由的方法，而不是支持开发人员（他们仍然手动编写单独的HTML页面）的方式。

用户可以控制该页面作者的建议的权重，就如提案中的ASCII 图那样。

1. User Author
2. Font o-----x--------------o 64%
3. Color o-x------------------o 90%
4. Margin o-------------x------o 37%
5. Volume o---------x----------o 50%

像许多这些提案一样，它包含了几十年来不可能出现在CSS中的特性。例如，可以根据用户的环境编写逻辑表达式。

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

在一个有点乐观的未来场景中，浏览器会根据给定的内容对你的相关性，允许它以更大的尺寸展示给你看。

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

你知道接下来发生了什么

HåkonLie继续简化他的提案，且和 BertBos合作，并在1996年11月发布的 CSS规范的第一版。最终他将创造 CSS写进了他的博士论文里，也就是这个文档帮助我写了这篇文章。

与许多其他提案相比，CSS的一个值得注意的事实是它的简单性。它易于分析，易于编写和轻松阅读。与互联网历史上的许多其他例子一样，对于初学者来说，需要的是最容易上手的技术，而不是那些给更强大的专业人员用的技术。

它本身就给我们一个提醒，这是一个偶然发生的创新。例如，仅添加了对上下文选择器（ body ol li）的支持，因为 Netscape已经有一种方法可以从超链接的图像中删除边框，并且似乎有必要实现流行浏览器可以执行的所有操作。这个功能本身就大大拖延了 CSS的实现，因为大多数浏览器在解析HTML时没有保留标签的“堆栈”。这意味着必须重新设计解析器才能完全支持CSS。

像这样的挑战（以及广泛使用非标准HTML标签来定义样式）导致着CSS直到1997年才可使用，直到2000年3月才有浏览器完全支持它。这跟每个开发者跟你说的一样，浏览器近几年才真正标准化，这里距首次发布CSS已经过去了21年（原文15年）了。

最终BOSS

IE3以（有点可怕的） CSS支持着称。为了竞争， Netscape4也考虑了 CSS。但它还是决定通过将CSS转换为JavaScript并执行它来实现它，而不是将第三种（考虑HTML和JavaScript）。更有甚者，Web开发人员应该可以访问这个“JavaScript样式表”中间语言。

语法是直接使用 JavaScript，然后添加了一些特定样式的API：

1. tags.H1.color = "blue";
2. tags.p.fontSize = "14pt";
3. with (tags.H3) {
4. color = "green";
5. }
7. classes.punk.all.color = "#00FF00"
8. ids.z098y.letterSpacing = "0.3em"

你甚至可以定义一个每遇到一个标签就执行一次的函数：

1. evaluate_style() {
2. if (color == "red"){
3. fontStyle = "italic";
4. } else {
5. fontWeight = "bold";
6. }
7. }
9. tag.UL.apply = evaluate_style();

我们应该简化样式和脚本之间分界线的想法是合理的，现在在React社区还出现了各种类似的思路。

在当时， JavaScript本身就是一种非常新的语言，但是通过一些逆向工程， IE已经在 IE3中添加了对它的支持（如“ JScript”）。更大的问题是社区已经在 CSS周围团结起来，而 Netscape在这个时候被大多数标准社区视为胖虎(原文bullies)。当Netscape确实向标准委员会提交JSSS时，它被置若罔闻。三年后，Netscape 6放弃了对JSSS的支持，而且自己也准备安乐死了。

还有什么可能

由于W3C的一些公开羞辱， IE5.5在2000年推出了几乎完整的CSS1支持。当然，正如我们现在所知，浏览器的CSS在未来10年里都非常粗糙且难以使用。还好今天情况大大改善了，让开发者写一份代码并在不同浏览器中都可以运行的梦想（几乎）实现了。

我个人的结论是，无论这些决策是拍大腿决定的还是深思熟虑的，都决定了当前工具的形式。如果CSS的设计方式只是为了满足1996年的限制，那么20年后的我们做事的方式应该会有些不同。

参考资料：

CSS之父的访谈录（https://dev.opera.com/articles/css-twenty-years-hakon/）

基于 CSS3 的下一代 Web 应用开发，第 1 部分（https://www.ibm.com/developerworks/cn/web/1101_qinjian_css3/index.html）

差点要成为CSS的语言（https://eager.io/the-languages-which-almost-were-css/）

CSS3(MDN)（https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS3）

【Hello CSS】系列

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

如果你也喜欢 CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，鱼头非常希望你能加入一个有趣的微信群 — “进击的CSS”。如果你有兴趣，请添加鱼头微信（krisChans95），添加时注明 “加群”，Mmmm，最后，如果觉得我的文章还不错，请加个关注跟点个“好看”呗！