本頁面由 Cloud Translation API 翻譯而成。

2023 年基準

Rachel Andrew

基準即將前往 caniuse.com 推出！在這篇文章中，您將瞭解整合作業，並探索 2023 年基準化的功能。

根據新的基準定義，功能生命週期會分為兩個階段：這是推出新版本的時間，以及 30 個月後全面開放使用。當功能在下列瀏覽器中可以互通時，就會成為基準新可用功能的一部分：

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

Baseline 到達「我可以使用」

闡明功能可用性的下一步，是從今天開始介紹「我可以使用」了。造訪「我可以使用」的某些頁面時，您會看到標記顯示該功能是否全面開放使用基準測試。

螢幕截圖：我能透過 CSS 格線版面配置中廣為使用的徽章，使用上述功能。

Baseline 新推出的功能也會顯示標記，以及推出年份。今年所有的核心瀏覽器組合中都能互通的元件，一律屬於 2023 基準的一部分。

螢幕截圖：我能在「容器查詢」中使用新推出的標記。

後續章節將說明在 2023 年達成這個里程碑的功能。所有這些功能都是 2023 年基準 - 已推出。

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

您可以在大小容器查詢中查詢元素的大小，就像使用媒體查詢查詢可視區域大小一樣，這些元件可讓您建立元件，依照其所在區域的大小做出回應，讓您更輕鬆地建立可重複使用的元件。

瀏覽器支援

資料來源

下列資訊卡的設計會根據元件寬度變更。詳情請參閱在穩定瀏覽器中發生的容器查詢。

全新色域和函式

CSS 現在支援色彩空間，可讓您存取 sRGB 色域以外的顏色。這表示您可以使用 HD 高畫質模式的顏色來支援 HD (高畫質) 螢幕。

全新色彩模型

在 Baseline 中，顏色函式 lch()、lab()、oklch() 和 oklab() 可用於存取 LCH、Lab、OKLCH 和 OKLab 色彩模型。

瀏覽器支援

資料來源

漸層.style 編輯器的螢幕截圖，粉紅色到藍色的鮮豔漸層。 — 使用 gradient.style 體驗新的色域。

`color-mix()` 函式

此外，新的色彩函式已成為 Baseline 的一部分。color-mix() 函式可讓您在任何色域中將某顏色混入另一個顏色。在以下 CSS 中，srgb 色彩空間中有 25% 的藍色混合為白色。

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

瀏覽器支援

資料來源

進一步瞭解 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 高畫質色彩指南提供更多新的色域和函式範例，以及適用時機的相關資訊。