[css] 你知道CSS的標(biāo)準(zhǔn)發(fā)布流程嗎？

隨著 CSS 3 的廣泛應(yīng)用，很多新的 CSS 屬性層出不窮，有很多陌生的 CSS 屬性出現(xiàn)，所以經(jīng)常需要去學(xué)習(xí)新的 CSS 屬性。新的屬性往往介紹文章不多，所以有時(shí)候就需要去看看官方文檔，此時(shí)會(huì)發(fā)現(xiàn)官方文檔有好幾個(gè)版本，看下圖：當(dāng)初學(xué) flex-box 的時(shí)候就發(fā)現(xiàn)有好多種寫法，還好官方文檔開頭有標(biāo)明那些文檔時(shí)最新的。不過(guò)此時(shí)我萌生了去了解 CSS 標(biāo)準(zhǔn)流程的想法，我想作為一個(gè)合格的 CSSER 也應(yīng)該去了解吧。這里講到的知識(shí)基本來(lái)自 CSS-tricks 上 CHRIS COYIER 的一篇文章：https://css-tricks.com/css-standards-process/ 。CSS 的標(biāo)準(zhǔn)化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C層疊樣式列表小組，由瀏覽器商，大學(xué)，大公司（google，IBM等），以及獨(dú)立CSS專家組成。W3C 本身并不制定標(biāo)準(zhǔn)，而是作為一個(gè)論壇式的平臺(tái)，接收來(lái)自小組成員的提交，并通過(guò)會(huì)議來(lái)商討制定標(biāo)準(zhǔn)，所有的提交以及討論都是公開透明的，可以在 W3C 網(wǎng)站上看到會(huì)議的記錄，標(biāo)準(zhǔn)確定一般有6個(gè)階段，其中兩個(gè)是過(guò)渡階段：1. 編輯草案 Editor's Draft (ED)這個(gè)是規(guī)范的開始階段，一個(gè)CSS屬性或者選擇器被提出來(lái)，并在CSSWG內(nèi)部研究。如果小組成員同意這個(gè)屬性可以正式推出，它就能進(jìn)入下一階段。2、工作草案 Working Draft (WD)編輯草案后是工作草案，標(biāo)準(zhǔn)的設(shè)計(jì)階段。小組反復(fù)處理來(lái)自 CSSWG 內(nèi)部和來(lái)自小組外部的反饋，這個(gè)階段有兩個(gè)結(jié)果：一是可能會(huì)因?yàn)榧夹g(shù)困難或者可能會(huì)引起其他問(wèn)題而使新屬性被完全拒絕；二是規(guī)范會(huì)通過(guò)這個(gè)階段，并會(huì)作為第一次公開工作草案（ First Public Working Draft (FPWD)）發(fā)布，后面還會(huì)有數(shù)個(gè)工作草案，會(huì)處理來(lái)自 CSSWG 內(nèi)部和小組外部更廣泛社會(huì)的反饋。3、過(guò)渡－最后通告工作草案 Transition – Last Call Working Draft (LCWD)這是第一個(gè)過(guò)渡階段，當(dāng)規(guī)范開始考慮從工作草案進(jìn)入到下一個(gè)階段時(shí)，將會(huì)對(duì)新屬性的一些小改動(dòng)的反饋設(shè)置一個(gè)截止日期，LCWD 即是日期截至后最后的一次公開草案處理。注：最重要的階段是 ED, WD, and CR（下面會(huì)講到的），其他階段不是很重要。4. 候選推薦標(biāo)準(zhǔn) Candidate Recommendation (CR)規(guī)范會(huì)在這個(gè)階段通過(guò)完整的測(cè)試，測(cè)試人員來(lái)自 CSSWG 以及被選為實(shí)現(xiàn)這個(gè)規(guī)范的瀏覽器生產(chǎn)商(Chrome, Safari, Firefox, Opera, 等等)。為了繼續(xù)進(jìn)入下一階段，CSSWG 會(huì)推出兩個(gè)正確的實(shí)現(xiàn)規(guī)范。5. 過(guò)渡－建議推薦標(biāo)準(zhǔn) Transition – Proposed Recommendations (PR)當(dāng)?shù)竭_(dá)這個(gè)階段，W3C全球資源小組：W3C咨詢委員會(huì)（W3C Advisory Committee），決定這個(gè)規(guī)范是否會(huì)繼續(xù)進(jìn)入下一個(gè)階段。這個(gè)階段一般很少有異議出現(xiàn)，所以也是一個(gè)過(guò)渡階段而已。6.推薦標(biāo)準(zhǔn) Recommendation (REC)如果規(guī)范到達(dá)這個(gè)階段，說(shuō)明規(guī)范已經(jīng)考慮完備并可以讓瀏覽器商實(shí)現(xiàn)，W3C 和 CSSWG 對(duì)這個(gè)規(guī)范的討論處理不再活躍，只做一些必要的維護(hù)。注：推薦標(biāo)準(zhǔn)階段其實(shí)不是一個(gè)理想的狀態(tài)，而是一個(gè)規(guī)范的墳?zāi)?#xff0c;瀏覽器并不會(huì)等到這個(gè)階段才去實(shí)現(xiàn)它，而是在 CR 階段就會(huì)實(shí)現(xiàn)這個(gè)規(guī)范。為什么說(shuō)是墳?zāi)鼓?#xff0c;因?yàn)榈竭_(dá) REC 階段后，規(guī)范會(huì)止步不前，而不是變得穩(wěn)定。因?yàn)樵?REC 階段 CSSWG 并不會(huì)投入精力去修復(fù)新出現(xiàn)的錯(cuò)誤，所以錯(cuò)誤會(huì)不斷積累，而新版本的規(guī)范已經(jīng)在開發(fā)了，老的規(guī)范已經(jīng)失去了繼續(xù)發(fā)展的活力以及意義，留下的問(wèn)題就只能通過(guò) hack 去彌補(bǔ)，同時(shí)會(huì)有新的屬性去代替它實(shí)現(xiàn)更好的功能。那什么時(shí)候規(guī)范才是穩(wěn)定的呢？文章中有引述了 Tab Atkins Jr （google團(tuán)隊(duì)成員，也是 CSSWG 以及 W3C 的成員）的一段話，內(nèi)容大概是：規(guī)范的穩(wěn)定性基本和它所在的流程階段沒(méi)有關(guān)系。當(dāng)規(guī)范特性已經(jīng)開始傳播開來(lái)，并因?yàn)橄蚝蠹嫒菪圆荒芨淖儠r(shí)，它才是穩(wěn)定的，這個(gè)階段可能會(huì)在 ED 規(guī)范階段或者 CR 階段，這才是穩(wěn)定性評(píng)判的正確方法，而不是 W3C 的標(biāo)準(zhǔn)發(fā)布流程。說(shuō)到這里，作者也提到了怎樣根據(jù) CSS 新屬性的穩(wěn)定性情況去使用它，避免跳坑，其實(shí)就是能夠?qū)崿F(xiàn)漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)。這里不得不提到一個(gè)有名的網(wǎng)站 http://caniuse.com 估計(jì)這個(gè)網(wǎng)站大多數(shù)人都會(huì)用到了，簡(jiǎn)直是 CSSER 的福音啊，通過(guò)這個(gè)網(wǎng)站，當(dāng)鍵入某個(gè)屬性時(shí)，可以在下面的resources標(biāo)簽很快速地找到它的官方文檔以及很多最新的學(xué)習(xí)文章，同時(shí)了解到到一些現(xiàn)有的使用問(wèn)題（issues）。舉個(gè)例子，比如鍵入flex時(shí)，下面有這樣的標(biāo)簽：里面有來(lái)自css－trick、github等著名網(wǎng)站的文章，很多都是比較新，并且寫得很好的文章。 這里還有個(gè)小常識(shí)，就是關(guān)于 CSS 3 的這個(gè)命名，Tab Atkins Jr 在文章 A Word About CSS4 代表 CSSWG 做了闡述，主要內(nèi)容就是 CSS 3 代表了 CSS 2.1 后新增的 CSS屬性，而且不會(huì)有 CSS4 這樣的東西出現(xiàn)。下面是我看完后結(jié)合文章內(nèi)容以及自己的一些理解，不想看原文的可以稍微了解一下。可能理解不是很到位，不過(guò)應(yīng)該不會(huì)偏頗太多：CSSWG 想結(jié)束 CSS 2.1 這個(gè)版本時(shí)，發(fā)現(xiàn) “versions”（版本）這個(gè)東西不好用，因?yàn)橐坏┦褂冒姹緛?lái)發(fā)布 CSS 時(shí)，CSS 變得很難維護(hù)，發(fā)展也會(huì)變慢。結(jié)合上面 CSS 的標(biāo)準(zhǔn)發(fā)布流程以及現(xiàn)在 CSS 的使用情況，不難想到確實(shí)是這樣。因?yàn)?CSS 的整體性不強(qiáng)，CSS 屬性都是為了實(shí)現(xiàn)某個(gè)效果單獨(dú)被提出并反饋，和其他提出的屬性并沒(méi)有什么交集；有的屬性一直在用不需要什么新的更新，而有的屬性可能很快要被淘汰，所以以一整個(gè)版本去發(fā)布 CSS 很不科學(xué)。基于這樣的想法，CSSWG 決定把 CSS 分成很多獨(dú)立的小模塊，每個(gè)模塊只包含一個(gè)主要的特性（feature），可以自己?jiǎn)为?dú)升級(jí)開發(fā)，為什么要分成小的只包含少數(shù)特性的模塊呢？這樣就不會(huì)因?yàn)橐粋€(gè)模塊包含太多特性，然后因?yàn)槟硞€(gè)特性特別棘手不好解決而阻礙整個(gè)模塊其他特性的發(fā)展升級(jí)。因?yàn)檫@個(gè)想法是在結(jié)束 CSS 2.1 版本的時(shí)候決定的，那么現(xiàn)在 CSS 就要以模塊來(lái)整理一下，也要相應(yīng)定一些等級(jí)（level）。規(guī)則是這樣的： 1、如果模塊在 CSS 2.1 就有相關(guān)的內(nèi)容，那么這些模塊就從 level 3 開始。2、如果是完全新的屬性（比如 Flexbox），就直接從 level 1 開始。3、一個(gè)模塊的級(jí)別和它所在 CSS 的版本無(wú)關(guān)，即不管它是 CSS 2.1 的內(nèi)容還是完全新的屬性。因?yàn)槟K的概念是新提出來(lái)的，所以只要是模塊，就都屬于 CSS 3（或者也可以說(shuō)都是 CSS），不管它們處于什么模塊等級(jí)。4、可能會(huì)看到類似 css4-backgrounds 這樣的寫法，其實(shí)代表的是 CSS Background & Borders Level 4，即4表示的是模塊的等級(jí)。后來(lái)發(fā)現(xiàn)大漠前輩也寫了相關(guān)文章，內(nèi)容更全面，講到了瀏覽器前綴的問(wèn)題。我也參考了一下，大家可以點(diǎn)下面的參考鏈接去看看。

個(gè)人簡(jiǎn)介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[css] 你知道CSS的标准发布流程吗？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。