技術文章 » 2022年你值得了解的幾個CSS新特性（收藏學習）

2022年你值得了解的幾個CSS新特性（收藏學習）

2022-03-17 13:00:54
本篇文章給大家分享幾個2022年值得期待的、不應該錯過的 新功能，一起收藏學習吧！

對於CSS來說，2022年是非常值得期待的一年，大量的新功能即將出現，有些已經開始登入瀏覽器，有些可能會在2022年獲得瀏覽器的廣泛支援。下面就來看看2022年有哪些值得期待的 CSS 新功能吧！（推薦學習：）

一、容器查詢

1. 基本概念

容器查詢使我們能夠根據其父元素的大小設定元素的樣式，它類似於 @media查詢，不同之處在於它根據容器的大小而不是視口的大小進行判斷。這一直是響應式設計的一個問題，因為我們有時候希望元件能夠適應它的上下文。

2. 使用方法

對於容器查詢，需要使用 container 屬性（它是 container-type 和 container-name 的縮寫）指定一個元素作為容器。container-type 可以是width、height、inline-size、block-size。inline-size 和 block-size 是邏輯屬性，根據檔案的寫入模式，它們可能會產生不同的結果。

main, aside {
    container: inline-size;
}

可以使用類似於媒體查詢的方式來使用@container。需要注意，兩者在括號中表達規則的方式有所不同（在容器查詢中應該使用 inline-size > 30em 而不是 min-width: 30em）。這是媒體查詢 4 級規範的一部分。當容器寬度大於 30rem 時，就切換到 flex 佈局：

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

CSS Containment Level 3 規範目前處於工作草案中，這意味著語法可能隨時改變。

3. 當前狀態

目前容器查詢在主流瀏覽器是不可用的，可以期待一下容器查詢在瀏覽器的實現。

CSS Containment Module Level 3 （官方規範）：https://www.w3.org/TR/css-contain-3

二、:has()

1. 基本概念

:has()通常被稱為「父選擇器」，這個偽類使我們能夠根據其後代選擇一個元素。它有一些非常有趣的用例。例如，可以根據影象是否包含 <figcaption>，而在<figure>中對影象進行不同的樣式設定。

2. 使用方法

要設定包含<h2>的<section>元素的樣式，可以執行以下操作：

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

當 <img> 的父級 <section> 包含 <h2>時，設定 <img>的樣式：

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

3 當前狀態

目前還沒有主流瀏覽器支援該屬性，但可以在 Safari 技術預覽版中使用它。

Safari 技術預覽版：https://developer.apple.com/safari/technology-preview/

CSS Selectors Level 4 （官方規範）：https://www.w3.org/TR/selectors-4/

三、@when/@else

1. 基本概念

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

2. 使用方法

可以查詢多種媒體條件或支援的功能，例如使用者的視口是否超過一定寬度，使用者瀏覽器是否支援 subgrid。

@when media(min-width: 30em) and supports(display: subgrid) {
    
} @else {
    
}

3. 當前狀態

現在改屬性還沒有在瀏覽器得到支援。現在還為時過早，仍在討論中。預計今年不會廣泛被瀏覽器支援，但它肯定是值得關注的一個非常實用的屬性。

CSS Conditional Rules Module Level 5（官方規範）：https://www.w3.org/TR/css-conditional-5

四、accent-color

1. 基本概念

color-scheme 屬性允許元素指示它可以輕鬆呈現的配色方案。作業系統配色方案的常見選擇是「亮」和「暗」，或者是「白天模式」和「夜間模式」。當使用者選擇其中一種配色方案時，作業系統會對使用者介面進行調整。這包括表單控制元件、卷軸和 CSS 系統顏色的使用值。

2. 使用方法

用法很簡單，而且該屬性是可繼承的。所以可以在根級別設定它，以在任何地方應用它：

:root {
    accent-color: lime;
}

可以在單個元素上使用：

form {
    accent-color: lime;
}

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

3. 當前狀態

目前，accent-color 在 Chrome、Edge、Firefox 和 Safari 技術預覽版中已經得到了支援。不支援該屬性的的瀏覽器會直接使用預設顏色，並且輸入是完全可用的。

CSS Basic User Interface Module Level 4（官方規範）：https://www.w3.org/TR/css-ui-4/

五、顏色函數

1. 基本概念

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

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

