【CSS】1258- 2022年你不應該錯過的CSS新特性
對于CSS來說，2022年是非常值得期待的一年，大量的新功能即將出現(xiàn)，有些已經開始登錄瀏覽器，有些可能會在2022年獲得瀏覽器的廣泛支持。下面就來看看2022年有哪些值得期待的 CSS 新特性吧！
一、容器查詢
1. 基本概念
容器查詢使我們能夠根據(jù)其父元素的大小設置元素的樣式，它類似于 @media查詢，不同之處在于它根據(jù)容器的大小而不是視口的大小進行判斷。這一直是響應式設計的一個問題，因為我們有時候希望組件能夠適應它的上下文。
2. 使用方法
對于容器查詢，需要使用 container 屬性（它是 container-type 和 container-name 的縮寫）指定一個元素作為容器。container-type 可以是width、height、inline-size、block-size。inline-size 和 block-size 是邏輯屬性，根據(jù)文檔的寫入模式，它們可能會產生不同的結果。
main,?aside?{
????container:?inline-size;
}
可以使用類似于媒體查詢的方式來使用@container。需要注意，兩者在括號中表達規(guī)則的方式有所不同（在容器查詢中應該使用 inline-size > 30em 而不是 min-width: 30em）。這是媒體查詢 4 級規(guī)范的一部分。當容器寬度大于 30rem 時，就切換到 flex 布局：
@container?(inline-size?>?30em)?{
????.card?{
????????display:?flex;
????}
}
CSS Containment Level 3 規(guī)范目前處于工作草案中，這意味著語法可能隨時改變。
3. 當前狀態(tài)
目前容器查詢在主流瀏覽器是不可用的，可以期待一下容器查詢在瀏覽器的實現(xiàn)。
CSS Containment Module Level 3 （官方規(guī)范）：https://www.w3.org/TR/css-contain-3
二、:has()
1. 基本概念
:has()通常被稱為“父選擇器”，這個偽類使我們能夠根據(jù)其后代選擇一個元素。它有一些非常有趣的用例。例如，可以根據(jù)圖像是否包含
2. 使用方法
要設置包含的元素的樣式，可以執(zhí)行以下操作：
section:has(h2)?{
????background:?lightgray;
}
當 的父級 包含 時，設置 的樣式：
section:has(h2)?img?{
????border:?5px?solid?lime;
}
3 當前狀態(tài)
目前還沒有主流瀏覽器支持該屬性，但可以在 Safari 技術預覽版中使用它。
Safari 技術預覽版：https://developer.apple.com/safari/technology-preview/CSS Selectors Level 4 （官方規(guī)范）：https://www.w3.org/TR/selectors-4/
三、@when/@else
1. 基本概念
@when/@else 是CSS中的條件規(guī)則，類似于其他編程語言中的if/else 邏輯。它可以使編寫復雜的媒體查詢更加符合邏輯。這里選擇使用@when而不是@if是為了避免與 Sass 產生沖突。
2. 使用方法
可以查詢多種媒體條件或支持的功能，例如用戶的視口是否超過一定寬度，用戶瀏覽器是否支持 subgrid。
@when?media(min-width:?30em)?and?supports(display:?subgrid)?{
????
}?@else?{
????
}
3. 當前狀態(tài)
現(xiàn)在該屬性還沒有在瀏覽器得到支持。現(xiàn)在還為時過早，仍在討論中。預計今年不會廣泛被瀏覽器支持，但它肯定是值得關注的一個非常實用的屬性。
CSS Conditional Rules Module Level 5（官方規(guī)范）：https://www.w3.org/TR/css-conditional-5
四、accent-color
1. 基本概念
color-scheme 屬性允許元素指示它可以輕松呈現(xiàn)的配色方案。操作系統(tǒng)配色方案的常見選擇是“亮”和“暗”，或者是“白天模式”和“夜間模式”。當用戶選擇其中一種配色方案時，操作系統(tǒng)會對用戶界面進行調整。這包括表單控件、滾動條和 CSS 系統(tǒng)顏色的使用值。
2. 使用方法
用法很簡單，而且該屬性是可繼承的。所以可以在根級別設置它，以在任何地方應用它：
:root?{
????accent-color:?lime;
}
可以在單個元素上使用：
form?{
????accent-color:?lime;
}
input[type="checkbox"]?{
????accent-color:?hotpink;
}
3. 當前狀態(tài)
目前，accent-color 在 Chrome、Edge、Firefox 和 Safari 技術預覽版中已經得到了支持。不支持該屬性的的瀏覽器會直接使用默認顏色，并且輸入是完全可用的。
CSS Basic User Interface Module Level 4（官方規(guī)范）：https://www.w3.org/TR/css-ui-4/
五、顏色函數(shù)
1. 基本概念
我們可能已經很熟悉 Hex、RGB 和 HSL 顏色格式。CSS Color Module Levels 4 和 5 中包括一整套新的顏色函數(shù)，使我們能夠以前所未有的方式在 CSS 中指定和操作顏色。它們包括：
hwb()：色相、白度、黑度。 lab()：亮度以及決定色調的 a和b值。 lch()：亮度、色度、色調。 color-mix()：將兩種顏色混合在一起。 color-contrast()：從顏色列表中，輸出與第一個參數(shù)相比對比度最高的顏色。 color()：指定不同顏色空間中的顏色（例如display-p3）。
2. 使用方法
hwb(), lab() 和 lch() 的使用方式與我 rgb() 和 hsl() 函數(shù)基本相同，都有一個可選的alpha 參數(shù)：
.my-element?{
??background-color:?lch(80%?100?50);?
}
.my-element?{
??background-color:?lch(80%?100?50?/?0.5);?
}
color-mix() 將其他兩種顏色混合后輸出一種顏色。我們需要指定顏色插值方法作為第一個參數(shù)：
.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. 當前狀態(tài)
Safari 目前在瀏覽器支持方面處于領先地位，從版本 15 就開始支持hwb()、 lch()、lab()、color()，color-mix() 和 color-contrast() 可以通過 flag 啟用。Firefox 支持 hwb()，并且還標記了對 color-mix() 和 color-contrast() 的支持。令人驚訝的是，Chrome 現(xiàn)在還不支持這些函數(shù)。
在代碼中提供樣式兼容并不難：給定兩種顏色規(guī)則，如果瀏覽器不支持第二種顏色規(guī)則，它將忽略第二種顏色規(guī)則：
.my-element?{
????background-color:?rgb(84.08%?0%?77.36%);
????background-color:?lch(50%?100?331);
}
這樣，當瀏覽器支持該函數(shù)時，就可以直接使用了。
CSS Color Module Level 4（官方規(guī)范）：https://www.w3.org/TR/css-color-4/CSS Color Module Level 5（官方規(guī)范）：https://www.w3.org/TR/css-color-5
六、層疊層
1. 基本概念
層疊層讓我們有更多的能力來管理CSS的“層疊”部分。目前，有幾個因素決定了 CSS 代碼中將應用哪些樣式，包括選擇器群眾和出現(xiàn)的順序。層疊層允許我們有效地將CSS分組（或者“分層”）。順序較低的層中的代碼將優(yōu)先于較高層中的代碼，即使較高層中的選擇器具有更高的權重。
2. 使用方法
下面來看看層疊層的基本使用：
/*?按順序創(chuàng)建圖層?*/
@layer?reset,?base,?theme;
/*?將CSS添加到每個層?*/
@layer?reset?{
??
}
@layer?base?{
??h1.title?{
??????font-size:?5rem;
??}
}
@layer?theme?{
??h1?{
??????font-size:?3rem;
??}
}
theme 層中的CSS字體大小聲明將覆蓋base層中的字體大小聲明，盡管后者選擇器具有更高的權重。
3. 當前狀態(tài)
最新版本的 Firefox 已經支持了層疊層，并且可以在 Chrome 和 Edge 中使用 flag 啟用（Chrome 99 版本將全面支持層疊層）?？雌饋硭兄髁鳛g覽器都在使用這個規(guī)范，所以希望盡快能得到更廣泛的支持。
CSS Cascading and Inheritance Level 5（官方規(guī)范）：https://www.w3.org/TR/css-cascade-5/
七、subgrid
1. 基本概念
作為 CSS Grid Layout Module 2 規(guī)范的一部分，subgrid 允許元素在行軸或列軸上繼承其父元素的網(wǎng)格。subgrid 對于解決各種用戶界面挑戰(zhàn)非常有用。
例如，以下面這個帶有標題的圖像為例。標題的長度各不相同，使用 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;
}
實現(xiàn)效果：
完整代碼：https://codepen.io/michellebarker/embed/YzERyor
3. 當前狀態(tài)
值得注意的是，自 2019 年以來，F(xiàn)irefox 已經支持了 subgrid，但近三年后還沒有其他瀏覽器跟進。有跡象表明 Chromium 團隊已經開始著手實現(xiàn)它，所以可能有幸在今年看到它登陸 Chrome 和 Edge。
CSS Grid Layout Module Level 2（官方規(guī)范）：https://www.w3.org/TR/css-grid-2/
八、@scroll-timeline
1. 基本概念
@scroll-timeline 屬性定義了一個AnimationTimeline，其時間值由滾動容器中的滾動進度決定（而不是時間決定）。一旦指定，@scroll-timeline 將通過使用animation-timeline 屬性與CSS Animation相關聯(lián)。
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屬性使用基于元素的偏移量，以在特定元素滾動到視圖中時觸發(fā) ?timeline：
@scroll-timeline?slide-timeline?{
????scroll-offsets:?selector(#element)?end?0,?selector(#element)?start?1;
}
3. 當前狀態(tài)
如果對 @scroll-timeline 感興趣，可以在 Chrome 中使用 flag 來啟用它。當我們遇到一個復雜的動畫時，可能需要使用 JavaScript 動畫庫來實現(xiàn)，但是對于相對簡單的動畫，使用該屬性就可以減少不必要的import。
Scroll-linked Animations（官方規(guī)范）：https://drafts.csswg.org/scroll-animations-1/
九、嵌套
1. 基本概念
如果你熟悉 Sass，就會知道嵌套選擇器的便利性。本質上，就是在父級中編寫子級規(guī)則。嵌套可以使編寫CSS代碼更加方便，現(xiàn)在嵌套終于來到了原生 CSS！
2. 使用方法
從語法上講，它與 Sass 相似。下面來給 class 為 card 中的 h2 子元素定義樣式規(guī)則：
.card?{
????color:?red;
????&?h2?{
????????color:?blue;
????}
}
可以將其用于偽類和偽元素：
.link?{
????color:?red;
????&:hover,
????&:focus?{
????????color:?blue;
????}
}
這些就等價于下列 CSS 代碼：
.link?{
????color:?red;
}
.link:hover,
.link:focus?{
????color:?blue;
}
3. 當前狀態(tài)
目前還沒有瀏覽器支持嵌套。如果你使用PostCSS，可以通過預置的 postcss-preset-env 插件來嘗試嵌套。
CSS Nesting Module（官方規(guī)范）：https://www.w3.org/TR/css-nesting-1/
十、總結
現(xiàn)在正處于 CSS 蓬勃發(fā)展的時代。在寫這篇文章時，我注意到這些新功能有一些共同點，它們都是為了幫助我們編寫更好、更干凈、更高效的代碼。隨著時間的推移，預處理工具（如 Sass）可能會變得不再重要。讓我們一起期待更多 CSS 新特性出現(xiàn)吧！