[css] 你知道CSS的标准发布流程吗?

[css] 你知道CSS的标准发布流程吗?

随着 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表示的是模块的等级。后来发现大漠前辈也写了相关文章,内容更全面,讲到了浏览器前缀的问题。我也参考了一下,大家可以点下面的参考链接去看看。

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413025.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache Curator之分布式锁原理(二)

本文主要讲解如下内容: 为什么要使用分布式锁?分布式锁特性!分布式锁的实现方式有哪些?Curator分布式锁原理Curator分布式锁实现类UML及相关类的介绍基于Redis,数据库实现分布式锁为什么要使用分布式锁? 在…

阿里云服务器发送邮件失败?连接超时?25端口被封?

大家好,我是烤鸭: 之前用阿里云服务器的时候发送126企业邮箱,用的smtp方式,但是一直超时。百思不得其解。因为在本地环境是可以的。 原来是阿里云服务器限制了25端口。问了126邮箱那边的技术客服,只支持25端口。 问了…

[css] 举例说明css有哪些简写的属性和属性值?

[css] 举例说明css有哪些简写的属性和属性值? border: solid 1px red;border-style: solid; border-width: 1px; border-color: red;animation: fadeIn .5s forward ease-in .2s infinite;animation-name: fadeIn; animation-duration: 0.5s; animation-fill-mode:…

JS重写Alert方法

var _alert window.alert; window.alert function(){ console.log(arguments); _alert(arguments); }

Pat乙级1011题:A+B和C

题目:给定区间[-2的31次方, 2的31次方]内的3个整数A、B和C,请判断AB是否大于C。我写的代码: del abc(self,a,b,c,i):if ab>c: print("Case #X: true"%i)else:print("Case #X: false"%i)return 0if __name__"__ma…

springboot版的微信公众号,订阅号

大家好,我是烤鸭: 这是一篇微信公众号入门的文章,如果是个人的话,只能申请未认证的订阅号。如果是公司的话,想申请啥都是可以的。 这篇文章说的就是个人订阅号。 环境: centos 7.3 springboot 1.5 需要&#xff…

[css] 请说说颜色中#F00的每一位分别表示什么?为什么会有三位和六位的表示呢?

[css] 请说说颜色中#F00的每一位分别表示什么?为什么会有三位和六位的表示呢? 颜色可以使用红-绿-蓝(red-green-blue (RGB))模式的两种方式被定义:十六进制符号 #RRGGBB 和 #RGB "#" 后跟6位十六进制字符&a…

[css] 请使用css写一个多级的下拉菜单

[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"…

Javascript报错Failed to execute ‘querySelectorAll‘ on ‘Document‘: ‘#123456‘ is not a valid sele

Javascript报错&#xff1a;Failed to execute ‘querySelectorAll’ on ‘Document’: ‘#123456’ is not a valid selector 解决方式(除开特殊符号,第一个字符必须是字母)&#xff1a; 第一种&#xff1a; 将ID前面加字母&#xff0c;例如&#xff1a;document.querySelect…

pycharm创建django项目linux部署

大家好&#xff0c;我是烤鸭&#xff1a; pytho部署web项目比java简单一点&#xff0c;虽然springboot内置了tomcat。 环境&#xff1a; pycharm专业版python3.6 1.安装python python下载&#xff1a;https://www.python.org/downloads/ 我使用的3.6版本 2.配置环境变量 path目…

【USACO15DEC】最大流Max Flow

题面 FJ给他的牛棚的N(2≤N≤50,000)个隔间之间安装了N-1根管道&#xff0c;隔间编号从1到N。所有隔间都被管道连通了。 FJ有K(1≤K≤100,000)条运输牛奶的路线&#xff0c;第i条路线从隔间si运输到隔间ti。一条运输路线会给它的两个端点处的隔间以及中间途径的所有隔间带来一个…

[css] 用css给一个元素加边框有哪些方法?

[css] 用css给一个元素加边框有哪些方法&#xff1f; :scope {border: 3px solid black;box-shadow: 0 0 0 1px black; /*不影响布局,无限叠加*/outline: 1px solid black; /*不支持圆角*/background-image: url("data:image/svgxml,%3Csvg xmlnshttp://www.w3.org/2000/…

java格式化html代码

/*** 格式化html代码* param model* param html* return*/RequestMapping("/formatHtml.dhtml")ResponseBodypublic M formatHtml(Model model,String html) {if(StringUtils.isNotBlank(html)) {try {Document doc Jsoup.parseBodyFragment(html);html doc.body()…

利用Android Studio快速搭建App

大家好&#xff0c;我是烤鸭: 给大家分享一个简单的用Android Studio快速搭建app 工具&#xff1a;Android Studio 64位 专业版 插件:Datepicker Timepicker okhttp 实现需求&#xff1a;界面上选择时间&#xff0c;发get/post请求到后台&#xff0c;获取选择的时间。1.修改And…

[css] 相邻兄弟选择器、后代选择器和子选择器三者有什么区别?

[css] 相邻兄弟选择器、后代选择器和子选择器三者有什么区别&#xff1f; 后代选择器与子选择的关系&#xff1a;后代选择器>子选择器。 后代选择器&#xff1a;包括父元素的子元素以及孙子元素&#xff08;代表符号&#xff1a;空格&#xff09;子选择器&#xff1a;包括父…

CompletableFuture的多线程和异步监听实现

大家好,我是烤鸭&#xff1a;今天给大家说的是多线程并发的异步监听的情况。这里不得不说一下CompletableFuture这个类&#xff0c;普通我们执行多线程的时候只需要另外启动一条线程。 说一下线程的3种方式&#xff1a;extends Thread&#xff0c;implements Runnable&#xff…

DCF:A Dataflow-Based Collaborative Filtering Trainging Algorithm

Abstratct:描述了当前协同过滤算法两大技术alternating least square(ALS,最小二乘法)和gradient descent(GD)的确定&#xff1a;原文&#xff1a;Existing collaborative filtering techniques are implemented with either alternating least square algorithm or gradient d…

[css] 举例说明你对相邻兄弟选择器的理解

[css] 举例说明你对相邻兄弟选择器的理解 divp{ //相邻兄弟选择器 background: red; } 符合两个条件就会被选中&#xff1a; 1.紧邻在另一个元素后面 2.两者父元素相同个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢…

HashMap jdk1.7和1.8概述

大家好&#xff0c;我是烤鸭&#xff1a;这是一篇关于HashMap的概述和底层原理的介绍。算是网上很多帖子的综合和我自己的一点想法。HashMap在jdk1.8以前是数组链表。在jdk1.8以后是数组链表红黑树。一点点分析数据结构。1. Map中的entry对象: static class Node<K,V> im…

springboot整合redis修改分区

转载的地址&#xff1a;https://blog.csdn.net/m0_37659871/article/details/81024068#commentBox springboot整合redis修改分区 问题由来 最近使用springboot整合redis&#xff0c;一个系统动态数据源连接不同数据库&#xff0c;缓存使用的redis&#xff0c;那么就需要将不同…