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