6 月初次使用網路平台

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

Rachel Andrew

穩定版瀏覽器

6 月，Chrome 103 和 Firefox 102 已穩定推出。

轉換串流和可讀取的位元組串流

Firefox 102 支援轉換串流。這可讓您從 ReadableStream 傳送至 WritableStream，並對區塊執行轉換作業。很高興這項功能已在所有三個引擎中推出，現在正是學習Streams 的好時機。

瀏覽器支援

  • Chrome：67。
  • Edge：79。
  • Firefox：102。
  • Safari：14.1。

資料來源

Firefox 102 也支援可讀位元組串流，可透過 ReadableStreamBYOBReader 介面啟用 BYOB (自備緩衝區) 讀取器。可用於串流傳輸開發人員提供的資料。

瀏覽器支援

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

資料來源

存取本機安裝的字型

Chrome 103 包含 Local Font Access API，可存取使用者本機安裝的字型。要求存取裝置上安裝的字型後，請呼叫 window.queryLocalFonts() 取得已安裝字型的陣列。

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

update 媒體功能

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

瀏覽器支援

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

資料來源

新的 HTTP 狀態碼：103 提示

Chrome 103 新增了 HTTP 103 Early Hints 狀態碼。如果伺服器或 CDN 知道需要某些子資源才能載入網頁，則可建議瀏覽器預先連線至來源，甚至在需要這些資源的網頁載入時預先載入資源。您必須更新伺服器或 CDN，才能充分運用這項功能，請參閱這篇文章，進一步瞭解提前提示。

Beta 版瀏覽器

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

4 月推出的新版 Beta 版為 Chrome 104、Firefox 103 和 Safari 16。

範圍媒體查詢的新語法

Chrome 104 包含範圍媒體查詢的新語法，這是根據媒體查詢第 4 級規格所制定。舉例來說，先前撰寫的媒體查詢如下：

@media (min-width: 400px) { … }

現可寫成以下形式：

@media (width >= 400px) { … }

瀏覽器支援

  • Chrome：104。
  • Edge：104。
  • Firefox：102。
  • Safari：16.4。

資料來源

Region Capture API

Chrome 104 桌面版也包含 Region Capture API。這樣一來，你就能在分享影片前裁剪及移除內容。

Safari 16 為瀏覽器帶來多項重要功能

Safari 16 似乎是 Safari 團隊推出的另一個令人興奮的版本。這個版本新增了許多 Interop 2022 中的功能，很高興看到這麼多功能在年中推出。以下是幾項我最喜歡的功能，如需更多資訊，請參閱版本資訊。

我和許多開發人員一樣，很高興看到容器查詢支援大小查詢，這項功能目前也已在 Chrome 中提供旗標。

Safari 16 也支援 grid-template-columns 和 grid-template-rows 的 subgrid 值。這項功能已在 Firefox 中推出，並在 Chrome 中進行開發，可讓格線軌道大小繼承巢狀格線。

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：71。
  • Safari：16 歲。

資料來源

格線版面配置也能讓格線軌跡產生動畫效果。

瀏覽器支援

  • Chrome：107。
  • Edge：107。
  • Firefox：66。
  • Safari：16 歲。

showPicker() 方法可讓您以標準方式顯示瀏覽器挑選器，用於日期、時間、顏色和檔案。如要進一步瞭解這項功能，請參閱「顯示日期、時間、顏色和檔案的瀏覽器挑選器」一文。

瀏覽器支援

  • Chrome：99。
  • Edge：99。
  • Firefox：101。
  • Safari：16 歲。

資料來源

display: contents 的無障礙問題也已解決，讓這項實用功能可安全使用，不會從無障礙樹狀結構中移除元素。

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

新手上路：網路系列