Chrome 團隊今年在 CSS Day 大會上大放異彩。我們運作 CSS 服務專員團隊,回答與會者的問題,同時也使用白板詢問大家認為 CSS 仍缺少哪些功能。在本文中,我將分享提出這項問題的結果,並請您填寫這份簡短的問卷調查,告訴我們您認為 HTML 和 CSS 缺少哪些內容。你是否同意 CSS Day 的與會者?

十大要求
我們請與會者將想法寫在便利貼上,並貼在白板上。使用者也可以透過貼圖來表達對想法的支持。前十大功能如下:
支援設定輸入內容樣式
這項功能獲得 21 次投票,是我們收到的熱門請願。您真的需要以一致的方式為這些常見的 UI 元素設定樣式。
我們很清楚 Chrome 在這個領域的表現,這是開發人員最常遇到的問題,我們正在努力為開發人員提供更完善的解決方案。舉例來說,可自訂的選取元素旨在提供一種方法,讓您選擇採用新的樣式行為。接著,您可以為選項新增圖片,甚至是更精緻的樣式。這種做法的優點是,它會改用一般選取選單,讓這項功能成為漸進式增強功能。
視覺上隱藏
在 CSS 日活動中,這項功能獲得 19 票,是第二受歡迎的功能。這項要求是為了提供一種新增僅供螢幕閱讀器使用的內容的方式。這可能是 HTML 元素,其中的內容不會顯示,只會由螢幕閱讀器朗讀。
一般來說,要達到這個目標,通常是建立 .visually-hidden
類別來隱藏內容,但仍可讓螢幕閱讀器存取內容。
雖然這是廣受歡迎的要求,但有些人不認為應該實施這項功能。詳情請參閱「視覺上隱藏的內容是需要解決的駭客攻擊手法,而不是保留」和 CSS WG 問題 560 的討論。
position: sticky 在 overflow:hidden 內
這項要求獲得 16 票。目前,position: sticky
僅在所有父項都是 overflow: visible
時才會運作。
有個開放的問題在 2017 年提出這項要求,雖然啟用 overflow: hidden
來清除浮點值的初始用途在今天可能已不太需要,但該討論串流中還有許多其他情況。
動畫至 height: auto
在 12 次投票中,許多與會者希望能以 height: auto
做為動畫。很高興在此宣布,這項功能即將在網頁平台上推出,並支援CSS interpolate-size
屬性和 calc-size()
函式。這些功能將在 Chrome 129 版推出。敬請留意日後的文章,我們會提供更多相關資訊。
其他輸入類型
HTML5 為您提供許多不同的<input>
元素類型,例如電子郵件地址的 type="email"
,或範圍滑桿的 type="range"
。在 CSS 日活動中,我們收到 10 票,要求提供更多這類型別,例如雙重範圍或使用自訂資料清單的自動完成功能。
CSS 中的實際隨機數字
另一項獲得 10 票的提案,是要求在 CSS 中使用真實的隨機數字。這項功能過去曾針對隨機 animation-duration 要求並實作。
Mixin 樣式類別
CSS 新增了先前在 CSS 前置處理器中出現的多項功能,包括具有自訂屬性的變數,以及現在的 CSS 巢狀結構。不過,可重複使用的混合物尚未成為語言的一部分,但 CSS Day 的七位與會者都很期待這項功能。
CSS 工作小組決議已開始著手處理這項功能的規格,您可以將自己的想法和用途加入該問題的討論。
影子 DOM 中的全域樣式
另一個有大量討論串的用途是要求允許全域 CSS 樣式套用在陰影 DOM 中,CSS 日有六位使用者提出這項要求。這項功能可讓全域重設樣式套用至網頁元件,並讓單一 CSS 檔案在網站的所有元件中運作。請參閱這份用途摘要,並告訴我們是否也想使用這項功能。
除以混合單位
Interop 2024 的提案要求能夠以混合單位 (例如 calc(100vw / 1px)
) 進行除法。這項功能對 Interop 2024 來說太廣泛,但許多開發人員 (包括 CSS Day 的六位開發人員) 都希望看到這項功能實現。
nth-letter
CSS 有許多偽元素,可讓您在某些內容區段中包裝 span。舉例來說,::first-letter
擬似元素會將目標設為所套用的區塊容器第一行的第一個字母。
::nth-letter
並未列入該清單,而您已大約二十年要求提供 ::nth-letter
,因此我們知道這是網頁程式開發人員長期以來的要求。在 CSS 日活動中,有六位使用者投了這個功能的票,因此它成為十大熱門功能的最後一個。
你是否同意 CSS Day 的前十名?
我們很樂意聽取更多觀眾對這些問題的看法,這些問題是否有任何一項是你的十大問題之一?如果沒有,那麼你是否希望在 CSS 和 HTML 中看到其他內容?請填寫這份簡短表單,我們會在另一篇文章中總結回覆內容。