前端大全 - 2022 年你不知道的 CSS 新特性－鑽石舞台

↓推薦關注↓

我們來聊一聊，在今年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><divid="app"><div><button@click="add"id="add">+</button><button@click="sub"id="sub">-</button></div><divclass="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/7096467334268715021

級聯層（Cascade Layers）介紹

有時候當我們想要覆蓋組件原來的樣式來應用我們自定義的樣式時，一般情況下我們會採用優先級更高的樣式名來進行覆蓋（或ID選擇器或嵌套很多層），有時候又不得不應用!important ，這樣很容易造成樣式的混亂，不好管理。

級聯層的誕生就是為了解決上述問題，它可以讓CSS樣式按照我們定義好的級聯順序展示，起到控制不同樣式間的優先級的作用。

使用方法

通過@layer可以定義一個級聯層。如下我們就定義了一個名字為A的級聯層。

<template><divid="app">helloworld</div></template><style>#app{width:100px;height:100px;}//創建一個名為A的級聯層@layerA{div{background-color:red;}}</style>

當有多個級聯層的時候，我們可以先把所有級聯層的名字起好，然後再一一補充規則。

@layerA,B,C;@layerA{div{background-color:red;}}@layerB{#app{background-color:blue;}}@layerC{div{background-color:green;}}

多個級聯層的優先級順序為越寫在後面的優先級越高，所以級聯層C擁有最高的優先級，即使我們在級聯層B中使用了ID選擇器。所以最後div將展示綠色的背景色。

瀏覽器支持情況

實踐

https://code.juejin.cn/pen/7093816225150533640

顏色函數（Color Functions）

CSS Color Module Level 5新增了兩個有關顏色的函數：color-mix() 和 color-contrast() ，並且擴展了之前存在的其他顏色函數（例如rgb()、hsl()、hwb()等）的相關語法。

之前我們定義一個顏色，需要明確的指定每一個通道的絕對顏色。新的規範允許我們首先定義一個基礎色，然後在它之上進行相對顏色的變換。比如：

--accent:lightseagreen;--complement:hsl(fromvar(--accent)calc(h+180deg)sl);

lightseagreen的hsl(177deg 70% 41%)，因此變換後的hsl(357deg 70% 41%)。

color-mix()

color-mix()可以在給定的色彩空間內將兩個顏色混合成一個。

它接收3個參數，第一個參數為指定的插值方法，第二個和第三個參數為需要混合的顏色值。

color-mix(inlch,purple50%,plum50%)color-mix(inlch,purple50%,plum)color-contrast()

color-contrast() 用來查找顏色列表中與給定的顏色（一般為背景色）相比較，對比度最高的顏色並將其輸出。

在語法上，通過關鍵字vs來區分需要進行對比的基礎顏色與顏色列表，如果有目標對比度閾值設置，則通過關鍵字to與顏色列表進行分隔。（目標對比度閾值用來控制對比值的最小範圍，如果存在，會選取第一個超出該閾值的顏色輸出，即使它不是列表中對比度最高的那個。）

在計算對比度時，會把所有的顏色都轉換到CIE XYZ色彩空間。然後通過以下公式來計算最終的對比度:

contrast=(Yl+0.05)/(Yd+0.05)，其中Yl為列表中顏色的明度，Yd為基礎色的明度舉例

講了這麼多概念，下面我們來舉個例子：

color-contrast(wheatvstan,sienna,#d2691e,darkgreen,maroontoAA-large)

上述代碼將wheat與tan、sienna、#d2691e、darkgreen、maroon進行對比度的比較，輸出第一個超出AA-large（常量3）的顏色。

具體的比較方法如下：

wheat(#f5deb3),thebackground,hasrelativeluminance0.749tan(#d2b48c)hasrelativeluminance0.482andcontrastratio1.501sienna(#a0522d)hasrelativeluminance0.137andcontrastratio4.273#d2691ehasrelativeluminance0.305andcontrastratio2.249darkgreen(#006400)hasrelativeluminance0.091andcontrastratio5.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/7094638836466221069

accent-color介紹

accent-color屬性可以在不改變瀏覽器默認表單組件基本樣式的前提下重置表單組件的顏色。目前支持的HTML元素有：

瀏覽器支持情況

實踐

https://code.juejin.cn/pen/7085562391907270690

媒體查詢（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新特性，小夥伴們對哪個最感興趣呢？快去自己實踐一下吧~

作者：陽呀呀

https://segmentfault.com/a/1190000041926813

- EOF -