5 月初次使用網路平台

瞭解 2022 年 5 月推出的穩定版和 Beta 版網頁瀏覽器中，有哪些有趣的功能。

Rachel Andrew

穩定版瀏覽器

5 月時，Chrome 102、Safari 15.5、Firefox 100 和 Firefox 101 都已穩定推出。

Chrome 102 和 Safari 15.5 包含 inert 屬性。這會從分頁順序和無障礙樹狀結構中移除非互動式元素。例如目前不在螢幕上或隱藏的元素。

瀏覽器支援

  • Chrome：102。
  • Edge：102。
  • Firefox：112。
  • Safari：15.5。

資料來源

Chrome 102 為 HTML hidden 屬性新增了 until-found 值。這可讓您在頁面內的摺疊區域內的文字上使用「在頁面中尋找」功能，並捲動至文字片段，例如在 Accordion 模式中。詳情請參閱「使用 hidden=until-found 讓收合內容更易於存取」一文。

瀏覽器支援

  • Chrome：102。
  • Edge：102。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

Chrome 102 推出了 Navigation API，這是一種 API，可將單頁應用程式中的用戶端路由標準化。這個 API 舊稱為 App History API。

瀏覽器支援

  • Chrome：102。
  • Edge：102。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

Firefox 101 支援可建構的樣式表。支援範圍包括 CSSStyleSheet() 建構函式、replace() 和 replaceSync() 方法。可建構的樣式表可讓您更輕鬆地建立樣式表，以便與 Shadow DOM 搭配使用。在以下範例中，我們使用 CSSStyleSheet() 建構函式建立樣式表，並透過 replaceSync() 方法新增 CSS 規則，然後將產生的規則列印到主控台。

const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);

瀏覽器支援

  • Chrome：73。
  • Edge：79。
  • Firefox：101。
  • Safari：16.4。

資料來源

Firefox 101 也提供 prefers-contrast 媒體功能，可跨瀏覽器使用這項功能。

瀏覽器支援

  • Chrome：96。
  • Edge：96。
  • Firefox：101。
  • Safari：14.1。

資料來源

Beta 版瀏覽器

瀏覽器 Beta 版可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前，您可以測試可能會影響網站的新功能或移除項目。

4 月推出的新版 Beta 版為 Chrome 103 和 Firefox 102。

Firefox 102 包含 update 媒體功能。這項屬性可用於查詢輸出裝置在算繪後是否可以修改內容的外觀。可接受下列值：

none
轉譯後，內容就無法更新。例如已列印的文件。
slow
裝置可以更新內容，但速度太慢，無法顯示流暢的動畫。例如電子墨水螢幕。
fast
內容可動態變更，且速度足以算繪動畫。例如電腦或手機螢幕。

瀏覽器支援

  • Chrome：113。
  • Edge：113。
  • Firefox：102。
  • Safari：17。

資料來源

Chrome 103 包含 Local Font Access API，可存取使用者本機安裝的字型。

這些 Beta 版功能很快就會納入穩定版瀏覽器。

編輯：這篇文章的舊版提到 Element.isVisible() 方法，但這個方法並未在本版本中推出。

新手上路：網路系列課程