基準即將前往 caniuse.com 推出!在這篇文章中,您將瞭解整合作業,並探索 2023 年基準化的功能。
根據新的基準定義,功能生命週期會分為兩個階段:這是推出新版本的時間,以及 30 個月後全面開放使用。當功能在下列瀏覽器中可以互通時,就會成為基準新可用功能的一部分:
- Safari (macOS 和 iOS)
- Firefox (電腦和 Android)
- Chrome (電腦和 Android)
- 邊緣 (電腦)
Baseline 到達「我可以使用」
闡明功能可用性的下一步,是從今天開始介紹「我可以使用」了。造訪「我可以使用」的某些頁面時,您會看到標記顯示該功能是否全面開放使用基準測試。
Baseline 新推出的功能也會顯示標記,以及推出年份。今年所有的核心瀏覽器組合中都能互通的元件,一律屬於 2023 基準的一部分。
後續章節將說明在 2023 年達成這個里程碑的功能。所有這些功能都是 2023 年基準 - 已推出。
大小容器查詢和容器查詢單元
您可以在大小容器查詢中查詢元素的大小,就像使用媒體查詢查詢可視區域大小一樣,這些元件可讓您建立元件,依照其所在區域的大小做出回應,讓您更輕鬆地建立可重複使用的元件。
下列資訊卡的設計會根據元件寬度變更。詳情請參閱在穩定瀏覽器中發生的容器查詢。
全新色域和函式
CSS 現在支援色彩空間,可讓您存取 sRGB 色域以外的顏色。這表示您可以使用 HD 高畫質模式的顏色來支援 HD (高畫質) 螢幕。
全新色彩模型
在 Baseline 中,顏色函式 lch()
、lab()
、oklch()
和 oklab()
可用於存取 LCH、Lab、OKLCH 和 OKLab 色彩模型。
color-mix()
函式
此外,新的色彩函式已成為 Baseline 的一部分。color-mix()
函式可讓您在任何色域中將某顏色混入另一個顏色。在以下 CSS 中,srgb 色彩空間中有 25% 的藍色混合為白色。
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
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。使用此內建壓縮功能的應用程式不再需要加入壓縮程式庫。
詳情請參閱所有瀏覽器現在都支援壓縮串流。
螢幕外畫布
在 OffscreenCanvas 之前,畫布繪圖功能會綁定 <canvas>
元素,也就是直接依附於 DOMOffscreenCanvas 會將畫布從畫面外移動,藉此將 DOM 從 Canvas API 分離。
多虧了分解,OffscreenCanvas 的算繪作業與 DOM 完全卸離,因此可以提升一般畫布的速度,因為兩者之間沒有同步處理。即使沒有可用的 DOM,也能將算繪工作移至網路工作站,釋出主執行緒,提高應用程式的回應能力。
詳情請參閱 OffscreenCanvas - 運用網路工作站加快畫布作業速度
預先載入模組
預先載入模組可以縮短下載和處理時間。請將 rel="modulepreload"
加入參照 JavaScript 模組的連結元素,瀏覽器會取得模組、剖析及編譯模組,然後將結果放入準備好執行的模組對應中。
詳情請參閱「預先載入模組」。
CSS 中的三角函式
在 2023 年,CSS 值和單元層級 4 規格的三角函式可互通。這表示 sin()
、cos()
、tan()
、asin()
、acos()
、atan()
和 atan2()
函式屬於 2023 年基準的一部分。
瞭解如何使用這些函式並探索一些用途,請參閱 CSS 中的 Trigonometric 函式。
插入屬性
將 DOM 元素標示為 inert
時,您就會移除元素中的移動或互動情形。inert 屬性會導致瀏覽器忽略 元素:
- 使用者點選元素時不會觸發
click
事件。 - 元素無法聚焦。
- 元素及其內容已從無障礙樹狀結構中排除。
在畫面外或以其他方式隱藏的元素中新增這個屬性。詳情請參閱「斷言屬性」。
CSS 格狀版面配置中的子網格
grid-template-columns
和 grid-template-rows
的 subgrid
值可讓您在巢狀格線上使用父項格線定義的軌跡。也就是說,您可以將不同巢狀格中的元素對齊。
在 CSS Subgrid 中,您會看到一些範例和許多其他文章的連結,以及醒目顯示子網格用途的範例。
數字格式 V3
Intl.NumberFormat V3 是一組 Intl.NumberFormat 的新功能,在 2023 年成為基準的一部分。額外功能如下:
- 以下三個用來設定數字範圍格式的新函式:
formatRange
、formatRangeToParts
和selectRange
- 分組列舉
- 新的捨入和精確度選項
- 四捨五入優先順序
- 將字串解讀為小數
- 捨入模式
- 簽名為負數
NumberFormat V3 的提案會詳細說明這些新功能。
全螢幕 API
Fullscreen API 可以呼叫 requestFullscreen()
方法,將 <video>
等元素放入全螢幕模式。這個程式庫也提供偵測元素是否處於全螢幕模式的方法,以及文件是否處於可要求全螢幕模式的狀態。
詳情請參閱這份 MDN 專用全螢幕 API 指南。
CSS :has()
選取器
將 Baseline 2023 設為 :has()
選取器,這個選取器會在 12 月 19 日的 Firefox 121 中登陸。在其他用途中,這個選取器可以當做「父項選取器」,讓您根據其中的內容選取元素。舉例來說,您可以根據元素是否包含圖片,套用不同的 CSS。
詳情請參閱 :has(): 系列選取器。
今年加入 Baseline 的其他功能
今年推出的其他功能包括:
- 可建構的樣式表
- CSS 中的複雜 N 子項選取器
- 媒體查詢的範圍語法
- 匯入地圖
- 多個 CSS 多媒體廣告值
- @counter-style
counter-set
CSS 屬性linear()
加/減速函式- 來源私人檔案系統 (OPFS)
- CSS 巢狀結構,包括加入輕鬆剖析的變更。
- CSS
:dir()
虛擬類別選取器 - CSS
cap
長度單位 - CSS 遮蓋
- HTML 影片
<source>
元素的媒體查詢支援 - HTML
<search>
元素 - 延遲載入
<iframe>
元素 (於 12 月 19 日登陸 Firefox 121) lh
和rlh
CSS 行高單元
其中許多功能透過 Interop 2023 的協同合作工作實現了互通性。很高興看到這些功能如何實現這個過程,並成為最新推出的基準功能,進而讓這些功能有時間開放使用。如此一來,就能更清楚決定何時要在自己的專案中採用功能。