2022年網(wǎng)站建設(shè)對(duì)于 CSS 來(lái)說(shuō)將是非常重要的一年，大量的新功能即將出現(xiàn)。有些已經(jīng)開始登陸瀏覽器，有些可能會(huì)在 2022 年獲得廣泛的瀏覽器支持，而對(duì)于一兩個(gè)人來(lái)說(shuō)，這個(gè)過(guò)程可能會(huì)更長(zhǎng)一些。

內(nèi)容查詢使我們能夠根據(jù)其父元素的大小設(shè)置元素的樣式——這與僅查詢視口的媒體查詢的關(guān)鍵區(qū)別。這一直是響應(yīng)式設(shè)計(jì)的一個(gè)問(wèn)題，因?yàn)槲覀兘?jīng)常希望組件適應(yīng)它的上下文。想象一張可能顯示在寬內(nèi)容區(qū)域或窄邊欄中的卡片。我們可能希望在側(cè)邊欄中顯示更類似于卡片移動(dòng)布局的內(nèi)容，同時(shí)在有足夠的水平空間時(shí)顯示樣式。但是媒體查詢不知道組件的上下文。出于這個(gè)原因，容器查詢?cè)谠S多開發(fā)人員的愿望清單上已經(jīng)有一段時(shí)間了。

對(duì)于內(nèi)容查詢，我們需要使用container屬性（container-typeand的簡(jiǎn)寫container-name）指定一個(gè)元素作為我們的容器。container-type可以是width、height或。_ 和是邏輯屬性，根據(jù)文檔的書寫方式可能會(huì)產(chǎn)生不同的結(jié)果。inline-sizeblock-sizeinline-sizeblock-size、main, aside {
    container: inline-size;}。

然后我們可以以@container類似于媒體查詢的方式使用 at 規(guī)則。inline-size > 30em請(qǐng)注意在括號(hào)（而不是min-width: 30em）內(nèi)表達(dá)規(guī)則的不同方式。這是Media Queries Level 4 規(guī)范的一部分。對(duì)于上面的卡片布局示例，當(dāng)容器寬于 30rem 時(shí)，我們使用 flexbox 切換到水平布局：
@container (inline-size > 30em) {
    .card {
        display: flex;
    }
}

SS Containment Level 3 規(guī)范目前處于工作草案中，這意味著語(yǔ)法可能隨時(shí)改變——事實(shí)上，自從去年發(fā)表了一些關(guān)于容器查詢的文章以來(lái)，它已經(jīng)改變了。此處的示例與撰寫本文時(shí)建議的語(yǔ)法一致。

Chrome 聲稱支持標(biāo)志后面的容器查詢，但工作實(shí)現(xiàn)似乎與當(dāng)前規(guī)范不一致。有一個(gè) polyfill，但它不適用于最新的語(yǔ)法。所以簡(jiǎn)短的回答是“不”，我肯定會(huì)敦促你在生產(chǎn)中使用它們之前等待一段時(shí)間。但是容器查詢背后有很多動(dòng)力，所以我希望很快會(huì)有更多的普遍支持。