HTML 和 CSS 缺少哪些內容?

今年,Chrome 團隊在 CSS Day 大會上大放異彩。我們在活動中設立 CSS 服務台,回答與會者的問題,並在白板上詢問大家認為 CSS 仍缺少哪些功能。在這篇文章中,我將分享詢問這個問題的結果,並請您填寫這份簡短問卷調查,告訴我們您認為 HTML 和 CSS 缺少哪些功能。你是否同意 CSS Day 參加者的看法?

白板上貼滿便利貼。
CSS Day 的點子牆。

前十名要求

請與會者在便利貼上寫下想法,然後貼到白板上。 使用者也可以新增貼圖,為想法投票。前十大功能如下。

支援輸入內容的樣式設定

這項功能獲得 21 票,是我們最常收到的要求。您確實希望以一致的方式設定這些常見 UI 元素的樣式。

Chrome 團隊深知這是開發人員最頭痛的問題,目前正在努力為開發人員打造更完善的解決方案。舉例來說,可自訂的選取元素旨在提供選擇採用新樣式行為的方法。然後新增圖片,或為選項設定更精細的樣式。這種做法的優點是會回復為一般選單,因此可做為漸進式強化功能。

視覺上隱藏

在 CSS Day 獲得 19 票,是第二熱門的要求。要求是新增僅供螢幕閱讀器使用的內容。這可能是 HTML 元素,內容不會顯示,只會由螢幕閱讀器朗讀。

一般來說,使用者目前會建立 .visually-hidden 類別來隱藏內容,但仍可供螢幕閱讀器存取。

雖然這是許多人的要求,但也有人認為不該實施這項功能。詳情請參閱「 Visually hidden content is a hack that needs to be resolved, not enshrined」 和「 CSS WG issue 560」的討論內容。

overflow: hidden 內的 position:sticky

這項要求獲得 16 票。目前,只有在所有父項都是 overflow: visible 時,position: sticky 才會運作。

2017 年就有人提出要求,但問題至今仍未解決。雖然現在可能較少需要使用 overflow: hidden 清除浮動元素,但該討論串中詳述了許多其他情況。

動畫效果:height: auto

有許多與會者 (12 票) 希望動畫能呈現 height: auto。很高興在此宣布,這項功能即將在網頁平台推出,並提供 CSS interpolate-size 屬性和 calc-size() 函式。這些功能將在 Chrome 129 版推出。 我們會在日後的文章中提供更多相關資訊,敬請期待。

其他輸入類型

HTML5 為 <input> 元素帶來許多不同類型,例如電子郵件地址的 type="email",或是範圍滑桿的 type="range"。在 CSS Day,我們獲得 10 票,希望加入更多這類型的功能,例如雙範圍或使用自訂資料清單的自動完成功能。

CSS 中的實數

另一個獲得 10 票的要求是 CSS 中的實數隨機數。過去曾有人要求解決這個問題,並針對隨機的動畫時間長度提出解決方案。

Mixin 樣式類別

CSS 新增了許多先前在 CSS 前置處理器中出現的功能,包括使用自訂屬性的變數,以及現在的 CSS 巢狀結構。不過,可重複使用的混合函式尚未成為語言的一部分,但有七位 CSS Day 參與者很想看到這類函式。

CSS 工作群組已決議開始制定這項功能的規格,您可以在該問題的討論中新增想法和用途。

影子 DOM 中的全域樣式

另一個有大量討論串的用途是要求允許在陰影 DOM 內套用全域 CSS 樣式,有六個人在 CSS Day 提出這項要求。這項功能可讓全域重設樣式也套用至網頁元件,並讓單一 CSS 檔案在網站的所有元件中運作。請參閱這份使用案例摘要,並告訴我們你是否也希望擁有這項功能。

除以混合單位

Interop 2024 的提案要求提供以混合單位 (例如 calc(100vw / 1px)) 分割的能力。不過,這項功能涵蓋範圍太廣,不適合 Interop 2024,但許多開發人員 (包括 CSS Day 的六位人士) 都希望實作這項功能。

nth-letter

CSS 有許多虛擬元素,作用就像是將 span 包裝在部分內容周圍。舉例來說,::first-letter 虛擬元素會指定套用至區塊容器的第一行第一個字母。

該清單中缺少 ::nth-letter,而您大約二十年來一直要求提供這項功能,因此我們知道網頁開發人員長期以來都希望有這項功能。::nth-letter在 CSS Day,有六個人投了這項功能一票,因此成為我們最想推出的前十項功能中最後一項。

你是否同意 CSS Day 前十名?

我們很想聽聽更多觀眾對這些問題的看法,這些問題是否也名列你的前十名?如果沒有,您希望 CSS 和 HTML 支援哪些功能?請填寫這份簡短表單,讓我們瞭解你的想法。我們會在另一篇文章中彙整回覆內容。