随着 CSS 3 的广泛应用,很多新的 CSS 属性层出不穷,有很多陌生的 CSS 属性出现,所以经常需要去学习新的 CSS 属性。新的属性往往介绍文章不多,所以有时候就需要去看看官方文档,此时会发现官方文档有好几个版本,看下图:

当初学 flex-box 的时候就发现有好多种写法,还好官方文档开头有标明那些文档时最新的。不过此时我萌生了去了解 CSS 标准流程的想法,我想作为一个合格的 CSSER 也应该去了解吧。这里讲到的知识基本来自 CSS-tricks 上 CHRIS COYIER 的一篇文章:https://css-tricks.com/css-standards-process/ 。

CSS 的标准化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C层叠样式列表小组,由浏览器商,大学,大公司(google,IBM等),以及独立CSS专家组成。W3C 本身并不制定标准,而是作为一个论坛式的平台,接收来自小组成员的提交,并通过会议来商讨制定标准,所有的提交以及讨论都是公开透明的,可以在 W3C 网站上看到会议的记录,标准确定一般有6个阶段,其中两个是过渡阶段:

1. 编辑草案 Editor's Draft (ED)

这个是规范的开始阶段,一个CSS属性或者选择器被提出来,并在CSSWG内部研究。如果小组成员同意这个属性可以正式推出,它就能进入下一阶段。

2、工作草案 Working Draft (WD)

编辑草案后是工作草案,标准的设计阶段。小组反复处理来自 CSSWG 内部和来自小组外部的反馈,这个阶段有两个结果:一是可能会因为技术困难或者可能会引起其他问题而使新属性被完全拒绝;二是规范会通过这个阶段,并会作为第一次公开工作草案( First Public Working Draft (FPWD))发布,后面还会有数个工作草案,会处理来自 CSSWG 内部和小组外部更广泛社会的反馈。

3、过渡-最后通告工作草案 Transition – Last Call Working Draft (LCWD)

这是第一个过渡阶段,当规范开始考虑从工作草案进入到下一个阶段时,将会对新属性的一些小改动的反馈设置一个截止日期,LCWD 即是日期截至后最后的一次公开草案处理。

注:最重要的阶段是 ED, WD, and CR(下面会讲到的),其他阶段不是很重要。

4. 候选推荐标准 Candidate Recommendation (CR)

规范会在这个阶段通过完整的测试,测试人员来自 CSSWG 以及被选为实现这个规范的浏览器生产商(Chrome, Safari, Firefox, Opera, 等等)。为了继续进入下一阶段,CSSWG 会推出两个正确的实现规范。

5. 过渡-建议推荐标准 Transition – Proposed Recommendations (PR)

当到达这个阶段,W3C全球资源小组:W3C咨询委员会(W3C Advisory Committee),决定这个规范是否会继续进入下一个阶段。这个阶段一般很少有异议出现,所以也是一个过渡阶段而已。

6.推荐标准 Recommendation (REC)

如果规范到达这个阶段,说明规范已经考虑完备并可以让浏览器商实现,W3C 和 CSSWG 对这个规范的讨论处理不再活跃,只做一些必要的维护。

注:推荐标准阶段其实不是一个理想的状态,而是一个规范的坟墓,浏览器并不会等到这个阶段才去实现它,而是在 CR 阶段就会实现这个规范。为什么说是坟墓呢,因为到达 REC 阶段后,规范会止步不前,而不是变得稳定。因为在 REC 阶段 CSSWG 并不会投入精力去修复新出现的错误,所以错误会不断积累,而新版本的规范已经在开发了,老的规范已经失去了继续发展的活力以及意义,留下的问题就只能通过 hack 去弥补,同时会有新的属性去代替它实现更好的功能。

