内容简介：作者 | 夏之安然
作者 | 夏之安然
责编 | 伍杏玲
出品 | CSDN（ID：CSDNnews）
在2019年的今天，我们能在网上看到炫酷的动画 加载 ，精彩绝伦的交互效果，以及从 PC 端到移动端的响应式交互，大家觉得习以为常。可你不知道的是，在 20 多年前，网页仅仅提供了文档展示能力，没有装饰的它就像一张黑白报纸那样简陋。
你是否会问：网页是如何变成像今天这样精美的？
这就归功于 CSS 了。
CSS 的诞生
20 世纪 90 年代蒂姆·伯纳斯·李（Tim Berners-Lee）发明万维网，创造 HTML 超文本标记语言。此后网页样式便以各种形式存在，不同的浏览器有自己的样式语言来控制页面的效果，因为最原始的 Web 版本中根本没有提供一种网页装饰的方法。
ViolaWWW浏览器中的网页
在HTML迅猛发展的 90 年代，不同的浏览器根据自身的 HTML 语法结构来支持实现不同的样式语言。在最初的 HTML 版本中，由于只含有很少的显示属性，所以用户可以自己决定显示页面的方式。
但随着 HTML 的发展，HTML 增加了很多功能，代码也越来越臃肿，HTML 就变得越来越乱。网页也失去了语义化，维护 代码 很艰难，因为代码很混乱：
于是装饰网页样式的 CSS（层叠样式表，Cascading Style Sheets）诞生了。
语法的确定
早期 CSS 的语法设计看上去类似后来的 JavaScript 语法（当时 JavaScript 尚未存在 ） ，实际上，CSS 的这个写法借鉴了 X11 Window System 中的 X 资源。
早期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 历史大事记
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是“江湖匪号：一只猪的故事 ” 。
IE6 Hacks和解决方案（图片来自飘零雾雨 CSS 参考手册）
如今我们在当下高级浏览器中实现一个圆角按钮是很简单的事，但在当时不支持 CSS3 属性的浏览器（IE6/7/8）中还得通过图片背景切图方法实现，如果按钮的长度不确定的话，还得实现按钮自适应长度，这也是考验前端工程师的 CSS 使用技巧和磨练我们的耐性。
那些年我们前端工程师的收藏夹不仅收藏 CSS Hacks，还会收藏各种布局攻略，如圣杯布局，也叫双飞翼布局，就是实现一个两侧宽度固定，中间宽度自适应的三栏布局，实现这些布局需要各种技巧和攻略。当时大牛们总结出的一些要点：
两侧宽度固定，中间宽度自适应
中间部分在 DOM 结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的
就这样，我们前端开发者练就了一身黑技能，直到微软发布 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 年后的计算机仍然能看懂。
参考资料：
CSS 发展历史及新特性
CSS 模块和标准化进程
A Look Back at the History of CSS
CSS: It was twenty years ago today — an interview with Håkon Wium Lie
作者简介：夏之安然，目前就职于国内领先旅游行业互联网公司，十年前端开发老兵。对中后台管理系统有深入研究，在团队主导多个管理系统架构设计，并且研发多款效率工具。
【End】
热 文推 荐
点击阅读原文，输入关键词，搜索CSDN文章。
你点的每个“在看”，我都认真当成了喜欢
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
JavaScript面向对象编程指南
斯托扬 / 凌杰 / 人民邮电出版社 / 2013-3 / 59.00元
《JavaScript面向对象编程指南》内容包括：JavaScript作为一门浏览器语言的核心思想；面向对象编程的基础知识及其在JavaScript中的运用；数据类型、操作符以及流程控制语句；函数、闭包、对象和原型等概念，以代码重用为目的的继承模式；BOM、DOM、浏览器事件、AJAX和JSON；如何实现JavaScript中缺失的面向对象特性，如对象的私有成员与私有方法；如何应用适当的编程模式，......一起来看看 《JavaScript面向对象编程指南》 这本书的介绍吧!
