大漠老師:2022 年的 CSS,到底有哪些特性

關(guān)于2022年的CSS新特性，自己之前也有篇原創(chuàng)，CSS?的未來：Cascade?Layers (CSS?@layer)，專門是在介紹@layer（級聯(lián)層）的文章，而新的一年會有更多的CSS的新特性會出現(xiàn)在瀏覽器中。

今天分享一篇大漠老師的文章，主要內(nèi)容是2022年哪些CSS特性將在瀏覽器中出現(xiàn)，以下是正文。

原文: https://www.w3cplus.com/css/what-is-new-css-in-2022.html作者：大漠老師，請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

雖然近些年 CSS 變化很快，但我認(rèn)為 2021 年是 CSS 的元年。在即將過去的 2021 年，CSS 變化非常地大，其中新增了很多特性，比如 CSS 容器查詢、CSS 父選擇器、CSS 層疊控制規(guī)則、CSS 子網(wǎng)格等等。而且這些特性已經(jīng)在個(gè)別，甚至是在大部分主流瀏覽器已經(jīng)可以看到了。幾大主流瀏覽器（Chrome、Firefox、Safari和Edge）還專注于修復(fù)瀏覽器兼容性痛點(diǎn)，讓 Web 開發(fā)者的工作變得更輕松。

瀏覽器兼容性方面的修復(fù)，在 Web.dev 上發(fā)布了 2021 年的年中和年終報(bào)告，報(bào)告雖然簡單，但我們可以看到瀏覽器廠商都在致于力磨平 CSS 特性在瀏覽器上的兼容性。為此，我們應(yīng)該感謝他們的付出！

隨著 2021 年的結(jié)束，讓我們一起來看看 2022 年，我們可以期待哪些 CSS 特性將會在瀏覽器中出現(xiàn)。這了是我連續(xù)第三年整理有關(guān)于 CSS 新特性方面的文章了，另外兩篇是（可自行搜索）：

• 2020年CSS有哪些新特性
• 應(yīng)用于下一代Web的樣式
• 2021年你可能不知道的 CSS 特性

你即將看到是 2022 年的，你會發(fā)現(xiàn)這三篇文章提到的 CSS 特性有相同的，但他們也是有變化的。

回顧近兩年的 CSS 發(fā)展

@Bramus 前兩天在Twitter 上發(fā)了一條信息，他整理了一份 2022 年的將會出現(xiàn)在瀏覽器的 CSS 清單：

有關(guān)于清單中列出的 CSS 相關(guān)介紹，可以閱讀他的文章：《CSS In 2022》

這份清單中列出的 CSS 特性和 @Adam Argyle 分別在 2020 年 和 2021 年分享的 CSS 新特性列的出的清單差不多，不同的是，在2021年，有些CSS特性已經(jīng)得到了瀏覽器的支持，有些已經(jīng)進(jìn)入了瀏覽器的實(shí)驗(yàn)屬性列表清單，說不定2022年，你就能看到了！

有關(guān)于 @Adam Argyle 在 2020 和 2021 分享的 CSS 新特性，我也曾整理過一份，清單有些類似，但內(nèi)容還是有差異，主要涵蓋了一些我自己在 CSS 方面的認(rèn)識和嘗試，分別記錄在《2020年CSS有哪些新特性》和《2021年你可能不知道的 CSS 特性》以及《應(yīng)用于下一代Web的樣式》

當(dāng)然，如果你也是 CSS 的忠實(shí)愛好者，不斷的在關(guān)注和推進(jìn) CSS 向前發(fā)展，那么你可能已經(jīng)知道了，自 2019 年開始，每年年低都會有一份關(guān)于 CSS 發(fā)展?fàn)顟B(tài)相關(guān)的報(bào)告（2019、2020 和 2021）呈現(xiàn)給你。在每年的報(bào)告中，我們都可以看到一項(xiàng)關(guān)于”開發(fā)者期待的CSS特性“的統(tǒng)計(jì)：