那什么时候规范才是稳定的呢?文章中有引述了 Tab Atkins Jr(google团队成员,也是 CSSWG 以及 W3C 的成员)的一段话,内容大概是:规范的稳定性基本和它所在的流程阶段没有关系。当规范特性已经开始传播开来,并因为向后兼容性不能改变时,它才是稳定的,这个阶段可能会在 ED 规范阶段或者 CR 阶段,这才是稳定性评判的正确方法,而不是 W3C 的标准发布流程。说到这里,作者也提到了怎样根据 CSS 新属性的稳定性情况去使用它,避免跳坑,其实就是能够实现渐进增强与优雅降级。这里不得不提到一个有名的网站 http://caniuse.com 估计这个网站大多数人都会用到了,简直是 CSSER 的福音啊,通过这个网站,当键入某个属性时,可以在下面的resources标签很快速地找到它的官方文档以及很多最新的学习文章,同时了解到到一些现有的使用问题(issues)。举个例子,比如键入flex时,下面有这样的标签:

里面有来自css-trick、github等著名网站的文章,很多都是比较新,并且写得很好的文章。

这里还有个小常识,就是关于 CSS 3 的这个命名,Tab Atkins Jr 在文章 A Word About CSS4 代表 CSSWG 做了阐述,主要内容就是 CSS 3 代表了 CSS 2.1 后新增的 CSS属性,而且不会有 CSS4 这样的东西出现。下面是我看完后结合文章内容以及自己的一些理解,不想看原文的可以稍微了解一下。可能理解不是很到位,不过应该不会偏颇太多:CSSWG 想结束 CSS 2.1 这个版本时,发现 “versions”(版本)这个东西不好用,因为一旦使用版本来发布 CSS 时,CSS 变得很难维护,发展也会变慢。结合上面 CSS 的标准发布流程以及现在 CSS 的使用情况,不难想到确实是这样。因为 CSS 的整体性不强,CSS 属性都是为了实现某个效果单独被提出并反馈,和其他提出的属性并没有什么交集;有的属性一直在用不需要什么新的更新,而有的属性可能很快要被淘汰,所以以一整个版本去发布 CSS 很不科学。基于这样的想法,CSSWG 决定把 CSS 分成很多独立的小模块,每个模块只包含一个主要的特性(feature),可以自己单独升级开发,为什么要分成小的只包含少数特性的模块呢?这样就不会因为一个模块包含太多特性,然后因为某个特性特别棘手不好解决而阻碍整个模块其他特性的发展升级。因为这个想法是在结束 CSS 2.1 版本的时候决定的,那么现在 CSS 就要以模块来整理一下,也要相应定一些等级(level)。规则是这样的:

1、如果模块在 CSS 2.1 就有相关的内容,那么这些模块就从 level 3 开始。

2、如果是完全新的属性(比如 Flexbox),就直接从 level 1 开始。

3、一个模块的级别和它所在 CSS 的版本无关,即不管它是 CSS 2.1 的内容还是完全新的属性。因为模块的概念是新提出来的,所以只要是模块,就都属于 CSS 3(或者也可以说都是 CSS),不管它们处于什么模块等级。

4、可能会看到类似 css4-backgrounds 这样的写法,其实代表的是 CSS Background & Borders Level 4,即4表示的是模块的等级。

后来发现大漠前辈也写了相关文章,内容更全面,讲到了浏览器前缀的问题。我也参考了一下,大家可以点下面的参考链接去看看。

本文来源:JuFoFu

本文地址:http://www.cnblogs.com/JuFoFu/p/5140302.html

本文参考:

Tab Atkins Jr.  http://www.xanthir.com/b4Ko0#nav

CHRIS COYIER . https://css-tricks.com/css-standards-process/

大漠 . CSS秘密花园:Web 标准是友是敌?​

水平有限,错误欢迎指正。原创博文,转载请注明出处。

