探索 2023 年 3 月穩定版和 Beta 版網路瀏覽器提供的一些有趣功能。
穩定版瀏覽器
Firefox 111、Chrome 111 和 Safari 16.4 已成為穩定版。一起來看看這對網路平台的影響。
全域 HTML 屬性
Firefox 111 開始支援幾種實用的全域 HTML 屬性。autocapitalize 屬性可控制使用者在虛擬鍵盤上輸入內容時，系統能否自動使用大寫文字。
translate 屬性可指明網頁進行本地化時，是否需要翻譯元素。
來源私人檔案系統 (OPFS)
Firefox 會在使用 File System Access API 時新增來源私人檔案系統 (OPFS)。進一步瞭解 OPFS。
View Transitions API
Chrome 111 新增了 View Transitions API，利用對檢視畫面建立快照的快照，讓您更輕鬆地在單頁應用程式 (SPA) 中製作精美的轉場效果，同時讓 DOM 在狀態之間沒有重疊的情況下進行變更。
詳情請參閱 SPA 檢視畫面轉場效果在 Chrome 111 版中發生的推出一文。
全新 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 物件，而非字串。這個 API 可讓您更輕鬆地透過 JavaScript 使用 CSS，而且成效比現有方法更高。
您也可以透過 CSSStyleSheet() 使用可建構的樣式表。這樣就能在文件及其陰影 DOM 子樹狀結構之間共用樣式表。在這個版本的 Safari 中，這三種引擎現在都支援可建構的樣式表。
Web Push 和 Badging API
Safari 現在支援網路推播和 Badging API，對應用程式開發人員來說是好消息。具體來說，這個版本代表所有主要引擎都支援推播通知。
匯入地圖
另一項新增的功能為互通狀態，新增了 JavaScript「匯入地圖」，讓匯入 ES 模組更加容易。
瀏覽器支援
- 89
- 89
- 108
- 16.4
Beta 版瀏覽器版本
「Beta 版瀏覽器」可讓您預覽瀏覽器下一個穩定版本即將推出的功能。敬請把握這個大好機會，測試及移除哪些功能，以免影響網站在全球發布前受到影響。最新的 Beta 版功能為 Firefox 112、Safari 16.5 和 Chrome 112。這些版本為 YouTube 平台帶來許多絕佳功能。請查看版本資訊，瞭解所有細節，以下只是其中幾項重點摘要。
Firefox 112 現已支援 inert 屬性，讓所有引擎都能提供這項實用屬性。如要進一步瞭解宣告，請參閱「隆重推出宣告」一文。Firefox 也會啟用 linear() 加/減速功能支援。
Chrome 112 和 Safari 16.5 版都新增對 CSS Nesting 的支援，這是許多開發人員都很期待的功能。
Chrome 112 也支援 animation-composition。想瞭解這項屬性的運作方式，請參閱「指定如何利用動畫組合來結合多個動畫效果」。
如果您使用 Chrome 的無頭模式 (例如 Puppeteer)，112 就會推出全新的無頭模式。如要瞭解這項功能，請參閱 Chrome 的無頭模式升級。
網路新手系列叢書部分