探索 2023 年 12 月在穩定版和 Beta 版網路瀏覽器中推出的一些有趣功能。
穩定版瀏覽器
2023 年 12 月，Firefox 121、Chrome 120 和 Safari 17.2 已穩定。本文將解說對網路平台的影響。
CSS 巢狀結構的寬鬆剖析
Chrome 120 和 Safari 17.2 版加入了放寬 CSS 巢狀結構的剖析功能。自 117 版起，Firefox 已支援這項語法變更，因此所有主要的引擎皆支援這類語法變更。
使用 <details> 元素的專屬手感
Chrome 120 和 Safari 17.2 版支援 <details> 元素的 name 屬性。也就是說，您可以將多個 <details> 元素分組，建立專屬的摺疊元素元件。
進一步瞭解專屬手術。
瀏覽器支援
- 120
- 120
- x
- 17.2
:has() 選取器
Firefox 121 包含 CSS :has() 選取器。這個版本讓 :has() 在所有主要引擎中都能互通。
詳情請參閱 :has()：家庭選取器。
CSS Custom Highlight API
Safari 17.2 內含 CSS Custom Highlight API 可讓您建立及設定文字範圍樣式，擴充標準醒目顯示虛擬類別 (例如 ::selection)。
CloseWatcher API
Chrome 120 內含 CloseWatcher API，這是一種用於監聽及回應關閉要求的新 API。
這些要求是由電腦上的 ESC 鍵和 Android 的返回手勢或按鈕觸發，要正確實作可能不太容易。
除了 API 之外，Chrome 120 也會升級 <dialog> 和 popover 屬性，以回應 Android 返回按鈕。
瀏覽器支援
- 120
- 120
- x
- x
CSS text-wrap: balance 和 stable
Firefox 121 包含 text-wrap 的 balance 和 stable 值。
balance 值適用於標題之類的簡短內容區塊，能讓使用者更賞心悅目，且易於閱讀。使用 stable 值可防止在編輯期間調整可編輯內容。
進一步瞭解 text-wrap: balance。
延遲載入 <iframe> 元素
Firefox 121 支援在 <iframe> 元素上使用 loading 屬性。這表示所有主要的引擎現在都支援 iframe 的延遲載入功能。
瀏覽器支援
- 77
- 79
- 121
- 16.4
支援 linear() 加/減速函式
Safari 17.2 還支援 linear() 加/減速功能，可用來建立彈跳和彈簧效果。
瀏覽器支援
- 113
- 113
- 112
- 17.2
Beta 版瀏覽器版本
Beta 版瀏覽器可讓您預覽下一個穩定版的功能。趁這個機會在全球推出前，測試或移除可能影響網站的新功能。新的 Beta 版為 Firefox 122、Chrome 121 和 Safari 17.3。這些版本為 YouTube 平台帶來許多絕佳功能。完整資訊請參閱版本資訊。以下僅列出幾項重點功能。
Firefox 122 和 Chrome 121 包含 HTMLSelectElement 的 showPicker() 方法。
這裡會顯示選取元素後顯示的相同挑選器，但可透過按下按鈕或其他使用者互動觸發。
Chrome 121 包含捲軸樣式屬性 scrollbar-color 和 scrollbar-width，並改善 SVG 的 CSS 遮罩，還能針對拼寫錯誤或文法不正確的文字醒目顯示虛擬元素。