1 月時網路平台新手

探索 2024 年 1 月在穩定版和 Beta 版網路瀏覽器中推出的一些有趣功能。

穩定版瀏覽器

自 2024 年 1 月,Firefox 122Chrome 121Safari 17.3 已穩定執行。這篇文章介紹了網路平台新增的功能。

<select><hr>

Firefox 122 會將 <hr> 元素新增為 <select> 元素的允許子項。 這有助於提供提供許多選項的選取清單,方便閱讀。所有主要的瀏覽器引擎現在都支援這項功能。不過請注意,目前沒有任何瀏覽器會將 <hr> 暴露在無障礙樹狀結構中。

瀏覽器支援

  • 119
  • 119
  • 122
  • 17

HTMLSelectElement.showPicker

Firefox 中的 <select> 元素也是 HTMLSelectElementshowPicker() 方法。這和一般會在選取元素時顯示的挑選器,但可透過按下按鈕或其他使用者互動的方式觸發。

瀏覽器支援

  • 121
  • 121
  • 122

資料來源

最大內容繪製 (LCP) API

Firefox 122 也支援 LCP API。這個效能 API 可在使用者與網頁互動之前,提供最大圖片或文字繪製的時間資訊。如要進一步瞭解 LCP,請參閱 LCP 說明文件

瀏覽器支援

  • 77
  • 79
  • 122
  • x

資料來源

CSS 捲軸屬性

Chrome 121 版開始支援捲軸屬性 scrollbar-colorscrollbar-width。詳情請參閱捲軸樣式一文。

瀏覽器支援

  • 121
  • 121
  • 64
  • x

資料來源

CSS font-palette 動畫

font-palette 屬性可讓您選取特定調色盤,以顯示顏色字型。這個屬性現在支援動畫,因此切換調色盤後,即可在所選的兩個調色盤之間順暢轉換。

ArrayBuffertransfer()transferToFixedLength() 方法

Firefox 包含 ArrayBuffer 的 JavaScript transfer()transferToFixedLength() 方法。transfer() 方法會建立具備與目前 ArrayBuffer 相同的位元組內容的新 ArrayBuffer,然後卸離原本的 ArrayBuffertransferToFixedLength() 方法的運作方式相同,但會建立固定大小的 ArrayBuffer

瀏覽器支援

  • 114
  • 114
  • 122
  • 17.4

資料來源

Speculation Rules API 更新

網站會使用 Speculation Rules API,能以程式輔助方式指示 Chrome 要預先轉譯哪些頁面,進而縮短頁面瀏覽時間,打造更優質的使用者體驗。

Chrome 121 版支援文件規則:這是推測規則語法的延伸,可讓瀏覽器取得網址清單,以便推測從網頁中的元素載入。文件規則可以提供這些連結適用的條件。在這個項目加上新的「eagerness」欄位後,您就能立即在遊標懸停或向下捲動時,自動預先擷取或預先轉譯網頁上的連結。

Beta 版瀏覽器版本

Beta 版瀏覽器可讓您預覽下一個穩定版的功能。趁這個機會在全球推出前,測試或移除可能影響網站的新功能。新的 Beta 版測試為 Firefox 123Chrome 122Safari 17.4。這些版本為 YouTube 平台帶來許多絕佳功能。完整資訊請參閱版本資訊。以下僅列出幾項重點功能。

Firefox 123 Beta 版包含宣告式 Shadow DOM

另外,Firefox 123 也支援 103 Early Hints HTTP 資訊回應狀態碼,用於預先載入資源,因為伺服器準備完整回應時,網頁可能需要資源。

Safari 17.4 Beta 版中有許多好用的功能。CSS 支援在區塊容器和資料表儲存格中使用 @scopealign-content,以及 ::grammar-error::spelling-error 虛擬元素,除此之外還有更多功能。

在表單中,表單控制項支援垂直寫入模式、<input type="date">showPicker() 方法,以及 iOS 上 <select><hr> 的支援。

JavaScript 還支援 ArrayBufferdetached()transfer()transferToFixedLength() 方法,以及其他幾項新功能。

Chrome 122 Beta 版在 Async Clipboard APIread() 方法中加入 unsanitized 選項,可用於擷取未經處理的 HTML 格式。針對 JavaScript,您可以使用新的疊代器輔助程式,以及內建 Set 類別的新方法。

此外,Chrome 122 也使用 Storage Buckets API,讓使用者更容易在記憶體壓力偏高時可預測是否清除永久儲存空間。