作者 | 夏之安然

责编 | 伍杏玲

出品 | 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 结构上优先，以便先行渲染

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

只需要使用一个额外的 <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 年后的计算机仍然能看懂。

参考资料：

CSS 发展历史及新特性

CSS 模块和标准化进程

A Look Back at the History of CSS

CSS: It was twenty years ago today — an interview with Håkon Wium Lie

作者简介：夏之安然，目前就职于国内领先旅游行业互联网公司，十年前端开发老兵。对中后台管理系统有深入研究，在团队主导多个管理系统架构设计，并且研发多款效率工具。

90%的程序员学Python这么认为：

https://edu.csdn.net/topic/python115?utm_source=csdn_bw

【End】

热文 推荐

☞5G 来了，我们可以做什么？

☞V神已抵京, 倒计时4天! 6大理由告诉你为什么要参加"2019以太坊技术及应用大会"

☞华为获首张 5G 终端进网许可证；Linux 之父来华；Eclipse 4.12 发布 | 极客头条

☞“我不是个优秀的 Web 开发人员，我只是擅长搜索谷歌”

☞盖茨承认犯下价值 4000 亿美元的错！

☞听说，私有云也出新一代了？

☞Flink最锋利的武器：Flink SQL入门和实战 | 附完整实现代码

☞Python处理图片九宫格，炫酷朋友圈

她说：程序员离开电脑就是 “废物” ！

点击阅读原文，输入关键词，搜索CSDN文章。

你点的每个“在看”，我都认真当成了喜欢

CSS 二十年发展简史相关推荐

计算机信息处理技术的发展历程,中文信息处理技术发展简史.docx
中文信息处理技术发展简史张华平 (中国科学院计算技术研究所软件实验室北京100080) E-mail: zhanghp@sof[ware? Homepage: ; hMp://pipy_ 摘要:真正 ...
Java语言发展简史
Java语言发展简史 JAVA 语言历史近二十年, 已发展成为人类计算机史上影响深远的编程语言. JAVA 语言是一门非常纯粹的面向对象编程语言, 它吸收了 C++ 语言的各种优点, 又摒弃了 C++ ...
Web(万维网)发展简史
静态网页的诞生 1989年,在欧洲粒子物理实验室(粒子物理研究通常与来自世界各地的研究所进行合作)的IT部门工作的Tim Berners-Lee向其领导提出了一项名为Information Manag ...
【前端之旅】Web前端发展简史
一名软件工程专业学生的前端之旅,记录自己对三件套(HTML.CSS.JavaScript).Jquery.Ajax.Node.js.Vue.Axios.小程序开发(Uniapp)以及各种UI组件库.前 ...
Web发展简史(（webapp+Java原生）移动端开发 )+web网站)
Web发展简史--------->((webapp+Java原生)移动端开发(微信小程序,公众号,头条app))+web网站) Web发展简史 1:在那时,Web开发还比较简单,开发者经常会去操 ...
2021年大数据Hadoop（二）：Hadoop发展简史和特性优点
2021大数据领域优质创作博客,带你从入门到精通,该博客每天更新,逐渐完善大数据各个知识体系的文章,帮助大家更高效学习. 有对大数据感兴趣的可以关注微信公众号:三帮大数据目录 Hadoop发展简史 ...
从GBIP到PXI 的发展简史
从GBIP到PXI - 量测技术发展简史前言对于当今的电子工业而言,从组件到系统.设计到生产,量测工作皆是不可或缺的一环.工厂必须借助量测获知产品效能,作为产品设计的参考依据:在生产过程中,往往需要 ...
Kubernetes 入门必备云原生发展简史
作者|张磊阿里云容器平台高级技术专家,CNCF 官方大使 "未来的软件一定是生长于云上的"这是云原生理念的最核心假设.而所谓"云原生",实际上就是在定义一条能 ...
编程方法学4：计算机科学发展简史
前言本笔记是斯坦福公开课,编程方法学的学习笔记. 正文本次的笔记对应的是第四节课,这堂课复习了计算机的发展简史,同时,开始讲授java编程的核心思想,面向对象以及java虚拟机. 计算机发展简史: ...

CSS 二十年发展简史

CSS 发展历史及新特性

CSS 模块和标准化进程

A Look Back at the History of CSS

CSS: It was twenty years ago today — an interview with Håkon Wium Lie

CSS 二十年发展简史相关推荐

最新文章

热门文章