新時(shí)代布局新特性 -- 容器查詢(xún)
終于，在漫長(zhǎng)的等待下，容器查詢(xún)（CSS Container Queries）將在 Chrome 105 版本得到正式的支持！
而目前，我們也能在 Chrome Canary 版本中，或者在 Chrome 93~104 通過(guò)開(kāi)啟 Enable CSS Container Queries 特性搶先體驗(yàn)。
響應(yīng)式過(guò)往的痛點(diǎn)
在之前，響應(yīng)式有這么個(gè)掣肘。同一 DOM 的不同布局形態(tài)如果想要變化，需要依賴(lài)諸如媒體查詢(xún)來(lái)實(shí)現(xiàn)。
像是這樣：
通過(guò)瀏覽器視窗大小的變化，借助媒體查詢(xún)，實(shí)現(xiàn)不一樣的布局。
但是，在現(xiàn)如今，大部分 PC 端頁(yè)面使用的是基于 Flex/Grid 的彈性布局。
很多時(shí)候，當(dāng)內(nèi)容數(shù)不確定的時(shí)候，即便是相同的瀏覽器視窗寬度下，元素的布局及寬度可能也是不一致的。
考慮下面這種情況：
<!-- 情況一 -->
<ul class="wrap">
<li></li>
<li></li>
<li></li>
</ul>
<!-- 情況二 -->
<ul class="wrap">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
.wrap {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
li {
width: 190px;
height: 100px;
flex-grow: 1;
flex-shrink: 0;
}
這種情況下，如果需要在不同寬度下對(duì)最后一個(gè)元素做一下處理，傳統(tǒng)方式還是比較麻煩的。
在這種情況下，容器查詢(xún)（CSS Container Queries）就應(yīng)運(yùn)而生了！
容器查詢(xún)的能力
容器查詢(xún)它給予了 CSS，在不改變?yōu)g覽器視口寬度的前提下，只是根據(jù)容器的寬度變化，對(duì)布局做成調(diào)整的能力。
還是上面的例子，簡(jiǎn)單的代碼示意：
<div class="wrap">
<div class="g-container">
<div class="child">Title</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p>
</div>
</div>
.wrap {
width: 500px;
resize: horizontal;
overflow: auto;
}
.g-container {
display: flex;
flex-wrap: nowrap;
}
.wrap {
/* CSS CONTAINER */
container-name: wrap;
container-type: inline-size;
}
@container wrap (max-width: 400px) {
.g-container {
flex-wrap: wrap;
flex-direction: column;
}
}
像是這樣，我們通過(guò) resize: horizontal 來(lái)模擬單個(gè)容器的寬度變化，在這種情況下，容器查詢(xún)能夠做到在不同寬度下，改變?nèi)萜鲀?nèi)部的布局。
這樣，就簡(jiǎn)單實(shí)現(xiàn)了一個(gè)容器查詢(xún)功能：
注意，仔細(xì)和上面的例子作對(duì)比，這里，瀏覽器的視口寬度是沒(méi)有變化的，變化的只是容器的寬度！
媒體查詢(xún)與容器查詢(xún)的異同，通過(guò)一張簡(jiǎn)單的圖看看，核心的點(diǎn)在于容器的寬度發(fā)生變化時(shí)，視口的寬度不一定會(huì)發(fā)生變化：
我們簡(jiǎn)單拆解下上述的代碼，非常好理解。
- 在.warp? 的樣式中，通過(guò)container-name: wrap 注冊(cè)一個(gè)容器
- 注冊(cè)完容器之后，便可以通過(guò)@container wrap () 容器查詢(xún)語(yǔ)法，在內(nèi)部寫(xiě)入不同情況下的另外一套樣式
- 這里@container wrap (max-width: 400px) {}? 的意思便是，當(dāng).wrap 容器的寬度小于 400 px 時(shí)，采用內(nèi)部定義的樣式，否則，使用外部默認(rèn)的樣式
關(guān)于容器查詢(xún)更為具體的語(yǔ)法，我建議還是上 MDN 或者規(guī)范詳細(xì)看看 -- MDN -- CSS Container Queries[1]。
關(guān)于容器查詢(xún)的一些思考
在第一次看到這個(gè)語(yǔ)法之后，我最先想到的場(chǎng)景便是字體的自適應(yīng)大小。
我們來(lái)看這樣一個(gè)場(chǎng)景，很多時(shí)候，我們無(wú)法預(yù)估文案內(nèi)容的多少。因此，會(huì)希望當(dāng)內(nèi)容較多時(shí)，字體較小，而當(dāng)內(nèi)容不足一行或者非常少的時(shí)候，字體較大：
CodePen Demo -- Container Quries Demo[2]。
當(dāng)然，現(xiàn)階段我暫時(shí)沒(méi)有試出來(lái)在容器查詢(xún)中，容器的寬度能夠隨著輸入的變化動(dòng)態(tài)改變?nèi)萜鞔笮?，這里目前有點(diǎn)瑕疵，是個(gè)需要繼續(xù)鉆研的點(diǎn)。
當(dāng)然，在那些能夠事先知道不同寬度，預(yù)設(shè)不同布局的場(chǎng)景下，容器查詢(xún)的用武之地是非常之大的。
我們可以利用它快速構(gòu)建在容器不同寬度下的不同表現(xiàn)。
譬如這樣一個(gè) DEMO：
CodePen Demo -- CSS Container Queries[3]。
總得來(lái)說(shuō)，容器查詢(xún)，還是處于比較早期的發(fā)展之中，許多有意思的用法還有待挖掘。但它確實(shí)算得上是 CSS 今年比較大的一個(gè)革新。
最后
好了，本文到此結(jié)束，希望本文對(duì)你有所幫助 :)
參考資料
[1]MDN -- CSS Container Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries。
[2]CodePen Demo -- Container Quries Demo: https://codepen.io/Chokcoco/pen/KKoYeRw?editors=1100。
[3]CodePen Demo -- CSS Container Queries: https://codepen.io/Chokcoco/pen/zYWQKBy。
