雖然2022年已經過去了三分之一，但是也不妨礙我們來聊一聊，在今年CSS都會新增哪些新特性。其中有些特性已經在主流瀏覽器中得到了支援，有些還在實驗性階段，但也會隨著時間的推移慢慢而來。
本文介紹的內容大多數整理於@Bramus發表的CSS in 2022，有些在其基礎上進行了完善，並增加了相應的實踐例子。接下來讓我們逐個來了解下吧。
容器查詢（Container Queries）
介紹
容器查詢@container類似於媒體查詢@media，區別在於查詢所依據的物件不同。媒體查詢依據的是瀏覽器的視窗大小，容器查詢依據的是元素的父元素或者祖先元素的大小。
有關容器查詢的屬性一共有三個，分別是container-type、container-name、container。
container-type：標識一個作為被查詢的容器，取值範圍為size、inline-size、block-size、style、state
container-name：被查詢的容器的名字
container：container-type和container-name的簡寫
使用方法
首先需要使用container-type或者container屬性指定一個元素作為被查詢的容器。然後使用@container進行容器查詢。
<template>
<div id="app">
<div>
<button @click="add" id="add">+</button>
<button @click="sub" id="sub">-</button>
</div>
<div class="demo">
<a>我的背景色會隨著demo元素的寬度而變化</a>
</div>
</div>
</template>
<style>
.demo {
width: 200px;
height: 200px;
background: red;
container: inline-size;
}
@container (inline-size > 300px) {
a {
background: green;
}
}
</style>當父元素的寬度為200px的時候，背景色是紅色的。
當父元素的寬度增加到400px的時候，@container查詢起到了效果，文字的背景色會變成綠色的。
詳細的關於每個屬性的取值及具體含義，可以參考這裡
瀏覽器支援情況
實踐
使用chrome瀏覽器，需要手動在chrome://flags頁面開啟Enable CSS Container Queries設定。
https://code.juejin.cn/pen/70...
級聯層（Cascade Layers）
介紹
有時候當我們想要覆蓋元件原來的樣式來應用我們自定義的樣式時，一般情況下我們會採用優先順序更高的樣式名來進行覆蓋（或ID選擇器或巢狀很多層），有時候又不得不應用!important ，這樣很容易造成樣式的混亂，不好管理。
級聯層的誕生就是為了解決上述問題，它可以讓CSS樣式按照我們定義好的級聯順序展示，起到控制不同樣式間的優先順序的作用。
使用方法
通過@layer可以定義一個級聯層。如下我們就定義了一個名字為A的級聯層。
<template>
<div id="app">hello world</div>
</template>
<style>
#app {
width:100px;
height: 100px;
}
// 建立一個名為 A 的級聯層
@layer A {
div {
background-color: red;
}
}
</style>當有多個級聯層的時候，我們可以先把所有級聯層的名字起好，然後再一一補充規則。
@layer A, B, C;
@layer A {
div {
background-color: red;
}
}
@layer B {
#app {
background-color: blue;
}
}
@layer C {
div {
background-color: green;
}
}多個級聯層的優先順序順序為越寫在後面的優先順序越高，所以級聯層C擁有最高的優先順序，即使我們在級聯層B中使用了ID選擇器。所以最後div將展示綠色的背景色。
瀏覽器支援情況
實踐
https://code.juejin.cn/pen/70...
顏色函式（Color Functions）
CSS Color Module Level 5新增了兩個有關顏色的函式：color-mix() 和 color-contrast() ，並且擴充套件了之前存在的其他顏色函式（例如rgb()、hsl()、hwb()等）的相關語法。
之前我們定義一個顏色，需要明確的指定每一個通道的絕對顏色。新的規範允許我們首先定義一個基礎色，然後在它之上進行相對顏色的變換。比如：
--accent: lightseagreen;
--complement: hsl(from var(--accent) calc(h + 180deg) s l);lightseagreen的hsl(177deg 70% 41%)，因此變換後的hsl(357deg 70% 41%)。
color-mix()
color-mix()可以在給定的色彩空間內將兩個顏色混合成一個。
它接收3個引數，第一個引數為指定的插值方法，第二個和第三個引數為需要混合的顏色值。
color-mix(in lch, purple 50%, plum 50%)
color-mix(in lch, purple 50%, plum)color-contrast()
color-contrast() 用來查詢顏色列表中與給定的顏色（一般為背景色）相比較，對比度最高的顏色並將其輸出。
在語法上，通過關鍵字vs來區分需要進行對比的基礎顏色與顏色列表，如果有目標對比度閾值設定，則通過關鍵字to與顏色列表進行分隔。（目標對比度閾值用來控制對比值的最小範圍，如果存在，會選取第一個超出該閾值的顏色輸出，即使它不是列表中對比度最高的那個。）
在計算對比度時，會把所有的顏色都轉換到CIE XYZ色彩空間。然後通過以下公式來計算最終的對比度:
contrast = (Yl + 0.05) / (Yd + 0.05)，其中Yl為列表中顏色的明度，Yd為基礎色的明度舉例
講了這麼多概念，下面我們來舉個例子：
color-contrast(wheat vs tan, sienna, #d2691e, darkgreen, maroon to AA-large)上述程式碼將wheat與tan、sienna、#d2691e、darkgreen、maroon進行對比度的比較，輸出第一個超出AA-large（常量3）的顏色。
具體的比較方法如下：
wheat (#f5deb3), the background, has relative luminance 0.749
tan (#d2b48c) has relative luminance 0.482 and contrast ratio 1.501
sienna (#a0522d) has relative luminance 0.137 and contrast ratio 4.273
#d2691e has relative luminance 0.305 and contrast ratio 2.249
darkgreen (#006400) has relative luminance 0.091 and contrast ratio 5.662通過計算可以看出，darkgreen是對比度最高的顏色，但是我們有to AA-large的限制，所以會輸出sienna，因為sienna是第一個超出AA-large（常量3）的。
瀏覽器支援情況
偽類選擇器:has()
介紹
:has()選擇器也可以叫做父類選擇器，它接受一個選擇器組作為引數。有了它，我們可以給有匹配子元素的父類應用一些樣式。例如：
a:has(span) // 只會匹配包含 span 子元素的 a 元素：瀏覽器支援情況
實踐
使用chrome瀏覽器，需要手動在chrome://flags頁面開啟Experimental Web Platform features設定。
https://code.juejin.cn/pen/70...
accent-color
介紹
accent-color屬性可以在不改變瀏覽器預設表單元件基本樣式的前提下重置表單元件的顏色。目前支援的HTML元素有：
<input type=”checkbox”><input type=”radio”><input type=”range”><progress>
瀏覽器支援情況
實踐
https://code.juejin.cn/pen/70...
媒體查詢（Media Query Ranges）
介紹
媒體查詢不是一個新概念，這次在語法上進行了優化。原來通過max-width和min-width來實現的現在可以通過數學運算子>=、<=來實現。相比與原來的寫法，新的語法更容易理解一些。比如要實現750px以下螢幕的樣式，原來需要應用@media (max-width: 750px)，現在可以直接寫成@media (width <= 750px)。
同樣，數學運算子的寫法也適用於上面介紹的容器查詢@container中。
舉例
// 原寫法
@media (max-width: 750px) {
…
}
@media (min-width: 750px) {
…
}
@media (min-width: 375px) and (max-width: 750px) {
…
}
// 新寫法
@media (width <= 750px) {
…
}
@media (width >= 750px) {
…
}
@media (375px <= width <= 750px) {
…
}結語
以上就是2022年已經新增或者即將新增的CSS新特性，小夥伴們對哪個最感興趣呢？快去自己實踐一下吧~