5 月初次使用網路平台

探索 2022 年 5 月穩定版和 Beta 版網路瀏覽器提供的一些有趣功能。

穩定版瀏覽器

自 5 月,Chrome 102、Safari 15.5Firefox 100Firefox 101 已變成穩定版。

Chrome 102 和 Safari 15.5 包含 inert 屬性。這樣一來,非互動式的元素就會從分頁順序和無障礙樹狀結構中移除。例如目前畫面未顯示或隱藏的元素。

瀏覽器支援

  • 102
  • 102
  • 112
  • 15.5

資料來源

Chrome 102 版包含 HTML hidden 屬性的新值 until-found。這會啟用網頁內尋找功能,並且捲動至頁面收合區域中的文字片段,就像摺疊模式一般。詳情請參閱「使用 hidden=until-found 存取收合內容」一文。

瀏覽器支援

  • 102
  • 102
  • x
  • x

資料來源

Chrome 102 推出 Navigation API,這個 API 可以標準化單頁應用程式中的用戶端轉送。這個 API 原名為 App History API。

瀏覽器支援

  • 102
  • 102
  • x
  • x

資料來源

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

瀏覽器支援

  • 73
  • 79
  • 101
  • 16.4

資料來源

Firefox 101 也提供了 prefers-contrast 媒體功能,因此您可以在各種瀏覽器中使用這項功能。

瀏覽器支援

  • 96
  • 96
  • 101
  • 14.1

資料來源

Beta 版瀏覽器版本

「Beta 版瀏覽器」可讓您預覽瀏覽器下一個穩定版本即將推出的功能。敬請把握這個大好機會,測試及移除哪些功能,以免影響網站在全球發布前受到影響。

4 月的最新 Beta 版剛剛為 Chrome 103Firefox 102

Firefox 102 提供 update 媒體功能。這會用於查詢輸出裝置轉譯後的內容外觀。此方法接受下列值:

none
內容算繪後即無法更新。例如紙本文件。
slow
裝置可以更新內容,但無法順利顯示流暢的動畫。例如電子墨水螢幕。
fast
內容可能動態且速度夠快,才能轉譯動畫。例如電腦或手機螢幕。

瀏覽器支援

  • 113
  • 113
  • 102
  • 17

資料來源

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

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

編輯:該文章先前的版本包含提及 Element.isVisible() 方法,但該方法不適用於這個版本。

網路新手系列叢書部分