4 月首次使用網路平台

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

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() – 人類的顏色標記?

瀏覽器支援

  • Chrome:101 課程。
  • Edge:101。
  • Firefox:96。
  • Safari:15。

資料來源

Chrome 101 也提供擷取優先順序功能。這樣一來,您就能使用 fetchpriority 屬性,向瀏覽器提示應以何種順序下載資源。在下方範例中,低優先順序圖片會以 fetchpriority="low" 表示。

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

其他瀏覽器尚未支援擷取優先順序,但您現在就能開始使用,讓任何使用以 Chromium 101 為基礎的瀏覽器的使用者都能受惠。

瀏覽器支援

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

資料來源

Firefox 99 包含導覽器介面的 pdfViewerEnabled 屬性。這個屬性會指出瀏覽器是否支援內嵌顯示 PDF 檔案。

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

瀏覽器支援

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

資料來源

Beta 版瀏覽器版本

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

4 月的最新 Beta 版為 Chrome 102Firefox 100Safari 15.5

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

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

瀏覽器支援

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

資料來源

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

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

新手上路:網路系列