微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

2016-07-27 19:55 伯乐专栏\/刘唱

(点击上方公众号,可快速关注)

原文:Sheena Lyonnais

译文:伯乐在线 - 刘唱

链接:http://web.jobbole.com/87068/


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


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


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


1996年12月—CSS 1


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


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


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


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



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



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


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


  • 前景和背景颜色/图片

  • 字体属性例如字体和加粗

  • 文本,包括单词和字母间距

  • 外边距,边框,内边距

  • 分类和对齐


1998年5月—CSS 2


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


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



2011年6月—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准备从大学里毕业了一样,一个全新的世界正等待着它。


译者简介 ( 点击 → 加入专栏作者 


刘唱:澳门大学研究生在读,预备前端。



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 JS 开发者必须知道的十个 ES6 新特性 18 行 JS 代码编一个倒时器 怎么写好组件 不容错过的 10 篇前端技术热文 Chrome 中的这个彩蛋,你知道吗?
猜您喜欢 Android-x86 4.2 震撼发布 Android拆分与加载Dex的多种方案对比 等很久了吧!前端面试题答案来了 嫦娥在奔月``我们在寻星!——携程技术2015校园招聘开始啦 32位和16位指令集模式自动切换机制