CSS 和 HTML 問卷調查結果顯示了什麼?

發布日期: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-timeline
  • scroll-timeline
  • focusgroup 項屬性
  • 離散屬性動畫
  • image()

請參閱 CSS 閱讀清單HTML 閱讀清單,查看完整結果。

來自網路社群的一項信號

Chrome 會支援這類問卷調查,因為這是我們瞭解你在網頁平台上最常遇到的問題,以及你最感興趣的內容的一種方式。這並非我們唯一參考的信號,但您可以直接透過這些管道向我們表達意見。如果您填寫了其中一個或兩份問卷,在此感謝您的協助!您正在協助我們以您想要的方式改善網路。如果你想提供協助,現在仍有時間參與 JS 現況