2023 年基準

Rachel Andrew

Baseline 即將在 caniuse.com 上推出！本文將介紹 並探索整合後 2023 年基準。

有了新的基準定義， 是功能生命週期中的兩個階段：新推出時， 30 個月後正式發布。功能成為 互通性時，在下列項目可互通的基準值 瀏覽器：

  • Safari (macOS 和 iOS)
  • Firefox (電腦和 Android)
  • Chrome (電腦和 Android)
  • 邊緣 (電腦)

基準降落在「我可以使用」上

釐清功能可用性的下一步：基準是 一路走來，終於「我可使用它」造訪「我能使用」的部分網頁時，你會看到 標記，指出該功能是否可在 Baseline 上執行。

「我可以搭配 CSS 格狀版面配置使用廣泛可用的徽章」螢幕截圖。

Baseline 新推出的功能也會顯示標記 應用程式啟動的一年任何可以互通的 今年的核心瀏覽器組合是 Baseline 2023 的一部分。

「我可以與容器查詢上的新版徽章搭配使用」螢幕擷取畫面。

下文將介紹達成這項里程碑的功能 在 2023 年的研究期間這些功能 Baseline 2023：現已推出。

大小容器查詢和容器查詢單位大小

大小容器查詢 可讓您查詢元素的大小 可讓您查詢可視區域的大小製作可重複使用的元件 可讓您建立能回應區域大小的元件 打造適合自己的應用程式

瀏覽器支援

  • Chrome：105。
  • Edge：105，
  • Firefox：110。
  • Safari：16.

資料來源

下列資訊卡的設計會根據元件寬度而改變。 詳情請參閱容器查詢如何在穩定版瀏覽器中導入。

新的色域和功能

CSS 現在支援色彩空間，可讓您使用 sRGB 色域以外的顏色。 也就是說，你可以使用 HD 高畫質的顏色，支援 HD (高畫質) 螢幕 可以看出

全新色彩模型

現在採用基準，顏色函式為 lch()、lab()、oklch() 和 oklab() 提供 LCH、Lab、OKLCH 和 OKLab 色彩模型的存取權。

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：113。
  • Safari：15。

資料來源

漸層.style 編輯器的螢幕截圖，有粉色到藍色的鮮豔漸層。
您可以使用 gradient.style 嘗試新的色域。

color-mix() 函式

此外，新的色彩函式已成為 Baseline 的一部分。color-mix() 函式可讓您在任何色彩空間中混合使用一種顏色。 在下列 CSS 中，25% 的藍色合併為白色，位於 srgb 色域。

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：113。
  • Safari：15。

資料來源

進一步瞭解「color-mix()」。

color() 函式

color() 函式可用於任何以 R、G 和 B 指定顏色的色彩空間 頻道。color() 會先接受色域參數，然後是一系列 RGB 和選用的 Alpha 值。您可以使用下列任一種方式：srgb、 srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、 xyz-d50 和 xyz-d65。例如：

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

CSS 高畫質色彩指南 提供您更多新的色域和函數範例，以及 以及使用時機

壓縮串流

Compression Streams API 是一種 JavaScript API，可用於壓縮及解壓縮資料串流。應用程式 因此不再需要加入壓縮程式庫

瀏覽器支援

  • Chrome：80。
  • Edge：80，
  • Firefox：113。
  • Safari：16.4。

資料來源

詳情請參閱所有瀏覽器現在都支援壓縮串流。

螢幕外畫布

在螢幕外畫布之前，畫布繪圖功能與 <canvas> 連結 元素，讓它直接依附於 DOM。螢幕外畫布分離 將畫布移出畫面，藉此從 Canvas API 使用 DOM。

多虧有這種分離，「OffscreenCanvas」的算繪作業已從 所以相較於一般畫布，此 DOM 提升了執行速度 如此一來，這兩者之間就不會發生同步處理也可用於移動 即使沒有可用的 DOM，系統卻無法將轉譯工作 提升應用程式回應速度。

