1994年，哈坤·利首次提出了CSS，到目前為止已經過去了近30年，二十多年里，CSS發生了翻天覆地的變化，2021年期間CSS的狀況如何呢？以下是報告內容，
采樣人員分布
地區
本次報告受訪人員主要來自美國、俄羅斯、加拿大、西班牙、荷蘭、波蘭和澳大利亞等國家，調查人員分布在世界各地，
年齡
調查樣本的年齡分布主要集中在24-34歲，
作業經驗
本次調查的受訪者絕大多數是有5-20年作業經驗的人員，
特性使用情況概覽
下圖根據分類劃分，顯示了各種特性的采用率，外圈的尺寸代表了了解這個特性的用戶數量, 而內圈的尺寸代表了實際使用這個特性的用戶數量，
布局
受訪者更喜歡使用什么布局方式進行元素布局呢？講到布局，大多數人就會想到Flex布局，從下表可以看出來，確實幾乎所有受訪者都使用了Flexbox，CSS Flexbox布局模塊可以更輕松地設計靈活的回應式布局結構，而無需使用浮動或定位，此外，所有現代瀏覽器均支持Flexbox屬性，
在今年的調查中，Grid上升的趨勢依然很快， Flex布局是一維布局，Grid布局是二維布局，Flex布局一次只能處理一個維度上的元素布局，一行或者一列，Grid布局是將容器劃分成了“行”和“列”，產生了一個個的網格，有不少人認為，Grid比Flex更強大，
圖形與影像
從下面的圖表可以看出，Shape似乎一直不溫不火，相比2020年的調查，Shape的使用程度有所下降，object-fit看起來受到了受訪者的歡迎，object-fit CSS屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框，輕松地解決了圖片的適配問題，
互動
使用者通常都如何進行頁面互動呢？調查顯示，pointer-events 最常用，pointer-events CSS屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為滑鼠事件的target，CSS滾動捕捉可以用來創建一個可滾動的容器，防止滾動時出現尷尬的滾動位置，創建更好的滾動體驗，今年最新加入調查的scroll-timeline看起來還沒什么人熟知，
排版
font-display一般與字體加載有關，如果用戶不知道選擇那個作為font-display的屬性值，可以選擇swap，
line-clamp屬性可以限制在一個塊元素顯示的文本的行數，為了實作該效果，它需要組合其他外來的WebKit屬性，添加-WebKit-前綴，
CSS技術調查
預/后處理
調查結果顯示，用戶對PostCSS滿意度最高，其次是Sass、Stylus、Less和Assembler CSS，但是在使用度和認知度上，Sass要高于PostCSS，
用戶對前/后處理器的狀態有多滿意?調查顯示，超過55%以上的用戶還是比較滿意的，
CSS框架
調查顯示，2021年Tailwind CSS的滿意度和關注度最高，而使用度和認知度最高的是Bootstrap，
總的來說，約40%的受訪者對CSS框架持滿意態度，
CSS-in-JS
簡單來說CSS-in-JS就是將應用的CSS樣式寫在JavaScript檔案里面，本次調查針對實作JavaScript撰寫CSS代碼的庫，
Emotion曾在2019年滿意度第一，但是近年一直呈下降趨勢，本次調查顯示，2021年，vanilla-extract滿意度最高，CSS Modules的關注度最高，使用度和認知度最高的是Styled Components，
總體來說，受訪者對CSS-in-JS庫的態度不是很明朗，有40.5%的受訪者給出了中立評價，這樣看來，CSS-in-JS依舊沒有成為CSS的主流技術，
CSS工具庫調查
工具函式庫
常用的工具函式庫有Prettier 、Autoprefixer 、Stylelint 、PurgeCSS、 cssnano和PurifyCSS，
其他工具函式庫
CSS使用環境調查
調查顯示，受訪者最常在Chrome瀏覽器中進行測驗，CSS 已經越來越趨于多終端設備化，電腦桌面、智能手機和平板是主力軍，
學習CSS的渠道調查
據調查，絕大多數人是通過自主學習的方式來學習CSS，也有一部分人是通過免費的在線課程來學習，而通過付費課程進行學習的人數較少，
以下是本次受訪者最常用的blog和雜志，以及他們關注的一些網站，可以給其他CSS學習者做一些參考，
總結
Web開發人員和Polypane的創建者Kilian Valkhof對這次的調查進行了總結，他表示，CSS已經作出了一些備受歡迎的改進，對于這個充滿變化的時期他非常激動，他寫道：“2022年，你撰寫CSS的方式很可能要從根本上改變了，這是一個難以置信又激動人心的時期，我們期待著來年所有令人驚嘆的變化，”
值得注意的是，由于時間不夠，2021年JavaScript情況調查推遲到2022年1月，
筆者有作刪減，原報告鏈接：
- https://2021.stateofcss.com/zh-Hans/features
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/385633.html
標籤：其他
上一篇：分享 5 個你現在就能用上的 Js ES12 新特性（數字分隔符、replaceAll()、Promise.any()、......）