在第一份報(bào)告出來的時(shí)候，我特意還花了一點(diǎn)時(shí)間去理解這份有關(guān)于 CSS的報(bào)告：《從9102年的CSS狀態(tài)報(bào)告中看CSS特性的使用》，另外有幸運(yùn)在 2020年年底和一些大學(xué)生一起聊了一個(gè)關(guān)于CSS狀態(tài)和學(xué)習(xí)的話題！如果你對該話題感興趣的話，可以閱讀《CSS現(xiàn)狀和如何學(xué)習(xí)》，文章中附有分享時(shí)錄制的視頻！

除此之外，W3C 的 CSS 工作小組，這兩年也都出了 CSS 規(guī)范的重點(diǎn)報(bào)告，最新的是 2020年 和 2021年的。注意，W3C 關(guān)于 CSS 規(guī)范的重點(diǎn)報(bào)告并不是每年都有的！接下來，我將按著 @Bramus 的 《CSS In 2022》大綱往下梳理，其中會加入一些我自己對這方面的認(rèn)識和見解。

我需要額外提出的是，接下來內(nèi)容中提到的 CSS 特性只會涉及到那些全新的或仍然沒有得到瀏覽器支持的（哪怕是實(shí)驗(yàn)性方面的）特性。但這并不代表著它們不值得期待，說不定在2022年你就能使用了！如果你對這方面感興趣的話，請繼續(xù)往下閱讀！

熱門的 CSS 特性

在這節(jié)中提到的 CSS 特性是近些年來，Web 開發(fā)者一直期待的特性（或者說 CSS 中遺失的特性）。這些特性將在 2022 年的某個(gè)時(shí)候就得到了主流瀏覽器的支持。慶幸的是，有些特性已經(jīng)在一個(gè)或多個(gè)主流瀏覽器中得到了支持，其他特性也將隨著時(shí)間的推移也會隨之而來。在 2022 年，學(xué)習(xí)或了解這些 CSS 特性，我想你會獲得收益的！

有意思的是，CSSWG一直還維護(hù)著一份關(guān)于 CSS 設(shè)計(jì)中不完整的錯語列表。感興趣的可以點(diǎn)擊這里閱讀！

CSS 容器查詢

CSS 容器查詢的特性一直以來都是 Web 設(shè)計(jì)師和開發(fā)者所期待的功能之一，從這幾年的 CSS 發(fā)展?fàn)顟B(tài)的報(bào)告就可以看得出來。在沒有容器查詢之前，Web 開發(fā)者大多是依賴于 JavaScript 腳本來做判斷，從而改變 UI 網(wǎng)格。雖然 CSS 容器查詢存在于 CSS Containment Module 中有些年頭，但一直未得到瀏覽器的支持。慶幸的是，在 2021 年，該特性得到了飛速的發(fā)展，時(shí)至今日，能在主流瀏覽器中看到 CSS 容器查詢功能。這一切，都離不開 @TerribleMia ，是她為我們帶來了這么好的 CSS 特性，并且一直在推進(jìn)該特性向前發(fā)展。

@TerribleMia 除了設(shè)計(jì) CSS 容器查詢特性之外，還設(shè)計(jì)了 CSS 另外兩個(gè)非常優(yōu)秀的特性，那就是 CSS 的 @layer 和 @scoped 兩個(gè) @ （At rule）規(guī)則。詳細(xì)的可以閱讀《Miriam's CSS Sandbox》。

CSS 容器查詢 @container 有點(diǎn)類似于 CSS 的媒體查詢 @media ，只是它將根據(jù)元素的父容器（或祖先元素）的尺寸（size）或樣式（style）來調(diào)整自己或自己后代元素的樣式規(guī)則。在沒有 CSS 容器查詢，Web 開發(fā)者為了能在不同容器下調(diào)整 UI，大多都是依賴于媒體查詢來做。也就是說，有了該特性之后，不需要再依賴視窗大小加添加類名的方式來調(diào)整UI了：

