隨著618購物狂歡節的落幕， 9012年也悄然走完了它一半的路程。而對於CSS而言，則迎來了20多年以來第一份屬於自己的狀態報告。作為前端開發人員，對於 JavaScript相關的狀態報告一定不陌生，但對於CSS的狀態報告大家都不是很了解。就好比報告的開篇所言：
在Web開發家族中，JavaScript更似一位憤怒、叛逆的少年，每年都會經歷一個新階段。而CSS卻一直以來更似一位勤奮好學，舉止得體的少年，他總是保持禮貌，從不草率的做出任何決定。
不過回顧CSS近幾年的發展， Flexbox，Grid，CSS-in-JS的到來，可以說CSS也終於開始了屬於它的動蕩青少年時期。
而這有史以來第一份關於CSS狀態的調查報告中我們可以看到CSS的哪些特性使用的最多，哪些工具使用更為廣泛等等。
這份報告囊括了很多內容，其中有三部分內容值得我們去關注：
- CSS哪些特性使用的最多
- CSS哪些技術可以幫助我們提效
- CSS單位和選擇器
通過報告，我們可以知道使用最多的CSS特性主要分為六大類：
- 布局
- 形狀和圖形
- 交互
- 排版
- 動畫和變換
- 其他特性
具體數據可以看下面這張動圖：
注意，深藍色表示使用過的數據，淺藍色表示知道但未使用過！
布局是CSS近年來最大的變化之一。最早出現的一維布局Flexbox，讓我們在Web的布局中可以更輕易的適配於眾多不同的終端，並且得到眾多主流瀏覽器的支持，它哼實現能實現80%，甚至是90%以上的布局需求。
然後出現的就是二維布局CSS Grid。CSS Grid可以說是布局的最多元和最有表現力的布局特性。CSS Grid可以讓我拋棄DOM結構（文檔流的限制），更靈活的實現更豐富和更為靈活的布局。而在不久的將來，CSS的subgrid會讓CSS Grid變得更強大，能幫助我們實現類似表格套表格這樣的布局需求（其實表格布局是非常強大的）。
在布局特性中除了Flexbox，CSS Grid之外，還有多列布局、書寫模式等。
還有一些文本圍繞圖形的排版方式，使用目前的CSS技術實現起來都比較困難，但在不久的未來，CSS Exclusions特性可以很好的解決文本圍繞圖片（當然也可以是其他元素）布局 效果。
而CSS Shapes特性中提供的圖形函數除了可以幫助我們繪製一些圖形之外，還提供了一些布局的實現方案。比如shape-outside、shape-margin和float的結合可以實現一些藝術性的布局效果，如：
另外就是CSS的邏輯屬性。CSS的邏輯屬性的出現，將會改變我們對CSS盒模型的原始理解和認知，它會改變CSS的重要概念，即盒模型。
CSS邏輯屬性的介入，我們應該開始停止物理屬性*-top、*-right、*-bottom和*-left來闡述盒模型，而應該改用邏輯屬性*-inline-start、*-inline-end、*-block-start和*-block-end來重新定義盒模型。
進入9102年後，隨著瀏覽器對CSS的mask、filter和混合模式的支持度越來越強，我們可以用幾行CSS代碼就來實現之前需要依賴於圖形編輯軟體來處理的圖形效果。
例如我們可以使用clip-path和CSS Shapes中的圖形函數來繪製不同形狀的圖形，可以使用混合模式、遮罩和濾鏡來處理圖像（圖形的效果），使用object-fit來處理圖像的適配：
CSS的Shapes中shape-outside和CSS Clipping中的clip-path都提供了一些繪製圖形的函數，比如：
- 正方形：inset()
- 圓形：circle()
- 橢圓形：ellipse()
- 多邊形：polygon()
- url()
CSS的濾鏡和混合模式則可以處理一些圖片效果。
混合模式
filter
說到圖片，這裡額外插個HTML5相關的特性，我們可以藉助下面的方案，讓圖片在Web中使用得到最佳的體驗：
- 使用<img>元素加載圖像，使用該元素最新屬性srcset和size給用戶加載正確的圖像
- 使用<picture>元素給用戶加載正確的圖像
比如<img />：
再來看<picture>：
在Web上時間有很多交互行為（效果）往往都是依賴於編寫大量的JavaScript代碼來實現，雖然交互行為（效果）可以模擬出來，但性能上卻會大大的打折扣。
值得慶幸的是，現在有很多交互行為可以使用純CSS的特性來完成：
上圖提到的overscroll-behavior、overflow-anchor和滑鼠滾動捕捉都是用來優化滾動體驗的。
除了這幾個屬性之外，還有scroll-behavior、pull-to-refresh等屬性也是隸屬於滾動特性中的屬性，都是用來優化用戶體驗的。
雖然Web中的排版是較為複雜而且麻煩的一部分，但CSS一直在致力於改進對排版特性的良好支持。
排版首先涉及到字體，字體的加載，其實是有一定策略的。
最新的font-varialbe屬性可實現一些特殊的文字效果
使用CSS的animation、transition和transform來實現一些Web動效，而且這方面的技術也是相當成熟。在Web中時常能看到這方面的案例和交互效果。
報告中提到的一些其他CSS特性，主要提了CSS的自定義屬性、calc()函數、CSS條件屬性@supports、will-change和display: contents等。
而且這些特性在實際項目中都已在使用，特別是CSS的自定義屬性、calc()、@supports和will-change等。
長期以來，在大家的認知中都覺得CSS非常簡單，沒啥技術含量，但事實也並非容易。個人對於CSS的看法是雖簡單，但不容易。
CSS也發展有20多年了，多年來，CSS開發也有自己的技術生態系統，比如CSS的處理器（Sass、LESS、Stylus和PostCSS等），也有一些方法論（比如BEM，OOCSS等），也有很多優秀的Framework（比如BootStrap）。
隨著React、Vue這樣的框架的誕生，開始有CSS-in-JS的技術（比如Style-component）：
CSS的單位和選擇器可以說是CSS中最基礎的部分，但也是非常重要的一部分。在報告中，向大家統計了CSS單位和選擇器的使用情況。
對於CSS選擇器相關的統計，這裡就不截圖了，涉及的較多，分的類也較細。但從統計中可以看出來常用的選擇器有：
-偽元素：::before和::after以
及::placeholder
-組合選擇器：後代選擇器（div span）、子選擇器（div > span）、兄弟選擇器（div + div）和相鄰兄弟選擇器（div ~ div）
-結構選擇器：:first-child、:last-
child、:nth-child()、:not()、:nth-of-type()、:nth-last-child()、:last-of-type、:nth-last-of-type、:only-child、:root和:empty
-屬性選擇器：:link、:visited、:target
-狀態選擇器：
hover、:focus、:active、:focus-within和:focus-visible
-表單驗證方面的選擇器
：:checked、:enabled、:required等
除此之外，還有像:focus-
within、:target、:empty可以優化一些用戶體驗。而且在CSS選擇器Levle4版本中還提供了很多優秀的選擇器供我們使用，只不過報告中只顯出來部分而以。
另外掌握CSS選擇器的使用還必須在使用的時候了解優化選擇器和控制選擇器的權重相關的知識。其中CSS選擇器權重對於很多CSSer來說是最易於搞錯的。用張經典的圖來向大家展示CSS選擇器權重的計算：