6 月初次使用網路平台

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

6 月,Chrome 103Firefox 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 104Firefox 103Safari 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-columnsgrid-template-rowssubgrid 值。這項功能已在 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 版功能很快就會納入穩定版瀏覽器。

新手上路:網路系列