2022年的新CSS功能 — Smashing

container查詢
要實現容器查詢，我們需要指定一個元素作為我們的容器，使用容器屬性（容器型別和容器名稱的簡寫）。
容器型別可以是寬度、高度、inline-size或block-size。inline-size和block-size是邏輯屬性，根據文件的書寫模式可能產生不同的結果。

假設有一容器：

main, aside {
    container: inline-size;
}

@container (inline-size > 30em) {
    .card {
        display: flex;
    }
}

CSS Containment Level 3 規範目前處於工作草案中，這意味著語法可能隨時改變——事實上，自從去年發表了一些關於容器查詢的文章以來，它已經改變了。此處的示例與撰寫本文時建議的語法一致。
Chrome 聲稱支援標誌後面的容器查詢，但工作實現似乎與當前規範不一致。有一個 polyfill，但它不適用於最新的語法。所以簡短的回答是“不”，我肯定會敦促你在生產中使用它們之前等待一段時間。但是容器查詢背後有很多動力，所以我希望很快會有更多的普遍支援。
 

:has() 
為含有<h2>的<section>元素設計樣式：

section:has(h2) {
    background: lightgray;
}

section:has(h2) img {
    border: 5px solid lime;
}

@when/@else
CSS 中的條件規則，類似於其他程式語言中的 if/else 邏輯。例如，它可以使編寫複雜的媒體查詢更加合乎邏輯。
選擇@when而不是@if語句是避免與 Sass 衝突。

我們可以查詢多個媒體條件或支援的功能，例如使用者的視口是否超過某個寬度，以及他們的瀏覽器是否支援子網格。當使用@when/@else時，我們把查詢規則中的@去掉：

@when media(min-width: 30em) and supports(display: subgrid) {
    /* Styles for viewports over 30em, where the browser also supports subgrid */
} @else {
    /* Styles for browsers that do not meet the condition */
}
還沒有。這是非常早期的事情，而且仍在討論中。我不期望瀏覽器的支援在今年被廣泛推廣，但這絕對是一個值得關注的問題。
 

accent-color
想想核取方塊、單選按鈕、範圍輸入和進度條，所有瀏覽器都以略微不同的風格方式呈現它們，accent-color屬性可以快速輕鬆地將我們的品牌顏色推廣到某些表單輸入。accent-color使我們能夠保留瀏覽器的預設輸入，但應用顏色以適合我們的品牌。
使用方法很簡單，而且該屬性是繼承的，所以你可以在根層設定它，以便在所有地方應用它。

:root {
    accent-color: lime;
}

form {
    accent-color: lime;
}

input[type="checkbox"] {
    accent-color: hotpink;
}

新的 CSS 顏色函式
您可能已經熟悉 Hex、RGB 和 HSL 顏色格式。CSS Color Module Levels 4和5包括一整套新的顏色函式，使我們能夠以前所未有的方式在 CSS 中指定和操作顏色。它們包括：

• hwb()：色相、白度、黑度。
• lab()：亮度以及決定色調的 a和b值。
• lch()：亮度、色度、色調。
• color-mix()：將兩種顏色混合在一起。
• color-contrast()：從顏色列表中，輸出與第一個引數相比對比度最高的顏色。
• color()：指定不同顏色空間中的顏色（例如display-p3）。

.my-element {
  background-color: lch(80% 100 50); // opaque color
}

.my-element {
  background-color: lch(80% 100 50 / 0.5); // color with 50% transparency
}

級聯層 
級聯層給了我們更多的權力來管理CSS的 "級聯 "部分。目前，有幾個因素決定了哪些樣式會被應用到你的CSS程式碼中，包括選擇器的特殊性和外觀順序。
級聯層允許我們有效地將我們的CSS分成幾塊（或 "層"，如果你願意的話）：
在順序較低的層中的程式碼將優先於較高層中的程式碼，即使較高層中的選擇器具有較高的特異性。
我喜歡把它看成是一種類似於級聯的z-index。如果你理解了z-index的工作原理，你可能會很快掌握級聯層的情況。

正如Bramus在他的教程中解釋的那樣，你可以建立與ITCSS方法一致的級聯層：

/* Create the layers, in the desired order */
@layer reset, base, theme;

/* Append the CSS to each of the layers */
@layer reset {
  /* Append to 'reset' layer */
}

@layer base {
  /* Append to 'base' layer */
  h1.title {
      font-size: 5rem;
  }
}

@layer theme {
  /* Append to 'theme' layer */
  h1 {
      font-size: 3rem;
  }
}

Subgrid
幾年前，當CSS網格首次被討論時，許多開發者認為它可以使我們在一個單一的網格上佈置UI的每個部分，就像我們從設計師那裡得到的典型的12列布局一樣。在實踐中，這將涉及到完全扁平化你的標記，破壞語義--不建議這樣做！。
作為CSS Grid Layout Module 2規範的一部分，subgrid使一個元素能夠繼承其父元素的網格，無論是在行軸還是列軸上。
理論上，你可以一路巢狀網格，將每個元件都對準同一個網格。在現實中，我們可能不需要像我們想象的那樣經常這樣做，因為我們（希望）接受更靈活、更內在的網頁設計，優先考慮內容、使用者體驗和可訪問性，而不是僵硬地遵守網格。但是subgrid對於解決各種UI挑戰仍然是非常有用的。
 
使用Grid的常規屬性指定父元素的網格。在你想繼承父網格的巢狀項上的grid-template-columns或grid-template-rows屬性中使用關鍵字subgrid。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
}

.grid > figure {
    display: grid;
    grid-template-rows: subgrid;
}

.grid figcaption {
    grid-row: 2;
}

滾動時間軸
你可能已經看到了很多很酷的網站，它們實現了花哨的滾動連結動畫。
 想象一下，如果我們能在CSS中實現所有這些功能呢？有了@scroll-timeline，我們就可以做到了：

1. 一個關鍵幀keyframe的動畫。
2. @scroll-timeline 。
3. 我們要做動畫的元素上的animation-timeline屬性（或者在簡明的animation屬性中指定時間線）。

/* Set up keyframe animation */
@keyframes slide {
    to { transform: translateX(calc(100vw - 2rem)); }
}

/* Configure our scroll timeline. Here we're giving it the name `slide-timeline` */
@scroll-timeline slide-timeline {
  source: auto; /* the scrollable element that triggers the scroll-linked animation (the document by default) */
  orientation: vertical; /* the scroll orientation (vertical by default) */
  scroll-offsets: 0%, 100%; /* an array of progress intervals in which the timeline is active */
}

/* Specify the keyframe animation and the scroll timeline */
.animated-element {
  animation: 1s linear forwards slide slide-timeline;
}

@scroll-timeline slide-timeline {
    scroll-offsets: selector(element) end 0, selector(element) start 1;
}

Nesting巢狀
如果你熟悉Sass，你會知道能夠巢狀選擇器的便利性--本質上，在父級規則中寫一個子規則。巢狀可以幫助我們保持程式碼的條理性--儘管如果過度使用，有時會成為一種障礙 現在看來，巢狀終於要進入本地CSS了。

在語法上，它與Sass相似，所以不應該感覺到太多的跳躍。這裡的巢狀規則針對的是一個類別為card的元素中的h2。
 

.card {
    color: red;

    & h2 {
        color: blue;
    }
}