2023 年你不知道的 CSS 新特性

在今年CSS都會新增哪些新特性。其中有些特性已經在主流瀏覽器中得到了支持，有些還在實驗性階段，但也會隨着時間的推移慢慢而來。

本文介紹的內容大多數整理於 @Bramus[1] 發表的 CSS in 2022[2]，有些在其基礎上進行了完善，並增加了相應的實踐例子。接下來讓我們逐個來了解下吧。

容器查詢（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查詢起到了效果，文字的背景色會變成綠色的。

詳細的關於每個屬性的取值及具體含義，可以參考這裏 [3]

瀏覽器支持情況

實踐

使用chrome瀏覽器，需要手動在chrome://flags頁面開啓Enable CSS Container Queries設置。

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

級聯層（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/7093816225150533640

顏色函數（Color Functions）

CSS Color Module Level 5[4] 新增了兩個有關顏色的函數：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[5] 色彩空間。然後通過以下公式來計算最終的對比度:

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/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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/fH7ZPMMat3Sppgn-CWm07g

猜你喜歡