CSS的一些新東西

CSS的一些新東西

很多同學估計都有類似的問題,怎麼才能第一時間獲取到有關於CSS相關的新特性呢?有關於這個問題,並不是一個很複雜的問題

如何理解規範的形成

任何一個規範的形成都是一個漫長的過程,到目前爲止,W3C對Web標準制定的Web標準和草案接近1161個,包括WD、 CR、 PR、 PERREC、 ret和 Note 這 7 種:

  • WD(Working Draft 工作草案):不穩定也不完整。目的是創建當前規範的一個快照,也能徵求 W3C 和公衆的意見
  • CR (Candidate Recommendation 候選推薦標準):所有的已知 issues 都被解決了,向 implementor 徵集實現;AC 正式審查,可能有三種結果:成爲標準、返回工作組繼續完善、廢棄(此階段的很有可能成爲標準,且如有改動,則需給出改動原因)
  • PR (Proposed Recommendation 提案推薦標準):從CRPR需要全面的 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屬性誕生的歷程:

image

版本之爭

隨着前端社區開始有介紹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 1Level 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的一些行爲依賴於佈局方法。該規範定義了三種對齊方式:

  • 位置對齊startendcenterself-startself-endflex-startflex-endleftrgiht
  • 基線對齊: baselinefirst baselinelast baseline
  • 分佈式對齊stretchspace-betweenspace-aroundspace-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的一些基礎特性要有徹底的瞭解,不然只能理解其表面上的特性。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章