你了解CSS吗?——CSS从何出来

724 阅读8分钟

这是《你了解CSS吗》系列的第一篇,该系列的其他篇入口如下:

缘起

大家好,我是fire,一个工作了两年的前端,在工作中打交道最多的可能就是web应用开发三剑客 —— HTML、CSS、JavaScript。这本应该是web前端开发最熟悉的三项技术,但是在有一天的工作中,当针对某个不熟悉的布局效果,熟练的打开百度-搜索-复制-粘贴这一系列熟悉的操作后,不熟悉的效果终于通过熟悉的方式实现,但是脑海中突然浮现了几个问题,我真的了解它们吗?为什么搜索引擎上面的技术博客的作者们可以想到这些我想不到的操作?于是乎我决定全面系统的整理一下这些东西。首先是从CSS开始,为什么选择CSS呢?原因如下:

  1. 相对于HTML和JavaScript来说,CSS在学习的时候有趣得多。
  2. 在整理过程中发现,CSS规范的整理明显比HTML和JavaScript繁琐的多。 本着先苦后甜的思想为原则,因此决定先把CSS搞定。

CSS从何而来

制定CSS标准的组织介绍

万维网联盟(W3C,World Wide Web Consortium),该组织(W3C)是由蒂姆·伯纳斯-李于1994年10月离开欧洲核子研究中心(CERN)后成立,在欧盟委员会国防高等研究计划署(DARPA)的支持下成立于麻省理工学院MIT计算机科学与人工智能实验室(MIT/LCS)。联盟试图让所有的供应商实施一套由联盟选择的核心原则和组件。

CSS规范的诞生流程

CSS规范的诞生要经历几个阶段之后才能成为W3C的推荐标准。具体的阶段介绍如下:

  • 工作草案阶段(WD,Working Draft)

    这是W3C规范的设计阶段。工作组根据内部和外部的反馈迭代规范。

    第一个正式工作草案被指定为“First Public Working Draft”(FPWD)。在CSSWG中,发布FPWD表明整个工作组已同意在该模块上工作,大致与编辑草稿中的范围和建议相同。

    向下一阶段的过渡有时称为“Last Call Working Draft”(LCWD) 阶段。一旦解决了所有已知问题,CSSWG就会转换工作草案,如果没有来自构建测试和实现的反馈,就无法取得进一步的进展。

    “最后征求意见”设置了报告任何未解决问题的截止日期,并要求工作组专门跟踪和处理收到的反馈,然后进行批注形成跟踪文档,该文档是对批注内容的处置。它与更新的草稿一起提交以供主任批准,以证明得到了广泛的审查和接受。

  • 候选推荐阶段(CR,Candidate Recommendation)

    这是W3C规范的测试阶段。这个过程通常会揭示规范的更多问题,因此候选推荐阶段将随着时间的推移而变化以响应实施和测试反馈,通常通过这个阶段后,内容比工作草案阶段的内容要少。

    退出CR需要展示每个功能的两个正确、独立的实现,因此在此阶段,工作组构建测试套件并生成实现报告。

    向下一阶段的过渡是“Proposed Recommendation”(PR,建议的推荐)。在这一点上,工作组只维护勘误文件,偶尔会发布更新版本,将勘误纳入规范。

  • 推荐阶段(REC,Recommendation)

    这是W3C规范的完成状态,代表维护阶段。在这一点上,工作组只维护勘误文件,偶尔会发布更新版本,将勘误纳入规范。

一个编辑草案的现场副本,并不表示工作组的共识,并且还有可能处于自相矛盾的状态。这是由于W3C的发布过程既耗时又繁重,编辑草案通常是规范的最新参考。

CSS有哪些版本?

我不知道多少人和我之前一样,只听过CSS和CSS3的叫法,至于CSS指什么?CSS3指的是什么?却很难分清楚(是不是很真实)。下面且听我娓娓道来。

CSS1(现已被废弃) 和 CSS2

CSS1是在1996年底成为W3C的推荐标准(REC),当时只包含字体、颜色和外边距等基本的属性。CSS2是在1998年成为推荐标准,增加了浮动和定位等高级特性,此外还有子选择符、相邻选择符和通用选择符等新选择符。

CSS2.1 和 CSS2.2

