發布日期：2024 年 12 月 6 日
CSS 2024 狀態和 HTML 2024 狀態的結果現已上線。本文將初步探討這些問卷調查中，最有趣的一些發現。
對網路平台的樂觀看法
在我們探討使用者在 HTML 和 CSS 方面遇到的問題之前，先來看看他們對這個平台的看法。當我們詢問網站平台是否整體朝正確方向發展時，58% 的 HTML 調查對象同意這項說法，其中 18% 的人非常同意。
在 CSS 方面，:has() 成為最受歡迎的新 CSS 功能，有 36% 的使用者將其列為最佳新功能。@container 是第二受歡迎的選項，與 CSS 巢狀結構並列，佔 17%。
你使用的是哪個版本？
CSS 資料中有一些出乎意料的結果。舉例來說，超過 75% 的使用者都曾使用 CSS 濾鏡效果，因此這項功能成為最常使用的功能。考量多年以來針對層疊式功能提出的抱怨數量，有趣的是，只有 18.9% 的使用者使用層疊式功能。或許可以採用 Tailwind 等工具，避免使用者經常遇到連鎖問題。
<main> 和 <nav> 等重要元素，在 HTML 調查中是您使用的項目中排名最高。很高興看到這麼多人使用延遲載入和回應式圖片技術。
熱門瀏覽器支援問題
與開發人員交談時，我們經常會遇到互通性問題，或瀏覽器支援的功能。這項問卷會直接詢問你遇到的問題。以下是前 10 大問題功能，依選取該功能的使用者百分比排序。
- Popover API
- 錨定位置
- 容器查詢
:has()- CSS 巢狀檢視畫面
- Transition API
- 子格線
- 格線
<dialog>- 漸進式網頁應用程式
錨點定位在兩項問卷調查中獲得 11% 的評分，View Transition API 在 CSS 問卷調查中獲得 9%，在 HTML 問卷調查中獲得 8%，顯示開發人員認為這些功能相當有價值。
有趣的是，其中幾項功能可互通。容器查詢、:has()、CSS 巢狀結構和子格線已可使用於 Baseline，Popover API 也已可使用，但 iOS 上的輕量式關閉功能有問題。<dialog> 元素現已普遍可用，CSS 格線版面配置也是如此。建議您深入瞭解這些結果，找出使用者遇到的問題。舉例來說，使用者對格線的回應通常是指格線難以學習，而非實際的互通性問題。
我們希望基準資料可協助開發人員瞭解各項功能的狀態，並瞭解他們遇到的問題是否是因為瀏覽器不相容，或是其他原因。很高興看到這些問卷強調了功能的基準狀態。您也可以前往 webstatus.dev 查看各瀏覽器的 CSS 主要問題可用性狀態。
缺少功能
問卷調查也會詢問平台缺少哪些功能。這有助於我們瞭解哪些事仍難以完成。這個問題的回覆率較低，但在 CSS 現況調查中，使用者最常詢問的內容是混合、條件邏輯和磚牆式版面配置。有趣的是，使用者也要求提供父項選取器 (:has() 提供該功能) 和巢狀結構，而這兩項功能都已存在，且可透過 Baseline 新功能取得。
我們向「HTML 狀態」的受訪者提出問題：「如果您可以為 HTML 新增 3 個元素，您會新增哪些元素？」51% 的使用者要求提供資料表，其他熱門選項包括分頁和切換元素。
你想進一步瞭解哪方面的資訊？
完成問卷調查後，如果想進一步瞭解其中的項目，可以使用問卷調查的功能將項目加入閱讀清單。這類資料非常有用，尤其是如果您從事開發人員內容創作業務時。以下是兩項問卷調查中排名前十名的功能，依據是將這些功能加入清單的受訪者百分比。
- CSS
hanging-punctuation - CSS
offset-path @scope- 錨定位置
- 可自訂的選取方塊
view-timelinescroll-timelinefocusgroup項屬性- 離散屬性動畫
image()
請參閱 CSS 閱讀清單和 HTML 閱讀清單，查看完整結果。
來自網路社群的一項信號
Chrome 會支援這類問卷調查，因為這是我們瞭解你在網頁平台上最常遇到的問題，以及你最感興趣的內容的一種方式。這並非我們唯一參考的信號，但您可以直接透過這些管道向我們表達意見。如果您填寫了其中一個或兩份問卷，在此感謝您的協助！您正在協助我們以您想要的方式改善網路。如果你想提供協助，現在仍有時間參與 JS 現況。