大廠技術(shù)  高級前端  Node進階

點擊上方 程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

本周讀一讀 State of CSS 2022 介紹的 CSS 特性。

概述

2022 已經(jīng)支持的特性

@layer

解決業(yè)務(wù)代碼的 !important 問題。為什么業(yè)務(wù)代碼需要用 !important 解決問題？因為 css 優(yōu)先級由文件申明順序有關(guān)，而現(xiàn)在大量業(yè)務(wù)使用動態(tài)插入 css 的方案，插入的時機與 js 文件加載與執(zhí)行時間有關(guān)，這就導(dǎo)致了樣式優(yōu)先級不固定。

@layer 允許業(yè)務(wù)定義樣式優(yōu)先級，層越靠后優(yōu)先級越高，比如下面的例子，override 定義的樣式優(yōu)先級比 framework 高：

@layer framework, override;

@layer override {
  .title {
    color: white;
  }
}

@layer framework {
  .title {
    color: red;
  }
}

subgrid

subgrid 解決 grid 嵌套 grid 時，子網(wǎng)格的位置、軌跡線不能完全對齊到父網(wǎng)格的問題。只要在子網(wǎng)格樣式做如下定義：

.sub-grid {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

@container

@container 使元素可以響應(yīng)某個特定容器大小。在 @container 出來之前，我們只能用 @media 響應(yīng)設(shè)備整體的大小，而 @container 可以將相應(yīng)局限在某個 DOM 容器內(nèi)：

// 將 .container 容器的 container-name 設(shè)置為 abc
.container {
  container-name: abc;
}

// 根據(jù) abc 容器大小做出響應(yīng)
@container abc (max-width: 200px) {
  .text {
    font-size: 14px;
  }
}

一個使用場景是：元素在不同的 .container 元素內(nèi)的樣式可以是不同的，取決于當(dāng)前所在 .container 的樣式。

hwb

支持 hwb（hue, whiteness, blackness） 定義顏色：

.text {
  color: hwb(30deg 0% 20%);
}

三個參數(shù)分別表示：角度 [0-360]，混入白色比例、混入黑色比例。角度對應(yīng)在色盤不同角度的位置，每個角度都有屬于自己的顏色值，這個函數(shù)非常適合直觀的從色盤某個位置取色。

lch, oklch, lab, oklab, display-p3 等

lch(lightness, chroma, hue)，即亮度、飽和度和色相，語法如：

.text {
  color: lch(50%, 100, 100deg);
}

chroma(飽和度) 指顏色的鮮艷程度，越高色彩越鮮艷，越低色彩越暗淡。hue(色相) 指色板對應(yīng)角度的顏色值。

oklch(lightness, chroma, hue, alpha)，即亮度、飽和度、色相和透明度。

.text {
  color: oklch(59.69% 0.156 49.77 / 0.5);
}

更多的就不一一枚舉說明了，總之就是顏色表達方式多種多樣，他們之間也可以互相轉(zhuǎn)換。

color-mix()

css 語法支持的 mix，類似 sass 的 mix() 函數(shù)功能：

.text {
  color: color-mix(in srgb, #34c9eb 10%, white);
}

第一個參數(shù)是顏色類型，比如 hwb、lch、lab、srgb 等，第二個參數(shù)就是要基準(zhǔn)顏色與百分比，第三個參數(shù)是要混入的顏色。

color-contrast()

讓瀏覽器自動在不同背景下調(diào)整可訪問顏色。換句話說，就是背景過深時自動用白色文字，背景過淺時自動用黑色文字：

.text {
  color: color-contrast(black);
}

還支持更多參數(shù)，詳情見 Manage Accessible Design System Themes With CSS Color-Contrast()。

相對顏色語法

可以根據(jù)語法類型，基于某個語法將某個值進行一定程度的變化：

.text {
  color: hsl(from var(--color) h s calc(l - 20%));
}

如上面的例子，我們將 --color 這個變量在 hsl 顏色模式下，將其 l(lightness) 亮度降低 20%。

漸變色 namespace

現(xiàn)在漸變色也支持申明 namespace 了，比如：

.text {
  background-image: linear-gradient(to right in hsl, black, white);
}

這是為了解決一種叫 灰色死區(qū) 的問題，即漸變色如果在色盤穿過了飽和度為 0 的區(qū)域，中間就會出現(xiàn)一段灰色，而指定命名空間比如 hsl 后就可以繞過灰色死區(qū)。

因為 hsl 對應(yīng)色盤，漸變的邏輯是在色盤上沿圓弧方向繞行，而非直接穿過圓心（圓心飽和度低，會呈現(xiàn)灰色）。

accent-color

accent-color 主要對單選、多選、進度條這些原生輸入組件生效，控制的是它們的主題色：

body {
  accent-color: red;
}

比如這樣設(shè)置之后，單選與多選的背景色會隨之變化，進度條表示進度的橫向條與圓心顏色也會隨之變化。

inert

inert 是一個 attribute，可以讓擁有該屬性的 dom 與其子元素?zé)o法被訪問，即無法被點擊、選中、也無法通過快捷鍵選中：

<div inert>...</div>

COLRv1 Fonts

COLRv1 Fonts 是一種自定義顏色與樣式的矢量字體方案，瀏覽器支持了這個功能，用法如下：

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

上面的例子我們引入了矢量圖字體文件，并通過 @font-palette-values --colorized 自定義了一個叫做 colorized 的調(diào)色板，這個調(diào)色板通過 base-palette: 0 定義了其繼承第一個內(nèi)置的調(diào)色板。

使用上除了 font-family 外，還需要定義 font-palette 指定使用哪個調(diào)色板，比如上面定義的 --colorized。

視口單位

除了 vh、vw 等，還提供了 dvh、lvh、svh，主要是在移動設(shè)備下的區(qū)別：

• dvh: dynamic vh, 表示內(nèi)容高度，會自動忽略瀏覽器導(dǎo)航欄高度。
• lvh: large vh, 最大高度，包含瀏覽器導(dǎo)航欄高度。
• svh: small vh, 最小高度，不包含瀏覽器導(dǎo)航欄高度。

:has()

可以用來表示具有某些子元素的父元素：

.parent:has(.child) {
}

表示選中那些有用 .child 子節(jié)點的 .parent 節(jié)點。

即將支持的特性

@scope

可以讓某個作用域內(nèi)樣式與外界隔絕，不會繼承外部樣式：

@scope (.card) {
  header {
    color: var(--text);
  }
}

如上定義后，.card 內(nèi) header 元素樣式就被確定了，不會受到外界影響。如果我們用 .card { header {} } 來定義樣式，全局的 header {} 樣式定義依然可能覆蓋它。

樣式嵌套

@nest 提案時 css 內(nèi)置支持了嵌套，就像 postcss 做的一樣：

.parent {
  &:hover {
    // ...
  }
}

prefers-reduced-data

@media 新增了 prefers-reduced-data，描述用戶對資源占用的期望，比如 prefers-reduced-data: reduce 表示期望僅占用很少的網(wǎng)絡(luò)帶寬，那我們可以在這個情況下隱藏所有圖片和視頻：

@media (prefers-reduced-data: reduce) {
  picture,
  video {
    display: none;
  }
}

也可以針對 reduce 情況降低圖片質(zhì)量，至于要壓縮多少效果取決于業(yè)務(wù)。

自定義 media 名稱

允許給 @media 自定義名稱了，如下定義了很多自定義 @media：

@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

我們就可以按照自定義名稱使用了：

@media (--OSdark) {
  :root {
    …
  }
}

media 范圍描述支持表達式

以前只能用 @media (min-width: 320px) 描述寬度不小于某個值，現(xiàn)在可以用 @media (width >= 320px) 代替了。

@property

@property 允許拓展 css 變量，描述一些修飾符:

@property --x {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

上面的例子把變量 x 定義為長度類型，所以如果錯誤的賦值了字符串類型，將會沿用其 initial-value。

scroll-start

scroll-start 允許定義某個容器從某個位置開始滾動：

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snapped

:snapped 這個偽類可以選中當(dāng)前滾動容器中正在被響應(yīng)的元素：

.card:snapped {
  --shadow-distance: 30px;
}

這個特性有點像 IOS select 控件，上下滑動后就像個左輪槍一樣轉(zhuǎn)動元素，最后停留在某個元素上，這個元素就處于 :snapped 狀態(tài)。同時 JS 也支持了 snapchanging 與 snapchanged 兩種事件類型。

:toggle()

只有一些內(nèi)置 html 元素?fù)碛?:checked 狀態(tài)，:toggle 提案是用它把這個狀態(tài)拓展到每一個自定義元素：

button {
  toggle-trigger: lightswitch;
}

button::before {
  content: "?? ";
}
html:toggle(lightswitch) button::before {
  content: "?? ";
}

上面的例子把 button 定義為 lightswitch 的觸發(fā)器，且定義當(dāng) lightswitch 觸發(fā)或不觸發(fā)時的 css 樣式，這樣就可以實現(xiàn)點擊按鈕后，黑臉與黃臉的切換。

anchor()

anchor() 可以將沒有父子級關(guān)系的元素建立相對位置關(guān)系，更詳細的用法可以看 CSS Anchored Positioning。

selectmenu

selectmenu 允許將任何元素添加為 select 的 option：

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

還支持更復(fù)雜的語法，比如對下拉內(nèi)容分組：

<selectmenu class="my-custom-select">
  <div slot="button">
    <span class="label">Choose a plant</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <button behavior="button"></button>
  </div>
  <div slot="listbox">
    <div popup behavior="listbox">
      <div class="section">
        <h3>Flowers</h3>
        <option>Rose</option>
        <option>Lily</option>
        <option>Orchid</option>
        <option>Tulip</option>
      </div>
      <div class="section">
        <h3>Trees</h3>
        <option>Weeping willow</option>
        <option>Dragon tree</option>
        <option>Giant sequoia</option>
      </div>
    </div>
  </div>
</selectmenu>

總結(jié)

CSS 2022 新特性很大一部分是將 HTML 原生能力暴露出來，賦能給業(yè)務(wù)自定義，不過如果這些狀態(tài)完全由業(yè)務(wù)來實現(xiàn)，比如 Antd <Select> 組件早已實現(xiàn)自定義下拉選項與樣式，既然 HTML 沒有提供自定義能力，就按照其交互用 DIV + JS 模擬一套實現(xiàn)出來，定制空間更大。

但也有很多能力依賴瀏覽器實現(xiàn)，或者本身更適合實現(xiàn)在 CSS 側(cè)，比如 @scope、subgrid、對顏色的處理等。

討論地址是：精讀《State of CSS 2022》· Issue #442 · dt-fe/weekly