作者 | 夏之安然

责编 | 伍杏玲

出品 | 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
<https://edu.csdn.net/topic/python115?utm_source=csdn_bw>

【End】



 热 文 推 荐 

☞5G 来了,我们可以做什么? <https://blog.csdn.net/csdnnews/article/details/93681750>

☞V神已抵京, 倒计时4天! 6大理由告诉你为什么要参加"2019以太坊技术及应用大会"
<http://mp.weixin.qq.com/s?__biz=MzU2MTE1NDk2Mg==&mid=2247496173&idx=1&sn=a7aa6fe310e14301dfe886f13452355e&chksm=fc7faf10cb0826061b33026a9298e6a73a37b9d40271d8a76396da376d6d97b9580f07bdc1c8&scene=21#wechat_redirect>


<http://mp.weixin.qq.com/s?__biz=MjM5MjAwODM4MA==&mid=2650723182&idx=3&sn=f791c5d63ebecb9e91d3571ae9997fdf&chksm=bea6a2bd89d12bab1c54cf08bce313d58cbc2d7ff9aa9cf165a82c5abd857117f755f7b7718f&scene=21#wechat_redirect>
华为获首张 5G 终端进网许可证;Linux 之父来华;Eclipse 4.12 发布 | 极客头条
<https://blog.csdn.net/csdnnews/article/details/93806753>

☞“我不是个优秀的 Web 开发人员,我只是擅长搜索谷歌”
<https://blog.csdn.net/csdnnews/article/details/93806976>

☞盖茨承认犯下价值 4000 亿美元的错!
<https://blog.csdn.net/csdnsevenn/article/details/93678945>

☞听说,私有云也出新一代了?
<http://mp.weixin.qq.com/s?__biz=MzA3MjY1MTQwNQ==&mid=2649828584&idx=1&sn=06a37e75d044b4d15b53e91f9e9e3d2c&chksm=871e8b0ab069021c4b7f26fcbcc37281a30dc1b2838e68ff3f6a62e8e630b6a354762f4ca278&scene=21#wechat_redirect>

☞Flink最锋利的武器:Flink SQL入门和实战 | 附完整实现代码
<https://blog.csdn.net/dQCFKyQDXYm3F8rB0/article/details/93677261>

☞Python处理图片九宫格,炫酷朋友圈
<http://mp.weixin.qq.com/s?__biz=MzU5MjEwMTE2OQ==&mid=2247486931&idx=1&sn=5c32fe2117599492970cd04448a07b31&chksm=fe25a78dc9522e9bae849dc247b70104c87777ac2c8d67f5b8ae8835e9a26c6323c93df43b70&scene=21#wechat_redirect>

她说:程序员离开电脑就是 “废物” ! <https://blog.csdn.net/csdnnews/article/details/92082695>

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

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

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信