5 月初次使用網路平台

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

Rachel Andrew

穩定版瀏覽器

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

Chrome 102 和 Safari 15.5 包含inert 屬性。如果元素不具互動性，系統會從分頁順序和無障礙樹狀結構中移除這些元素。例如目前不在畫面上或隱藏的元素。

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

Chrome 102 包含 HTML hidden 屬性的新值 until-found。這樣一來，您就能在網頁的摺疊區域中搜尋文字，並捲動至文字片段，就像在手風琴模式中一樣。詳情請參閱「Making collapsed content accessible with hidden=until-found」一文。

Chrome 102 推出 Navigation API，這項 API 可在單頁應用程式中標準化用戶端路徑。這個 API 舊稱「應用程式記錄 API」。

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: not supported.
  • Safari: not supported.

Source

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);

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 101.
  • Safari: 16.4.

Source

Firefox 101 也提供 prefers-contrast 媒體功能，讓這項功能適用於各種瀏覽器。

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: 101.
  • Safari: 14.1.

Source

Beta 版瀏覽器

透過 Beta 版瀏覽器，您可以提前試用下一個穩定版瀏覽器的功能。您可以在全球發布前，測試可能影響網站的新功能或移除項目。

4 月的新 Beta 版是 Chrome 103 和 Firefox 102。

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

none
內容一經算繪即無法更新。例如列印文件。
slow
裝置可以更新內容，但速度太慢，無法顯示流暢的動畫。例如電子墨水螢幕。
fast
內容可以動態變更，速度也夠快，可算繪動畫。例如電腦或手機畫面。

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Source

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

這些 Beta 版功能很快就會在穩定版瀏覽器中推出。

編輯：這篇文章的舊版提及 Element.isVisible() 方法，但這個版本不會提供此方法。

網路新手系列