編碼的世界 / 優質文選 / 生涯
2021年度全球CSS報告新鮮出爐，JavaScript調查推遲到明年
2022年7月17日
-
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工具庫調查
工具函數庫
其他工具函數庫
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
熱門文章
