2023 年 3 月，我們在穩定版和 Beta 版網路瀏覽器中推出了幾項有趣的功能，歡迎一探究竟。
穩定版瀏覽器版本
Firefox 111、Chrome 111 和 Safari 16.4 已於 2023 年 3 月穩定運作。我們來看看這對網路平台有何影響。
全域 HTML 屬性
Firefox 111 支援兩種實用的通用 HTML 屬性。autocapitalize 屬性控制使用者在虛擬鍵盤上輸入內容時，是否可使文字自動大寫。
translate 屬性可指定是否要在網頁本地化時翻譯元素。
來源私人檔案系統 (OPFS)
Firefox 在使用 File System Access API 時加入了來源私人檔案系統 (OPFS)。進一步瞭解 OPFS。
View Transitions API
Chrome 111 加入了 View Transitions API，藉由擷取檢視畫面快照以及讓 DOM 在狀態之間出現任何重疊的情況下，更輕鬆地在單頁應用程式 (SPA) 中建立精美的轉場效果。
詳情請參閱 Chrome 111 版的 SPA 檢視轉場功能一文。
全新 CSS 色域和函式
Chrome 111 也包含以全新方式在網路上使用色彩的方法。Chrome 現在支援存取 RGB 色域以外的色彩空間，以及 color() 和 color-mix() 函式。詳情請參閱高畫質 CSS 顏色指南和 color-mix() 的網誌文章。
Chrome 版本也包含新的開發人員工具，可協助您使用這項新的色彩功能。
進一步控管 :nth-child() 個選項
Chrome 111 版本新增了將選取器清單傳遞至 :nth-child() 和 nth-last-child() 的功能。如要瞭解詳情及查看範例，請參閱「使用 S 語法進一步控管 :nth-child() 選項」。
瀏覽器支援
- 111
- 111
- 113
- 9
支援 Media Session API 中的上一張投影片
最後，在 Chrome 111 新政策中，我們針對媒體工作階段 API ("previousslide" 和 "nextslide") 新增簡報投影片動作。
瀏覽器支援
- 111
- 111
- x
- x
Safari 的虛擬課程支援
Safari 16.4 是網路平台的超棒版本。本文未涵蓋所有新增內容，請參閱 Safari 16.4 版本資訊中的完整功能清單。
這個版本支援多種額外的 CSS 虛擬類別：:user-invalid、:user-valid、:dir()、:modal 和 :fullscreen。
媒體查詢的全新範圍語法
這個 Safari 版本讓媒體查詢語法在全部三種引擎中都能透過更美觀且實用的範圍互通。如要查看這類語法的範例，請參閱這篇文章，該語法會在 Chrome 傳送時發布。
CSS 屬性和值
Safari 16.4 新增了對 @property 的支援，讓 CSS 自訂屬性直接在樣式表中登錄。詳情請參閱 @property：為 CSS 變數提供超能力。
CSS API 支援
我們會陸續支援 CSS 的各種實用功能，並支援 CSS Typed OM。這個 API 會將 CSS 值顯示為型別的 JavaScript 物件，而非字串。如此一來，透過 JavaScript 使用 CSS 變得更輕鬆，而且效能比現有方法更出色。
系統也支援使用 CSSStyleSheet() 可建構的樣式表。這可以允許文件及其陰影 DOM 子樹狀結構之間共用樣式表。這個版本的 Safari 目前全部三種引擎都支援可建構的樣式表。
網路推送和徽章 API
Safari 現在支援 Web Push 以及 Badging API，這是提供給應用程式開發人員參考的好消息。特別是，這個版本意味著所有主要引擎都支援推播通知。
匯入地圖
此外，我們還加入了 JavaScript 匯入地圖功能，可讓您產生可互通狀態的功能，大幅簡化 ES 模組的匯入程序。
瀏覽器支援
- 89
- 89
- 108
- 16.4
Beta 版瀏覽器版本
Beta 版瀏覽器可讓您預覽下一個穩定版本的功能。因此，現在當全球版本發布之前，建議你多多測試新功能或移除現有功能，進而對網站造成影響。新的 Beta 版包括 Firefox 112、Safari 16.5 和 Chrome 112。這些版本為平台帶來許多實用功能。查看版本資訊，瞭解所有詳細資料，以下僅列出其中幾個重點。
Firefox 112 現已支援 inert 屬性，讓所有引擎都能使用這項實用屬性。歡迎參閱這篇文章，進一步瞭解內部標記功能。Firefox 也會支援 linear() 加/減速功能。
Chrome 112 和 Safari 16.5 都開始支援 CSS Nesting，這項功能受到許多開發人員高度期待。
Chrome 112 也支援 animation-composition。如要瞭解這個屬性的運作方式，請參閱「指定如何搭配動畫組合使用多個動畫效果」。
如果使用 Chrome 的無頭模式 (例如 Puppeteer)，而設定 112 即可進入全新的無頭模式。詳情請參閱 Chrome 的無頭模式升級。
網路系列新作精選內容