4 月首次使用網路平台

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

Rachel Andrew

穩定版瀏覽器

今年 4 月，Chrome 101 和 Firefox 99 成為穩定版。在上個月推出大量功能後，4 月的動靜較小，但我們仍推出了一些有趣的功能。

Chrome 101 包含 hwb 顏色標記。這項屬性會根據色調、白度和黑度指定顏色。如同其他顏色標記，選用的 Alpha 元件會指定不透明度。

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

如要進一步瞭解 hwb()，請閱讀 Stefan Judis 的這篇文章：hwb() – a color notation for humans?。

Browser Support

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

Source

Chrome 101 也提供「擷取優先順序」功能。您可以使用 fetchpriority 屬性，向瀏覽器提示資源的下載順序。在下方範例中，低優先順序圖片以 fetchpriority="low" 表示。

<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

其他瀏覽器尚未支援擷取優先順序，但您現在就能開始使用，讓 Chromium 101 瀏覽器使用者受益。

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 132.
  • Safari: 17.2.

Source

Firefox 99 包含 Navigator 介面的 pdfViewerEnabled 屬性。這項屬性表示瀏覽器是否支援內嵌顯示 PDF 檔案。

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

Browser Support

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 99.
  • Safari: 16.4.

Source

Beta 版瀏覽器

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

4 月的新版 Beta 版包括 Chrome 102、Firefox 100 和 Safari 15.5。

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

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

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

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

網路新手系列