2. 使用方法

hwb(), lab() 和 lch() 的使用方式與我 rgb() 和 hsl() 函數基本相同，都有一個可選的alpha 引數：

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

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

color-mix() 將其他兩種顏色混合後輸出一種顏色。我們需要指定顏色插值方法作為第一個引數：

.my-element {
  background-color: color-mix(in lch, blue, lime);
}

color-contrast() 需要一個基色來比較其他顏色。它將輸出對比度最高的顏色，或者在提供額外關鍵字的情況下，輸出列表中符合相應對比度的第一種顏色：

/*  輸出對比度最高的顏色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue);
}

/* 輸出符合AA對比度的第一種顏色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}

3. 當前狀態

Safari 目前在瀏覽器支援方面處於領先地位，從版本 15 就開始支援hwb()、 lch()、lab()、color()，color-mix() 和 color-contrast() 可以通過 flag 啟用。Firefox 支援 hwb()，並且還標記了對 color-mix() 和 color-contrast() 的支援。令人驚訝的是，Chrome 現在還不支援這些函數。

在程式碼中提供樣式相容並不難：給定兩種顏色規則，如果瀏覽器不支援第二種顏色規則，它將忽略第二種顏色規則：

.my-element {
    background-color: rgb(84.08% 0% 77.36%);
    background-color: lch(50% 100 331);
}

這樣，當瀏覽器支援該函數時，就可以直接使用了。

CSS Color Module Level 4（官方規範）：https://www.w3.org/TR/css-color-4/

CSS Color Module Level 5（官方規範）：https://www.w3.org/TR/css-color-5

六、層疊層

1. 基本概念

層疊層讓我們有更多的能力來管理CSS的「層疊」部分。目前，有幾個因素決定了 CSS 程式碼中將應用哪些樣式，包括選擇器群眾和出現的順序。層疊層允許我們有效地將CSS分組（或者「分層」）。順序較低的層中的程式碼將優先於較高層中的程式碼，即使較高層中的選擇器具有更高的權重。

2. 使用方法

下面來看看層疊層的基本使用：

/* 按順序建立圖層 */
@layer reset, base, theme;

/* 將CSS新增到每個層 */
@layer reset {
  
}

@layer base {
  h1.title {
      font-size: 5rem;
  }
}

@layer theme {
  h1 {
      font-size: 3rem;
  }
}

theme 層中的CSS字型大小宣告將覆蓋base層中的字型大小宣告，儘管後者選擇器具有更高的權重。

3. 當前狀態

最新版本的 Firefox 已經支援了層疊層，並且可以在 Chrome 和 Edge 中使用 flag 啟用（Chrome 99 版本將全面支援層疊層）。看起來所有主流瀏覽器都在使用這個規範，所以希望儘快能得到更廣泛的支援。

CSS Cascading and Inheritance Level 5（官方規範）：https://www.w3.org/TR/css-cascade-5/

七、subgrid

1. 基本概念

作為 CSS Grid Layout Module 2 規範的一部分，subgrid 允許元素在行軸或列軸上繼承其父元素的網格。subgrid 對於解決各種使用者介面挑戰非常有用。

例如，以下面這個帶有標題的影象為例。標題的長度各不相同，使用 subgrid 可以直接讓它們對齊，而無需設定固定的高度。

2. 使用方法

首先將父元素設定為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;
}

實現效果：

完整程式碼：

html：

<div class="grid">
  <figure>
    <img src='https://images.unsplash.com/photo-1633083018029-bd1d4d52cb19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTYyMw&ixlib=rb-1.2.1&q=80&w=400' alt='Bluetit'>
    <figcaption>A colourful mix of blue, yellow, white and green makes the blue tit one of our most attractive and most recognisable garden visitors.</figcaption>
  </figure>
  <figure>
    <img src='https://images.unsplash.com/photo-1619976302135-5efbc2a7785a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTY4NA&ixlib=rb-1.2.1&q=80&w=400' alt='Robin'>
    <figcaption>Robins sing nearly all year round and despite their cute appearance, they are aggressively territorial and are quick to drive away intruders.</figcaption>
  </figure>
  <figure>
    <img src='https://images.unsplash.com/photo-1623627733740-4724cb1fe84e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTc4NQ&ixlib=rb-1.2.1&q=80&w=400' alt='Chaffinch'>
    <figcaption>The chaffinch is one of the most widespread and abundant bird in Britian and Ireland.</figcaption>
  </figure>