在CSS2发布之后,CSS3的制定就开始了,但是由于CSS3的包含大量新的东西,所以制定的非常缓慢。随着CSS社区在CSS2方面获得的丰富的经验,发现了CSS2中有一些错误需要更正,随后发布各种勘误表更正了CSS2规范中的错误,虽然这些错误中很多都在CSS3中的得到了解决,但碍于CSS3还遥遥无期,当前的状态严重阻碍了CSS2的 实施(implementation)互操作性(interoperability) 。因此在2002年发布了CSS2的修订版本CSS2 Revision 1,也就是CSS2.1。CSS2.1大概做了下面这些事情:

  1. 保持与那些被广泛接受和实现的CSS2部分的兼容性。
  2. 包含所有已发布的CSS2勘误表。
  3. 在实现与CSS2规范完全不同的情况下,修改规范已符合普遍接受的实践。
  4. 删除由于尚未实现而被CSS社区拒绝的CSS2功能。CSS2.1旨在反映一般HTML和XML语言合理且广泛实现的CSS特性,而不是仅针对特定的XML语言或仅针对HTML。
  5. 删除将被CSS3淘汰的CSS2功能,从而鼓励采用CSS3提议的功能代替它们。
  6. 添加少量的实现CSS2所必须的新属性值。 总体来说,CSS2.1就是把整个CSS规范做了一番清理,好为浏览器实现提供更精准的图纸。CSS2.1是在2011年6月成为推荐标准(REC)

CSS2.2是CSS2的第二个修订版,它纠正了CSS2.1中的一些错误,注意,CSS2.2并不是CSS的最新版本,它目前还处于工作草案阶段(WD)

CSS3

和CSS1规范与CSS2规范不同,CSS3采用了完全不同的模式来制定规范。其实准确的说,并不存在所谓的CSS3规范,因为所谓的CSS3指的是一系列级别独立的模块。啥意思呢?就是说CSS2以后的标准的制定开始分级,如果是一种全新的技术,就从1级(level 1) 开始命名,如果规范模块是对之前CSS概念的改进,就从3级(level 3) 开始命名(可以理解为CSS1中的模块规范命名为level 1,CSS2中的模块规范命名为level 2),举个例子:

  • 命名为CSS Backgrounds and Border Level 3的规范,因Backgrounds(背景)Border(边框) 是在CSS1或CSS2首次定义的,而最新的规范是对它们的改进,所以命名从Level 3开始。
  • 命名为CSS Grid Layout Level 1的规范(网格布局),因为是全新的技术,所以命名从Level 1开始。

这种模块化的方式可以让不同的规范有自己的演进速度,而我们通常所说的CSS3指的是足够新的CSS规范模块。

CSS3的制定工作是在CSS2发布之后就开始了,但这些新规范一开始的制定速度非常之缓慢,比如CSS2.1是在2011年6月成为推荐标准,此时距离CSS3的启动已经有十多年了,由此可见制定主体和浏览器开发商为了确保相应的特性得以原原本本的实现,需要花费多么长的时间。不过很多浏览器开发商经常会在标准还处于草案阶段(WD)时,就发布一些实验性的实现。这样,等到了候选推荐阶段,相应的实现就已经非常稳定了。换句话说,很多CSS特性早在相应的模块成为推荐标准之前就可以使用了。

以上就是对CSS规范版本的管理方式的介绍,可以结合下面的思维导图进行理解:

CSS规范制定.png

从何处开始

从上一小节可以发现,CSS规范的制定过程还是比较复杂的,面对如此之多的CSS规范,我们该从何处下手来整理CSS相关内容呢?

其实通过对这些规范的查询发现,CSS1规范已经废弃,CSS2的规范中又有许多问题,CSS2之后(CSS3)又改用了分层的模块化方式制定规范,所以了解CSS整体的内容最好的入口便是CSS2.1,虽然现在CSS2.1是一份比较旧的标准,但是有一个优点就是,CSS2.1是一个snapshot(快照),就是在这个标准中没有其他的标准去替代它,所有的内容都写在了这一份标准中(前面也说过,CSS2.1是把所有的CSS规范做了一个整理)。

OK,以上就是对CSS的起源的介绍,本篇内容就先写到这里,从下一章开始,让我们在CSS2.1中窥探整个CSS的知识体系。

参考链接

  1. zh.wikipedia.org/wiki/%E4%B8…
  2. www.w3.org/TR/
  3. 书籍:精通CSS-高级Web标准解决方案