瀏覽器支援

  • Chrome：69.
  • Edge：79，
  • Firefox：105。
  • Safari：16.4。

資料來源

詳情請參閱 ScreenCanvas - 利用網路工作站加快畫布操作速度

預先載入模組

預先載入模組可以縮短下載和處理時間。新增 rel="modulepreload"敬上 指向連結元素參照 JavaScript 模組的連結元素，而瀏覽器則取得 模組，剖析及編譯該模組，並將結果放到模組對應檔中 適合執行的版本

瀏覽器支援

  • Chrome：66.
  • 邊緣：≤79。
  • Firefox：115。
  • Safari：17。

資料來源

詳情請參閱預先載入模組。

CSS 中的三角函式

在 2023 年推出 CSS 值和單元層級 4 的三角函數 規格變成可互通的這表示 sin()、cos()、 tan()、asin()、acos()、atan() 和 atan2() 是 2023 年基準版本。

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：108。
  • Safari：15.4。

資料來源

此示範使用三角函式在中心點繞著圓形路徑上移動項目。

瞭解如何使用這些函式，並探索其用途： CSS 中的三角函式。

內部屬性

將 DOM 元素標示為 inert 時，會移除以下項目中的動作或互動： 基礎架構inert 屬性會使瀏覽器忽略元素：

  • 如果使用者點選元素，不會觸發 click 事件。
  • 元素無法成為焦點。
  • 該元素及其內容已從無障礙樹狀結構中排除。

瀏覽器支援

  • Chrome：102。
  • Edge：102。
  • Firefox：112。
  • Safari：15.5。

資料來源

將這個屬性新增至畫面外或隱藏的元素。如要 詳情請參閱內部屬性。

CSS 格線版面配置中的子格線

grid-template-columns 和 grid-template-rows 的 subgrid 值可讓您 您會在巢狀格線中使用上層格線中定義的軌跡。也就是說，您可以 將不同的巢狀格線中的元素彼此對齊。

瀏覽器支援

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

資料來源

CSS 子類別中提供了相關範例和連結 介紹子網格用途的其他文章和範例。

數值格式 V3

Intl.NumberFormat V3 是 Intl.NumberFormat 的一組新功能 。額外功能如下：

  • 三個可用於設定數字範圍格式的新函式：formatRange、 「formatRangeToParts」和「selectRange」
  • 分組列舉
  • 新增四捨五入和精確度選項
  • 四捨五入優先順序
  • 將字串解讀為小數
  • 捨入模式
  • 簽署多媒體廣告排除關鍵字

瀏覽器支援

  • Chrome：106。
  • Edge：106。
  • Firefox：116。
  • Safari：15.4。

資料來源

NumberFormat V3 的提案 逐一詳細說明這些新功能

Fullscreen API

全螢幕 API 可讓您將 <video> 等元素置入全螢幕。 模式。requestFullscreen()Cloud Shell 也提供 偵測元素是否處於全螢幕模式，以及文件是否 可以要求進入全螢幕模式

瀏覽器支援

  • Chrome：71.
  • Edge：79，
  • Firefox：64。
  • Safari：16.4。

資料來源

詳情請參閱 MDN 的 Fullscreen API 指南。

CSS :has() 選取器

只讓基準 2023 成為 :has() 選取器，即可進入 Firefox 121 於 12 月 19 日除了其他用途 父項選取器：可讓您根據內部項目選取元素 基礎架構舉例來說，您可以根據 元素中的圖片

瀏覽器支援

  • Chrome：105。
  • Edge：105，
  • Firefox：121。
  • Safari：15.4。

資料來源

如要瞭解詳情，請參閱 :has(): 家庭選取器。

今年加入 Baseline 的其他功能

今年成為 Baseline 的其他功能包括：

這些功能中的許多特色都是透過合作成果實現互通性 Interop 2023。很期待看到 完成這項作業後，請在 Baseline 中登載最新可用、 自動在計時器上發射計時器這會建立 就能更準確地決定何時在專案中採用功能。