CSS的一些新東西
很多同學估計都有類似的問題，怎麽才能第一時間獲取到有關於CSS相關的新特性呢？有關於這個問題，並不是一個很復雜的問題
如何理解規範的形成
任何一個規範的形成都是一個漫長的過程，到目前為止，W3C對Web標準制定的Web標準和草案接近1161個，包括WD、?CR、?PR、?PER、REC、?ret和?Note?這?7?種：
WD（Working Draft 工作草案）：不穩定也不完整。目的是創建當前規範的一個快照，也能征求 W3C 和公眾的意見CR?（Candidate Recommendation 候選推薦標準）：所有的已知 issues 都被解決了，向 implementor 征集實現；AC 正式審查，可能有三種結果：成為標準、返回工作組繼續完善、廢棄(此階段的很有可能成為標準，且如有改動，則需給出改動原因)PR?（Proposed Recommendation 提案推薦標準）：從CR到PR需要全面的 test suite 和實現報告，以證明每個特性都在至少2款瀏覽器裏實現了，意味著其質量足以成為REC。此時，W3C 成員再最後一次 review 下規範(一般不會有實質性的改動；若有，則只能再發布一個新的WD或CR)PER?（Proposed Edited Recommendation 已修訂的提案推薦標準）REC?（Recommendation 推薦標準，通常稱之為 standard，即事實標準）：此時，就不會有太多變動了，當然依然可以收勘誤。它可能成為:Edited Recommendation 編輯推薦標準。微小改動，然後生成推薦的 Revised Edition；Amended Recommendation 修訂推薦標準。不增加新功能的實質性更改；SPSD Superseded Recommendation 被取代的推薦標準（缺少足夠的市場相關性）ret?（Retired 退役的)Note?（Group Note 工作組說明）：不打算成為標準的文檔。已經停止使用了。通常記錄規範以外的信息，eg.規範的用例及其最佳實踐、解釋規範被棄用的原因
這裏推薦一下我的前端學習交流群：731771211，裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴。不定時更新技術，與企業需求同步。好友都在裏面交流，每天都會有大牛定時講解前端技術!
點擊：加入
對於CSS的每項規範大致都會經歷以下幾個過程：
- 編輯草案(ED)：這是一項規範的初始階段，可能非常粗糙。對這個階段沒有什麽要求，也不保證它會被工作組批準。但它也是各個修訂版本的必經階段，每次變更都是先從一個 ED 中產 生的，然後才會發布出來
- 首個公開工作草案(FPWD)：一項規範的首個公開發布版本，它應該準備就緒，以接受工作組的公開反饋
- 工作草案(WD)：在第一個 WD 之後，還會有更多的 WD 出來。 這些 WD 會吸收來自工作組和更廣闊的社區的反饋，一版接著一版小幅改進。瀏覽器的早期實現通常是從這個階段開始的，廠商基本不太可能對更早階段的草案提供實驗性的支持
- 候選推薦規範(CR)：這可以認為是一個相對穩定的版本。此時比較適合實現和測試。一項規範只有具備一套完整的測試套件和兩個獨立的實現之後，才有可能繼續推進到下一階段
- 提名推薦規範(PR)：這是 W3C 會員公司對這項規範表達反對意見的最後機會。實際上他們很少在這個階段提出異議，因此每個 PR 推進到下一階段(也是最後一個階段)只是時間問題
- 正式推薦規範(REC)：一項 W3C 技術規範的最終階段
用W3C上的一張圖來簡要的向大家展示一下一個CSS屬性誕生的歷程：
版本之爭
隨著前端社區開始有介紹CSS Selectors Level 4相關的文章開始，很多人把這個稱之為CSS4選擇器，也在說CSS3還未成為規範，CSS4就要來了，真心學不動了。為此@Rachel Andrew特別花了一點時間闡述了：
CSS發展至今，將不會有CSS版本之稱，只會有模塊的Level一說
有關於這個話題，早在2016年@Rachel Andrew特意寫了一篇文章《Why there is no CSS4 - explaining CSS Levels》做出相關的解釋。
想想，這就是我與大神之間的差距！
由於CSS 的各個模塊在近些年裏以不同的速度在推進，我們已經越來越難以把這些規範以CSS3、CSS4這樣的方式來劃分了，而且這樣也難以被大眾理解和接受。
所以，大家以後不要再把CSS按CSS3或者CSS4來稱謂了，我們應該改變以前的習慣，按功能模塊發布的版本號來稱呼他們。這樣才不會給別人造成誤解或困惑！
CSS 的一些新東西
- CSS Grid Layout & Subgrid
- CSS Box Alignment
- Gap
- Intrinsic Sizing Keywords
- Scroll Snap
- Scrollbars
- Shapes
- Conic Gradients
- Aspect Ratio Units
- Exclusions
- CSS Houdini
- Meet Feature Queries
接下來簡單的聊一下，如果要深入的聊，估計都足夠寫本書來聊了。
CSS Grid Layout & Subgrid
CSS Grid Layout到目前為止已經有Level 1和Level 2兩個版本。而Subgrid是屬於CSS Grid Layout Level 2中的一部分。CSS Grid Layout中的很多特性都得到了很多主流瀏覽器的支持，而且@Rachel Andrew預計在2019年將會成為主流布局方式之一。話又說回來，CSS Grid Layout能這麽成熟和得到瀏覽器的支持，離不開@Rachel Andrew的功勞，因為她一直在推進該特性的向前發展。
CSS Grid Layout對於開發者而言是一件好事，他將改變Web布局的模式，因為在CSS Grid Layout之前的布局模式都是一維布局，只有Grid是二維布局。Grid很強大，但其涉及到相關概念也特別的多，如果要徹底的了解或掌握她，還是需要花不少的時間去學習。當然最好是能多寫一些案例。有關於這方面的介紹，這裏就不做過多的詳細介紹，感興趣的話可以閱讀站上有關於CSS Grid Layout相關的文章。
CSS Box Alignment
CSS Box Alignment目前是Level 3，主要用於控制各種布局方法中項目是如何對齊的。由於不同布局方法在對齊方面有不同的約束，因此Box Alignment的一些行為依賴於布局方法。該規範定義了三種對齊方式：
- 位置對齊：
start、end、center、self-start、self-end、flex-start、flex-end、left和rgiht - 基線對齊：?
baseline、first baseline和last baseline - 分布式對齊：
stretch、space-between、space-around和space-evenly
而我們接觸最多的應該是Flexbox布局中控制Flex項目對齊方式用到的屬性，比如：
.flex {
display: flex;
align-items: center;
justify-content: center;
}
而在Grid布局中也可以用這樣的方式來實現對齊：
.grid {
display: grid;
align-items: start;
justify-content: space-between;
}
也就是說，以後不管是在Flexbox布局還是Grid布局中，控制元素對齊的方式都將會通過該規範中的一些特性來完成。而該規範中提到的特性不僅僅是上面提到的那部分。更詳細的可以閱讀相關規範。
要徹底理解CSS Box Alignment規範中提到的特性，還需要對CSS的一些基礎特性要有徹底的了解，不然只能理解其表面上的特性。
CSS的一些新東西