前端工程师应该了解的 CSS 进化史

497 查看

CSS生日快乐!你毫无疑问地在你短暂的生命里产生了巨大的影响,永远地改变了网络的审美。

层叠样式表(CSS)就像一位神童,从一开始就展示出了巨大的潜力。当它还在“青春期”努力地寻找兼容性的时候,这种样式语言就已经克服了大部分的障碍并证明了自己足以成为Web技术的基石。

让我们回顾一下迄今为止CSS的一生。

199612月—CSS 1

互联网上对CSS正式的介绍要追溯到1996年,万维网联盟 (W3C) 面向全世界发布CSS的时候。CSS并不是当时唯一一种正在开发中的样式语言,但是层叠这个绝对要素和开发序列将它与其他的语言区别开来。

“HTML 是一种具有语义并用来传达网页内容的语言,CSS 最初的设计目的,就是为了使 HTML 的这一理念能够保持下去。”一位Google的规范黑客(spec hacker)Tab Atkins Jr.在网络播客平台说,“尤其是让机器能够理解。”

样式表并不是全新的,自从标准通用标记语言(SGML)的开发以来,它(样式表)就因为一些能力而被使用。但在当时,将它应用于网页还是很新奇的。

CSS最初并没有什么闪光点,但是它的影响力是突然的。为了正确地来看待它,下图是第一个发布在网络上的网页看起来的样子:

css1-700x339

下面是一个类似的使用了CSS的基础网页的例子:

正如你所看到的那样,CSS的加入使得网页元素能够采用独特的特征。其主要的益处是设计师和开发人员现在可以不用通过更改HTML就能改变CSS的一些属性了。例如,蓝色的高亮区域可以换成绿色或红色。

但是在当时它大体上也就是这样了。W3C发布的CSS推荐标准拥有以下初始属性:

  • 前景和背景颜色/图片
  • 字体属性例如字体和加粗
  • 文本,包括单词和字母间距
  • 外边距,边框,内边距
  • 分类和对齐

19985月—CSS 2

参考CSS1中建立的属性,CSS 2的第一份工作草案在1997年11月发布,并且在1998年5月成为了W3C的推荐标准。

这个版本拓展了属性的能力,使其更加多样化。例如:有 :hover伪类和臭名昭著的文本阴影效果(现在已过时):

20116月—CSS 2.1

然而,W3C不再维护CSS 2的推荐标准了。作为替代,CSS2.1在2004年推出并于2011年6月成为了W3C推荐标准。这个建立在CSS 2之上的修订版解决了CSS 2的很多bug并代替了之前的版本。

CSS 2.1提升了复杂度。它准许了父子关系的概念,让设计师和开发人员可以在一个给定元素上定义多个类名。它还推出了可能成为响应式设计的第一次尝试:字体大小调整(font-size-adjust)属性。

演示文稿现在可以针对特定的媒体设备,包括手持设备,盲文设备,可视化浏览器,打印机和听觉设备。这是演变成为CSS 3的开始。

CSS 3

我们现在最熟悉的版本,CSS 3开发自1999年。其最大的不同之处是引入了模块,每个模块都拥有自己的功能和扩展功能。其中有一些取代了从前CSS2.1的部分。

自2011年6月,W3C正式推荐了四个模块以及大量用于开发的不同阶段的性能。本质上,此次 (CSS 3) 将整个CSS语言分解成为模块并使其彼此相互独立。

正式推荐的模块包括:

  1. 2011年6月 —颜色
  2. 2011年9月  第三代选择器
  3. 2011年9月   命名空间
  4. 2012年5月    媒体查询

媒体查询大概是最具革命性的模块之一。它负责响应式设计,并且已经成为如今网络界的标准。以下是一个基于媒体查询的基本响应式设计的例子:

CSS的未来:它将何去何从?

很多人想知道CSS接下来会如何。一些人甚至怀疑我们是否还需要CSS。

正如很多人所注意到的,W3C已经放弃了CSS的级别,使用这些条目只是为了与从前的版本区别开来。这在W3C社区已经为人熟知了一段时间了。

“从来就没有过CSS 4,以后也永远都不会有CSS 4,CSS 4是一个不存在的东西,” Tab Atkins Jr. 于2013年在他的博客中写道。他在Google工作,坐在CSS工作组,也贡献于W3C的其他几个工作组。

现今,这种语言被简单地称为CSS。这个社区也把精力集中在开发更复杂更有益的独立模块上,使这种语言更加成熟,能够适应现在设计师和不同设备的挑战和需求。在某种意义上,就像CSS准备从大学里毕业了一样,一个全新的世界正等待着它。