CSS 二十年发展简史

译者 | 夏之科弱

白眉林 | 伍杏玲

公司出品 | CSDN（ID：CSDNnews）

在2019年的那时，他们能在网路上看见炫彩的动画电影读取，精彩纷呈的可视化效用，和从 PC 端到终端端积极响应式可视化，他们真的习以为常。可你不晓得的是，在 20 多年前，页面实际上提供更多了文件格式展现潜能，没点缀的它就像两张双色报刊那般破旧。

你与否会问：页面是怎样变为像那时这种精致的？

这就归因于 CSS 了。

CSS 的问世

20 世纪末 90 二十世纪末安迪·柏内兹·李（Tim Berners-Lee）发明者因特网，缔造 HTML LZ77记号词汇。其后页面样式便以各种形式存在，不同的浏览器有自己的样式词汇来控制页面的效用，因为最原始的 Web 版本中根本没提供更多一种页面点缀的方法。

CSS 二十年发展简史

ViolaWWW浏览器中的页面

在HTML迅猛产业发展的 90 二十世纪末，不同的浏览器根据自身的 HTML 语法结构来支持实现不同的样式词汇。在最初的 HTML 版本中，由于只含有很少的显示属性，所以用户可以自己决定显示页面的方式。

但随着 HTML 的产业发展，HTML 增加了很多功能，代码也越来越臃肿，HTML 就变得越来越乱。页面也失去了语义化，维护代码很艰难，因为代码很混乱：

CSS 二十年发展简史

于是点缀页面样式的 CSS（层叠样式表，Cascading Style Sheets）问世了。

语法的确定

早期 CSS 的语法设计看上去类似后来的 JavaScript 语法（当时 JavaScript 尚未存在），实际上，CSS 的这个写法借鉴了 X11 Window System 中的 X 资源。

CSS 二十年发展简史

早期CSS语法提案

在第一稿建议中，有一个影响百分比的说明符：h1.font.size = 20pt 80%。

行尾百分比的作用是想要通过这个百分比来控制该值的权重，如字号设置为 20pt，权重设置 80%，最终将字号值与权重组合在一起，值为 16pt。

这个写法的设计初衷是想将开发者与用户的要求与偏好组合到一起，CSS 之父哈肯·维姆·莱（Håkon Wium Lie）提议 CSS 应该有一把滑尺，这种开发者与用户都有完全的控制力。当时这个提议引起了他们的讨论，但由于这个办法对如 font-size等属性管用，但对另一些属性如 font-family 就不好用了，所以最终这个百分比的用法还是被舍弃了。

至于 CSS 的语法由 font.size 改成font-size，是怎么设计来的呢？首先，连字符读起来更像书面英语，简单易懂。其次，DSSSL（Document Style Semanticsand Specification Language，文件格式样式语义和规范词汇）和 DSSSL-Lite就使用这种连字符属性名。于是，CSS 也从中借鉴了连字符。

经过多年的努力，到1996年底，最终CSS语法变为了现在这个样子：

CSS 二十年发展简史

当前CSS语法

CSS 历史大事记

1994 年，Håkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是缔造了 CSS 的最初版本。

紧接着，他们在芝加哥的Mosaic and the Web 大会上第一次正式提出了 CSS 的建议，1995 年他们一起再次展现了这个建议。当时 W3C 刚刚建立，W3C 对 CSS 很感兴趣，为此专门组织了一次讨论会。

1996 年 12 月，W3C 推出了 CSS 规范的第一版本。

1997 年，W3C 颁布 CSS1.0 版本，CSS1.0 较全面地规定了文件格式的显示样式，可分为选择器、样式属性、伪类 / 对象几个部分。

这一规范立即引起了各方的关注，随即微软和网景公司的浏览器均能支持 CSS1.0，这为 CSS 的产业发展奠定了基础。

1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。

CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。

2005 年 12 月，W3C 开始 CSS3 标准的制定，到目前为止该标准还没最终定稿。

IE6，前端工程师的痛

2001 年，微软发布了 IE6，在 Windows 普及的二十世纪末 IE6 浏览器占据了高达 80% 的市场，这对 CSS 的标准推广起着重要作用。

因为 IE6 的用户量大，开发者们就选择了以大众为准，许多开发者竭尽全力把 IE6 下的页面做好，甚至一些开发者的口号很响“Only IE6”。

这种导致许多页面根本不是 W3C 标准，因为 IE6 有一套自己的解析渲染体系。最终 IE6 的庞大市场最终成为了 Web 开发者的一大绊脚石。

作为当时的开发者，必须掌握的一系列浏览器 Hacks，页面开发和面试必备。印象中当时经典的 Bug是“江湖匪号：一只猪的故事”。

CSS 二十年发展简史

IE6 Hacks和解决方案（图片来自飘零雾雨 CSS 参考手册）

如今他们在当下高级浏览器中实现一个圆角按钮是很简单的事，但在当时不支持 CSS3 属性的浏览器（IE6/7/8）中还得通过图片背景切图方法实现，如果按钮的长度不确定的话，还得实现按钮自适应长度，这也是考验前端工程师的 CSS 使用技巧和磨练他们的耐性。

那些年他们前端工程师的收藏夹不仅收藏 CSS Hacks，还会收藏各种布局攻略，如圣杯布局，也叫双飞翼布局，就是实现一个两侧宽度固定，中间宽度自适应的三栏布局，实现这些布局需要各种技巧和攻略。当时大牛们总结出的一些要点：

两侧宽度固定，中间宽度自适应

中间部分在 DOM 结构上优先，以便先行渲染

允许三列中的任意一列成为最高列

只需要使用一个额外的 <div> 标签

就这种，他们前端开发者练就了一身黑技能，直到微软发布 IE6 死亡倒计时。最先开始放弃 IE6 支持的是一线互联网大公司，如淘宝等，直到 2014 后，他们逐渐放弃了对 IE6 的支持，这简直是对前端工程师最大的福音。

随着 IE6 退出市场，2014年，微软发布 IE10 版本。

2016年，Chrome 浏览器占据全球浏览器排行榜首位。随着 Hybrid、React Native 等技术的兴起，互联网进入终端端时代，前端工程师开始新的挑战，忙碌于适配各种端。

我回首自己做前端开发的这十年来，记得印象最深刻是，电脑中安装的浏览器软件是最多的，IE家族、遨游、QQ、360、Chrome 浏览器等。

我一般写完一个项目后，自己先在所有浏览器跑一遍 CSS 的兼容性测试，直到所有浏览器没大问题才能进行项目提测发布。也正是有这种的严谨的工作态度，使我在工作中也在不断进步。有时候，回过头想想有过这种的经历也是一种技术财富的积累。

结语

CSS 经历了 20 多年的产业发展，从 PC 端到终端端，在前端工程化不断进步的那时，随着CSS的规范不断的完善升级，前端业务复杂度越来越高，带来的工程也越来越庞大，他们前端开发者对 CSS 工程化的方案也不断地探索。

现在一大批 CSS 预处理和后处理工具涌现，比较流行的 CSS 预处理器有 Sass、Less，CSS 后处理器诸如 clean-css、AutoPrefixer、Rework、PostCSS 等。

那么关于 CSS 将来产业发展会怎么样？未来 CSS 还能不能胜任自己的角色，会不会有新的模型代替它？对于这些问题，Håkon Wium Lie 认为 CSS 目前还能够胜任，还没看见能够取代它的新模型出现，新的技术肯定会层出不穷，但应该是对 CSS 的扩展而不是代替。他还表示，他们那时写的 CSS 代码，500 年后的计算机仍然能看懂。

参考资料：