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

2023 年基準

Rachel Andrew

基準即將前往 caniuse.com 推出！在這篇文章中，您將瞭解整合作業，以及探索 2023 年納入 Baseline 的部分功能。

根據新的基準定義，功能生命週期中有兩個階段。首先是新上線，然後在 30 個月後全面開放使用。當某項功能在下列瀏覽器中可互通時，就會成為基準新可用功能的一部分：

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

Baseline 到達「我可以使用」

為闡明功能可用性，Baseline 將從今天起介紹「我可以使用」了。造訪「我可以使用」的某些網頁時，您會看到一個標記，顯示該功能是否在 Baseline 中開放使用。

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

Baseline 新推出的功能也會顯示徽章，以及推出年份。因此，今年 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 高畫質色彩指南提供更多全新色域和函式的範例，以及適用時機的相關資訊。