2022年你不知道的CSS新特性
雖然2022年已經(jīng)過去了三分之一，但是也不妨礙我們來聊一聊，在今年CSS都會新增哪些新特性。其中有些特性已經(jīng)在主流瀏覽器中得到了支持，有些還在實驗性階段，但也會隨著時間的推移慢慢而來。
本文介紹的內(nèi)容大多數(shù)整理于\@Bramus[1]發(fā)表的CSS in 2022[2]，有些在其基礎(chǔ)上進行了完善，并增加了相應(yīng)的實踐例子。接下來讓我們逐個來了解下吧。
容器查詢（Container Queries）
介紹
容器查詢@container類似于媒體查詢@media，區(qū)別在于查詢所依據(jù)的對象不同。媒體查詢依據(jù)的是瀏覽器的視窗大小，容器查詢依據(jù)的是元素的父元素或者祖先元素的大小。
有關(guān)容器查詢的屬性一共有三個，分別是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>
復(fù)制代碼
當父元素的寬度為200px的時候，背景色是紅色的。
當父元素的寬度增加到400px的時候，@container查詢起到了效果，文字的背景色會變成綠色的。
詳細的關(guān)于每個屬性的取值及具體含義，可以參考這里[3]
瀏覽器支持情況
實踐
使用chrome瀏覽器，需要手動在chrome://flags頁面開啟Enable CSS Container Queries設(shè)置。
https://code.juejin.cn/pen/7096467334268715021
級聯(lián)層（Cascade Layers）
介紹
有時候當我們想要覆蓋組件原來的樣式來應(yīng)用我們自定義的樣式時，一般情況下我們會采用優(yōu)先級更高的樣式名來進行覆蓋（或ID選擇器或嵌套很多層），有時候又不得不應(yīng)用!important ，這樣很容易造成樣式的混亂，不好管理。
級聯(lián)層的誕生就是為了解決上述問題，它可以讓CSS樣式按照我們定義好的級聯(lián)順序展示，起到控制不同樣式間的優(yōu)先級的作用。
使用方法
通過@layer可以定義一個級聯(lián)層。如下我們就定義了一個名字為A的級聯(lián)層。
<template>
<div id="app">hello world</div>
</template>
<style>
#app {
width:100px;
height: 100px;
}
// 創(chuàng)建一個名為 A 的級聯(lián)層
@layer A {
div {
background-color: red;
}
}
</style>
復(fù)制代碼
當有多個級聯(lián)層的時候，我們可以先把所有級聯(lián)層的名字起好，然后再一一補充規(guī)則。
@layer A, B, C;
@layer A {
div {
background-color: red;
}
}
@layer B {
#app {
background-color: blue;
}
}
@layer C {
div {
background-color: green;
}
}
復(fù)制代碼
多個級聯(lián)層的優(yōu)先級順序為越寫在后面的優(yōu)先級越高，所以級聯(lián)層C擁有最高的優(yōu)先級，即使我們在級聯(lián)層B中使用了ID選擇器。所以最后div將展示綠色的背景色。
瀏覽器支持情況
實踐
https://code.juejin.cn/pen/7093816225150533640
顏色函數(shù)（Color Functions）
CSS Color Module Level 5[4]新增了兩個有關(guān)顏色的函數(shù)：color-mix() 和 color-contrast() ，并且擴展了之前存在的其他顏色函數(shù)（例如rgb()、hsl()、hwb()等）的相關(guān)語法。
之前我們定義一個顏色，需要明確的指定每一個通道的絕對顏色。新的規(guī)范允許我們首先定義一個基礎(chǔ)色，然后在它之上進行相對顏色的變換。比如：
--accent: lightseagreen;
--complement: hsl(from var(--accent) calc(h + 180deg) s l);
復(fù)制代碼
lightseagreen的hsl(177deg 70% 41%)，因此變換后的hsl(357deg 70% 41%)。
color-mix()
color-mix()可以在給定的色彩空間內(nèi)將兩個顏色混合成一個。
它接收3個參數(shù)，第一個參數(shù)為指定的插值方法，第二個和第三個參數(shù)為需要混合的顏色值。
color-mix(in lch, purple 50%, plum 50%)
color-mix(in lch, purple 50%, plum)
復(fù)制代碼
color-contrast()
color-contrast() 用來查找顏色列表中與給定的顏色（一般為背景色）相比較，對比度最高的顏色并將其輸出。
在語法上，通過關(guān)鍵字vs來區(qū)分需要進行對比的基礎(chǔ)顏色與顏色列表，如果有目標對比度閾值設(shè)置，則通過關(guān)鍵字to與顏色列表進行分隔。（目標對比度閾值用來控制對比值的最小范圍，如果存在，會選取第一個超出該閾值的顏色輸出，即使它不是列表中對比度最高的那個。）
在計算對比度時，會把所有的顏色都轉(zhuǎn)換到CIE XYZ[5]色彩空間。然后通過以下公式來計算最終的對比度:
contrast = (Yl + 0.05) / (Yd + 0.05)，其中Yl為列表中顏色的明度，Yd為基礎(chǔ)色的明度
復(fù)制代碼
舉例
講了這么多概念，下面我們來舉個例子：
color-contrast(wheat vs tan, sienna, #d2691e, darkgreen, maroon to AA-large)
復(fù)制代碼
上述代碼將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
復(fù)制代碼
通過計算可以看出，darkgreen是對比度最高的顏色，但是我們有to AA-large的限制，所以會輸出sienna，因為sienna是第一個超出AA-large（常量3）的。
瀏覽器支持情況
偽類選擇器:has()
介紹
:has()選擇器也可以叫做父類選擇器，它接受一個選擇器組作為參數(shù)。有了它，我們可以給有匹配子元素的父類應(yīng)用一些樣式。例如：
a:has(span) // 只會匹配包含 span 子元素的 a 元素：
復(fù)制代碼
瀏覽器支持情況
實踐
使用chrome瀏覽器，需要手動在chrome://flags頁面開啟Experimental Web Platform features設(shè)置。
https://code.juejin.cn/pen/7094638836466221069
accent-color
介紹
accent-color屬性可以在不改變?yōu)g覽器默認表單組件基本樣式的前提下重置表單組件的顏色。目前支持的HTML元素有：
<input type=”checkbox”><input type=”radio”><input type=”range”><progress>
瀏覽器支持情況
實踐
https://code.juejin.cn/pen/7085562391907270690
媒體查詢（Media Query Ranges）
介紹
媒體查詢不是一個新概念，這次在語法上進行了優(yōu)化。原來通過max-width和min-width來實現(xiàn)的現(xiàn)在可以通過數(shù)學(xué)運算符>=、<=來實現(xiàn)。相比與原來的寫法，新的語法更容易理解一些。比如要實現(xiàn)750px以下屏幕的樣式，原來需要應(yīng)用@media (max-width: 750px)，現(xiàn)在可以直接寫成@media (width <= 750px)。
同樣，數(shù)學(xué)運算符的寫法也適用于上面介紹的容器查詢@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) {
…
}
復(fù)制代碼
結(jié)語
以上就是2022年已經(jīng)新增或者即將新增的CSS新特性，小伙伴們對哪個最感興趣呢？快去自己實踐一下吧~
關(guān)于本文
來自：陽呀呀
https://segmentfault.com/a/1190000041926813