</div>

CSS：

* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: max(1rem, 3vw);
}

figure {
  margin: 0;
  display: grid;
/*  grid-template-rows: subgrid; */
/*  grid-row: 1 / 3; */
}

img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  grid-row: 1 / 3;
  grid-column: 1;
}

figcaption {
  padding: 1rem;
  grid-column: 1;
  grid-row: 2;
  background: hsl(0 0% 0% / 0.6);
  color: white;
}

.grid {
  display: grid;
  max-width: 80rem;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

@media (min-width: 62em) {
  .grid {
    grid-template-rows: 1fr auto;
  }
  
  figure {
    grid-template-rows: subgrid;
    grid-row: 1 / 3;
  }
}

演示demo：https://codepen.io/michellebarker/pen/YzERyor

3. 當前狀態

值得注意的是，自 2019 年以來，Firefox 已經支援了 subgrid，但近三年後還沒有其他瀏覽器跟進。有跡象表明 Chromium 團隊已經開始著手實現它，所以可能有幸在今年看到它登陸 Chrome 和 Edge。

CSS Grid Layout Module Level 2（官方規範）：https://www.w3.org/TR/css-grid-2/

八、@scroll-timeline

1. 基本概念

@scroll-timeline 屬性定義了一個AnimationTimeline，其時間值由捲動容器中的捲動進度決定（而不是時間決定）。一旦指定，@scroll-timeline 將通過使用animation-timeline 屬性與CSS Animation相關聯。

2. 使用方法

這裡來看一個簡單的例子：

/* 設定關鍵幀動畫 */
@keyframes slide {
    to { transform: translateX(calc(100vw - 2rem)); }
}

/* 設定scroll timeline，這裡將它命名為了slide-timeline */
@scroll-timeline slide-timeline {
  source: auto;
  orientation: vertical; 
  scroll-offsets: 0%, 100%; 

/*  指定關鍵幀動畫和 scroll-timeline */
.animated-element {
  animation: 1s linear forwards slide slide-timeline;
}

我們也可以對scroll-offsets屬性使用基於元素的偏移量，以在特定元素捲動到檢視中時觸發 timeline：

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

3. 當前狀態

如果對 @scroll-timeline 感興趣，可以在 Chrome 中使用 flag 來啟用它。當我們遇到一個複雜的動畫時，可能需要使用 JavaScript 動畫庫來實現，但是對於相對簡單的動畫，使用該屬性就可以減少不必要的import。

Scroll-linked Animations（官方規範）：https://drafts.csswg.org/scroll-animations-1/

九、巢狀

1. 基本概念

如果你熟悉 Sass，就會知道巢狀選擇器的便利性。本質上，就是在父級中編寫子級規則。巢狀可以使編寫CSS程式碼更加方便，現在巢狀終於來到了原生 CSS！

2. 使用方法

從語法上講，它與 Sass 相似。下面來給 class 為 card 中的 h2 子元素定義樣式規則：

.card {
    color: red;

    & h2 {
        color: blue;
    }
}

可以將其用於偽類和偽元素：

.link {
    color: red;

    &:hover,
    &:focus {
        color: blue;
    }
}

這些就等價於下列 CSS 程式碼：

.link {
    color: red;
}

.link:hover,
.link:focus {
    color: blue;
}

3. 當前狀態

目前還沒有瀏覽器支援巢狀。如果你使用PostCSS，可以通過預置的 postcss-preset-env 外掛來嘗試巢狀。

CSS Nesting Module（官方規範）：https://www.w3.org/TR/css-nesting-1/

十、總結

現在正處於 CSS 蓬勃發展的時代。在寫這篇文章時，我注意到這些新功能有一些共同點，它們都是為了幫助我們編寫更好、更乾淨、更高效的程式碼。隨著時間的推移，預處理工具（如 Sass）可能會變得不再重要。讓我們一起期待更多新的 CSS 功能出現吧！

英文原文：https://www.smashingmagazine.com/2022/03/new-css-features-2022/

作者：Michelle Barker

譯者：CUGGZ

（學習視訊分享：）

以上就是2022年你值得了解的幾個CSS新特性（收藏學習）的詳細內容，更多請關注TW511.COM其它相關文章！