Baseline 即將在 caniuse.com 上推出!本文將介紹 並探索整合後 2023 年基準。
有了新的基準定義, 是功能生命週期中的兩個階段:新推出時, 30 個月後正式發布。功能成為 互通性時,在下列項目可互通的基準值 瀏覽器:
- Safari (macOS 和 iOS)
- Firefox (電腦和 Android)
- Chrome (電腦和 Android)
- 邊緣 (電腦)
基準降落在「我可以使用」上
釐清功能可用性的下一步:基準是 一路走來,終於「我可使用它」造訪「我能使用」的部分網頁時,你會看到 標記,指出該功能是否可在 Baseline 上執行。
Baseline 新推出的功能也會顯示標記 應用程式啟動的一年任何可以互通的 今年的核心瀏覽器組合是 Baseline 2023 的一部分。
下文將介紹達成這項里程碑的功能 在 2023 年的研究期間這些功能 Baseline 2023:現已推出。
大小容器查詢和容器查詢單位大小
大小容器查詢 可讓您查詢元素的大小 可讓您查詢可視區域的大小製作可重複使用的元件 可讓您建立能回應區域大小的元件 打造適合自己的應用程式
下列資訊卡的設計會根據元件寬度而改變。 詳情請參閱容器查詢如何在穩定版瀏覽器中導入。
新的色域和功能
CSS 現在支援色彩空間,可讓您使用 sRGB 色域以外的顏色。 也就是說,你可以使用 HD 高畫質的顏色,支援 HD (高畫質) 螢幕 可以看出
全新色彩模型
現在採用基準,顏色函式為 lch()
、lab()
、oklch()
和 oklab()
提供 LCH、Lab、OKLCH 和 OKLab 色彩模型的存取權。
![漸層.style 編輯器的螢幕截圖,有粉色到藍色的鮮豔漸層。](https://web.developers.google.cn/static/blog/baseline2023/image/gradient-style.png?authuser=19&hl=zh-tw)
color-mix()
函式
此外,新的色彩函式已成為 Baseline 的一部分。color-mix()
函式可讓您在任何色彩空間中混合使用一種顏色。
在下列 CSS 中,25% 的藍色合併為白色,位於 srgb 色域。
.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,可用於壓縮及解壓縮資料串流。應用程式 因此不再需要加入壓縮程式庫
詳情請參閱所有瀏覽器現在都支援壓縮串流。
螢幕外畫布
在螢幕外畫布之前,畫布繪圖功能與 <canvas>
連結
元素,讓它直接依附於 DOM。螢幕外畫布分離
將畫布移出畫面,藉此從 Canvas API 使用 DOM。
多虧有這種分離,「OffscreenCanvas」的算繪作業已從 所以相較於一般畫布,此 DOM 提升了執行速度 如此一來,這兩者之間就不會發生同步處理也可用於移動 即使沒有可用的 DOM,系統卻無法將轉譯工作 提升應用程式回應速度。
詳情請參閱 ScreenCanvas - 利用網路工作站加快畫布操作速度
預先載入模組
預先載入模組可以縮短下載和處理時間。新增
rel="modulepreload"
敬上
指向連結元素參照 JavaScript 模組的連結元素,而瀏覽器則取得
模組,剖析及編譯該模組,並將結果放到模組對應檔中
適合執行的版本
詳情請參閱預先載入模組。
CSS 中的三角函式
在 2023 年推出 CSS 值和單元層級 4 的三角函數
規格變成可互通的這表示 sin()
、cos()
、
tan()
、asin()
、acos()
、atan()
和 atan2()
是 2023 年基準版本。
瞭解如何使用這些函式,並探索其用途: CSS 中的三角函式。
內部屬性
將 DOM 元素標示為 inert
時,會移除以下項目中的動作或互動:
基礎架構inert 屬性會使瀏覽器忽略元素:
- 如果使用者點選元素,不會觸發
click
事件。 - 元素無法成為焦點。
- 該元素及其內容已從無障礙樹狀結構中排除。
將這個屬性新增至畫面外或隱藏的元素。如要 詳情請參閱內部屬性。
CSS 格線版面配置中的子格線
grid-template-columns
和 grid-template-rows
的 subgrid
值可讓您
您會在巢狀格線中使用上層格線中定義的軌跡。也就是說,您可以
將不同的巢狀格線中的元素彼此對齊。
CSS 子類別中提供了相關範例和連結 介紹子網格用途的其他文章和範例。
數值格式 V3
Intl.NumberFormat V3 是 Intl.NumberFormat 的一組新功能 。額外功能如下:
- 三個可用於設定數字範圍格式的新函式:
formatRange
、 「formatRangeToParts
」和「selectRange
」 - 分組列舉
- 新增四捨五入和精確度選項
- 四捨五入優先順序
- 將字串解讀為小數
- 捨入模式
- 簽署多媒體廣告排除關鍵字
NumberFormat V3 的提案 逐一詳細說明這些新功能
Fullscreen API
全螢幕 API 可讓您將 <video>
等元素置入全螢幕。
模式。requestFullscreen()
Cloud Shell 也提供
偵測元素是否處於全螢幕模式,以及文件是否
可以要求進入全螢幕模式
詳情請參閱 MDN 的 Fullscreen API 指南。
CSS :has()
選取器
只讓基準 2023 成為 :has()
選取器,即可進入 Firefox
121 於 12 月 19 日除了其他用途
父項選取器:可讓您根據內部項目選取元素
基礎架構舉例來說,您可以根據
元素中的圖片
如要瞭解詳情,請參閱 :has(): 家庭選取器。
今年加入 Baseline 的其他功能
今年成為 Baseline 的其他功能包括:
- 可建構的樣式表
- CSS 中複雜的第 n-child 選取器
- 媒體查詢的範圍語法
- 匯入地圖
- 在 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。很期待看到 完成這項作業後,請在 Baseline 中登載最新可用、 自動在計時器上發射計時器這會建立 就能更準確地決定何時在專案中採用功能。