CSS 标准发布流程的更多相关文章

  1. jenkins配置记录(2)--代码发布流程

    在我们的日常运维工作中,使用jenkins来完成业务代码发版上线是至关重要的一环.前面已经提到在jenkins上添加用户权限的操作,今天重点说下如何在jenkins下构建项目工程进行代码发布? 在此简 ...

  2. App开发到App Store上架,发布流程。

     http://blog.csdn.net/wojsg001/article/details/12005887 App开发到App Store上架,发布流程. 分类: IOS2013-09-25 11 ...

  3. 前端Node项目发布流程

    最近在做前端的发布流程,发布流程的主要实现以下几个方面: 构建:包括JavaScript.css.html等的压缩,以及版本控制,利用md5生成版本号替换文件引用,实现长缓存策略. 发布:输出新版本的 ...

  4. svn迁移gitlab,构建前端打包发布流程

    前端资源迁移     目前公司的前端资源托管在svn服务器上,由于团队的逐渐扩大,svn的分支管控越来越不灵活,而且对于以后前端流程一体化的处理支持不是很好,因此决定在版本控制上转向git.git的好 ...

  5. ios 证书申请和发布流程

    证书是什么? 上面这个就是我们申请好证书后,下载到本地的.cer文件,也就是常说的开发证书与发布证书的样式.这.cer文件格式的证书是让开发者使用的设备(也就是你的Mac)有真机调试,发布APP的权限 ...

  6. iOS-appStore发布流程

    appStore上传苹果应用程序软件发布流程http://blog.sina.com.cn/s/blog_68661bd801019uzd.html

  7. [Mac]ios应用发布流程

    准备: 苹果开发者账号 发布: Xcode-product-clean-Archive,将应用上传到https://itunesconnect.apple.com,创建一个新的app版本,填写app相 ...

  8. PHP.4-DIV+CSS标准网页布局准备工作(下)

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  9. PHP.3-DIV+CSS标准网页布局准备工作(上)

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

随机推荐

  1. (原) Unreal创建自定义MeshCompoent

    @author:白袍小道 随缘查看 前言: 绘制相关类 MeshCompoent 模型组件 FVertexBuffer 顶点缓冲区封装 FIndexBuffer 顶点索引缓冲区封装 FRHIResou ...

  2. 架构师入门ing

    算法竞赛水平一般,算法工程师估计遥遥无期,准备开始架构方面的学习. 单纯依靠垂直提升硬件性能来提高系统性能的时代已结束,分布式开发的时代实际上早已悄悄地成为了时代的主流. 在一个团队里,架构师充当了技 ...

  3. Eureka 向Server中注册服务

    Eureka支持注册与发现服务,本章讲解如何像服务中心注册服务. 在父工程下创建EurekaClient工程(eureka-provider): pom.xml <?xml version=&q ...

  4. RMAN 增量备份级别说明

    通过Bat批处理调用RMan是我们定时备份数据库的好帮手,但是RMan的备份级别需要我们好好了解一下. RMAN备份全为全备和增量备份 增量备份:分为0 1 2级 ORACLE官方解释: A leve ...

  5. npm & npm config

    npm command show npm config https://docs.npmjs.com/cli/config https://docs.npmjs.com/cli/ls https:// ...

  6. 51NOD 1554 欧姆诺姆和项链 巧妙利用KMP

    请戳这里! #include<cstdio> #define N 1000100 char s[N]; int n,k,nxt[N],ans[N]; int main() { scanf( ...

  7. Eclipse 日文乱码怎么解决Shift_JIS

    https://jingyan.baidu.com/article/870c6fc325a691b03fe4beac.html Eclipse设置编码的地方主要有三处,这三处的设置都会影响中文的显示. ...

  8. 《c程序设计语言》读书笔记-4.13-递归版本reverse函数

    #include <stdio.h> #include <math.h> #include <stdlib.h> #include <string.h> ...

  9. MAP的get与containskey

    前提是:Map可以出现在k与v的映射中,v为null的情况, 所以containsKey出现更加必要. map.get(key)是得到的key所对应的value值. map.contains(key) ...

  10. angular组件--tips提示功能

    将组件封装起来在项目中开发很实用,之前遭遇过一次痛苦的经历,那阵子改的要吐血了.常用的组件封装起来,改公共的地方,往往多处受用. 例如:我在项目中引用  tips.text('加载中...',fals ...