探索 2022 年 6 月穩定版和 Beta 版網路瀏覽器提供的一些有趣功能。
穩定版瀏覽器
Chrome 103 和 Firefox 102 已成為穩定版。
轉換串流和可讀取的位元組串流
Firefox 102 包含支援轉換串流。這樣即可從 ReadableStream 傳輸至 WritableStream，對區塊執行轉換作業。很高興看到這項功能適用於所有三個引擎，因此這是學習訊息串的絕佳時機。
Firefox 102 現在也支援可讀取的位元組串流，讓您可透過 ReadableStreamBYOBReader 介面啟用 BYOB (自備緩衝區) 閱讀器。這可用來串流開發人員提供的資料。
存取本機安裝的字型
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 媒體功能。這會用於查詢輸出裝置轉譯後的內容外觀。
新的 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) { … }
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 中處於開發階段，而且能讓巢狀格線沿用原本的格線尺寸設定。
此外，格狀版面配置也能為格線軌道建立動畫效果。
瀏覽器支援
- 107
- 107
- 66
- 16
showPicker() 方法可允許以標準化方式顯示日期、時間、顏色和檔案的瀏覽器挑選器。如需更多資訊，請參閱顯示日期、時間、顏色和檔案的瀏覽器挑選器。
該功能也已解決 display: contents 的無障礙功能問題，確保使用者能安全使用這項實用功能，不必擔心會從無障礙功能樹狀結構中移除元素。
這些 Beta 版功能很快就會在穩定版瀏覽器中推出。
網路新手系列叢書部分