2023 年基準

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

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

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

Baseline 到達「我可以使用」

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

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

Baseline 新推出的功能也會顯示徽章,以及推出年份。因此,今年 Baseline 2023 基準都適用於核心瀏覽器組的互通性。

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

本文其他內容將介紹 2023 年達成這個里程碑的功能。以上所有功能都是2023 年基準 (已推出)。

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

您可以利用大小容器查詢功能查詢元素的大小,就像使用媒體查詢查詢可視區域大小一樣,這種元件可讓您更輕鬆地建立可重複使用的元件,因為您可以建立元件來因應其放置區域的大小。

瀏覽器支援

  • 105
  • 105
  • 110
  • 16

資料來源

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

全新色域和函式

CSS 現在支援色彩空間,可讓您存取 sRGB 色域以外的顏色。也就是說,您可以使用 HD 高畫質模式的顏色,支援 HD (高畫質) 螢幕。

全新色彩模型

在 Baseline 中,顏色函式 lch()lab()oklch()oklab() 可授予 LCH、Lab、OKLCH 和 OKLab 色彩模型的存取權。

瀏覽器支援

  • 111
  • 111
  • 113
  • 15

資料來源

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

color-mix() 函式

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

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

瀏覽器支援

  • 111
  • 111
  • 113
  • 15

資料來源

進一步瞭解 color-mix()

color() 函式

color() 函式可用於指定使用 R、G 和 B 頻道顏色的任何色域。Color() 會先使用色域參數,然後是 RGB 和部分 Alpha 的一系列聲道值。您可以使用以下任一項:srgbsrgb-lineardisplay-p3a98-rgbprophoto-rgbrec2020xyzxyz-d50xyz-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。只要使用此內建壓縮功能,應用程式就不再需要包含壓縮程式庫。

瀏覽器支援

  • 80
  • 80
  • 113
  • 16.4

資料來源

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

螢幕外畫布

在 OffscreenCanvas 之前,畫布繪圖功能會與 <canvas> 元素連結,也就是直接依附於 DOMOffscreenCanvas,顧名思義,會將 DOM 和 Canvas API 移到畫面外來分離。

多虧了分解,OffscreenCanvas 的轉譯速度會與 DOM 完全卸離,因此對一般畫布的速度會稍微改善,因為兩者之間沒有同步處理。更重要的是,即使沒有可用的 DOM,仍能將轉譯工作移至 Web Worker,以釋出主執行緒,並提高應用程式的回應能力。

瀏覽器支援

  • 69
  • 79
  • 105
  • 16.4

資料來源

詳情請參閱 OffscreenCanvas - 運用網路工作站加快畫布作業速度

預先載入模組

預先載入模組可以縮短下載和處理時間。將 rel="modulepreload" 加入參照 JavaScript 模組的連結元素,瀏覽器會取得模組,進行剖析和編譯,然後將結果放入準備執行的模組對應中。

瀏覽器支援

  • 66
  • ≤79
  • 115
  • 17

資料來源

詳情請參閱「預先載入模組」一文。

CSS 中的三角函式

2023 年,CSS 值和單元層級 4 規格的三角函式可互通。這表示 sin()cos()tan()asin()acos()atan()atan2() 函式屬於 2023 基準的一部分。

瀏覽器支援

  • 111
  • 111
  • 108
  • 15.4

資料來源

這個示範模式使用三角函式將項目移動到中心點圓形的圓形路徑上。

瞭解如何使用這些函式,並探索 CSS 中的 Trigonometric 函式

插入屬性

「Inert」表示無法移動物件,因此當您標示某個物件時,就會移除這些 DOM 元素的動作或互動。inert 屬性會導致瀏覽器忽略該元素。

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

瀏覽器支援

  • 102
  • 102
  • 112
  • 15.5

資料來源

這項屬性應新增至畫面外或以其他方式隱藏的元素。詳情請參閱「The inert 屬性」。

CSS 格狀版面配置中的子網格

grid-template-columnsgrid-template-rowssubgrid 值可讓您在巢狀格線上使用父項格線定義的軌跡。也就是說,您可以將這些巢狀格線內的元素互相對齊。

瀏覽器支援

  • 117
  • 117
  • 71
  • 16

資料來源

在「CSS 子網格」文章中,你可以找到許多其他文章的範例和連結,以及醒目顯示子網格用途的範例。

數字格式 V3

Intl.NumberFormat V3 是一組 Intl.NumberFormat 的新功能,在 2023 年成為 Baseline 的一部分。額外功能如下:

  • 以下三個用於設定數字範圍格式的新函式:formatRange、formatRangeToParts 和 selectRange。
  • 分組列舉
  • 新的捨入和精確度選項
  • 四捨五入優先順序
  • 將字串解讀為小數
  • 捨入模式
  • 簽名為負數

瀏覽器支援

  • 106
  • 106
  • 116
  • 15.4

資料來源

NumberFormat V3 的提案會詳細說明各項新功能。

全螢幕 API

Fullscreen API 可以呼叫 requestFullscreen() 方法,將 <video> 等元素放入全螢幕模式。這個程式庫也提供偵測元素的方法,包括偵測元素是否處於全螢幕模式,以及文件是否處於可要求全螢幕模式的狀態。

瀏覽器支援

  • 71
  • 79
  • 64
  • 16.4

資料來源

詳情請參閱這份 MDN 專用全螢幕 API 指南

CSS :has() 選取器

將 Baseline 2023 設為 :has() 選取器,這個選取器將於 12 月 19 日在 Firefox 121 中登陸。在其他用途中,這個選取器可以當做上層選取器,讓您根據元素內的項目選取元素。舉例來說,您可以根據元素是否包含圖片,套用不同的 CSS。

瀏覽器支援

  • 105
  • 105
  • 121
  • 15.4

資料來源

詳情請參閱 :has(): 系列選取器

今年加入 Baseline 的其他功能

這篇文章分享了今年加入 Baseline 的一些重要功能,但更多內容。

其中許多功能都透過 Interop 2023 的協同合作成果實現了互通性。很高興看到整個程序如何實現這些功能,並成為 Baseline 新推出的功能,以期開放更多人使用這些功能。如此一來,您就能更清楚決定何時在自己的專案中採用功能。