上圖演示了，基于視窗的設(shè)計(jì)和基于容器的尺寸設(shè)計(jì)。可以說， CSS 容器查詢的出現(xiàn)，除了改變 Web 開發(fā)者的開發(fā)方式之外，也將給 Web 設(shè)計(jì)帶來變革命。這個(gè)論點(diǎn)在 2021 年的 GDS 大會上，@Una Kravets 在分享的 《The New Responsive: Web design in a compoent-driven world》主題（該主題視頻可以在 YouTube上訪問）中就提出這樣的觀點(diǎn)：

CSS 容器查詢將會成為下一代響應(yīng)式 Web 設(shè)計(jì)必不可少的特性之一。

有了 CSS 容器查詢之后，我們就可以基于同一個(gè)組件，在不同尺寸下調(diào)整其UI，比如我們手淘 APP 頂部的搜索框效果：

上面效果的關(guān)鍵性代碼如下：

.form__container?{
????container:?inline-size;
}

.form?{
????display:?grid;
????align-items:?center;
}

@container?(min-width:?480px)?{
????.form?{
????????grid-template-columns:?min-content?1fr?200px;
????????grid-template-areas:?"searchIcon?searchInput?button";
????????grid-template-rows:?88px;
????????gap:?10px;
????}
}

@container?(min-width:?768px)?{
????.form?{
????????grid-template-columns:?min-content?1fr?min-content?200px;
????????grid-template-areas:?"searchIcon?searchInput?cameraIcon?button";
????????grid-template-rows:?88px;
????????gap:?10px;
????}
}

詳細(xì)代碼可以點(diǎn)擊這里閱讀或獲取。

CSS 容器查詢在主流瀏覽器都能體驗(yàn)效果了，但需要開啟其相關(guān)標(biāo)記。如果你要運(yùn)用于生產(chǎn)環(huán)境，可以考慮其相應(yīng)的 Polyfill：

CSS容器查詢特性絕對是眾望所歸的一個(gè)特性，在2022年更會全速向前！

有關(guān)于 CSS 容器查詢更多的介紹可以移步閱讀下面這些文章：

• 初探CSS容器查詢
• 容器查詢中的 container 和 @container
• 容器查詢給設(shè)計(jì)帶來的變化
• 現(xiàn)代Web技術(shù)讓我們離容器查詢更近一步

CSS的父選擇器 :has()

CSS 選擇器是 CSS 中最基礎(chǔ)的知識，也是必不可少的一部分，如果你沒掌握好 CSS 選擇器的話，那么你將會在 CSS 的世界中有那種”眾里尋她千百度，驀然回首，那人卻在燈火闌珊處“的感覺！也正因此，CSS 選擇器模塊的迭代非常的快，現(xiàn)在已經(jīng)進(jìn)入 Level 4 版本了。在 Level 4 版本中，添加了多個(gè)偽類選擇器，比如 :is() 、:where() 、:not() 和 :has() 等，而其中 :has() 選擇器也是我們期待已久的一個(gè)選擇器。@SaraSoueidan 在 Twitter 上引用 @Jen Simmons 的話說：

:has()選擇器本質(zhì)上就是CSS中期待已久的父選擇器！

CSS 的 :has() 偽類選擇器和 :not() 有點(diǎn)相似，也被稱為結(jié)構(gòu)性偽類選擇器，在 CSS 的函數(shù)中也稱之為 動態(tài)偽類函數(shù)。它允許你更精細(xì)地匹配元素：

:has() 偽類代表一個(gè)元素，如果作為參數(shù)傳遞的任何選擇器至少與一個(gè)元素相匹配！

簡單地說，元素只有在傳遞到 :has() 中的選擇器至少匹配一個(gè)元素時(shí)才會被選中。這樣理解起來似乎有點(diǎn)暈，我們來看個(gè)簡單地示例：

figure?img?{?
????aspect-ratio:?21?/?9;?
????border:?5px?solid?#3f51b5;?
}

figure:has(figcaption)?img?{?
????border:?5px?solid?#9c27b0;?
}

上面示例中的 figure img 選擇器大家應(yīng)該都明白，表示選中