你可能不知道的「 CSS 容器查詢 」
背景
今天PM過來問我: 蛋總，有些用戶反饋他們屏幕太小了 , 需要滑動, 操作不方便。我們的系統(tǒng)能不能改成自適應(yīng)布局啊?
我頓時虎軀一震：woc, 要把一個迭代了一年多的固定設(shè)計的產(chǎn)品，改成自適應(yīng)布局? 真讓人害怕 ??????。
于是，我就去查了一些自適應(yīng)布局的資料，嘗試找出一種改造成本最小的方案。
過程中發(fā)現(xiàn)了一個比較好玩的東西：CSS 容器查詢。
對此，我做了一下簡單的整理和總結(jié)，在此分享給大家，希望對大家有所啟發(fā)。
正文
什么是 CSS 容器查詢
簡單來說: 容器查詢允許開發(fā)者根據(jù)容器元素的大小來設(shè)置元素的樣式。
它類似于 @media查詢，不同之處在于它根據(jù)容器的大小而不是視口的大小進(jìn)行判斷。
我們使用創(chuàng)建響應(yīng)式設(shè)計時，通常使用媒體查詢根據(jù)視口的大小來更改文檔布局。
但是，許多設(shè)計都有一些通用組件，這些組件會根據(jù)其容器的可用寬度來更改布局。
這可能并不總是與視口的大小有關(guān)，而是與組件在布局中的放置位置有關(guān)。
例如，以下組件可能顯示在網(wǎng)站布局的窄或寬列中。
如果有空間，它將顯示為兩列，否則，我們希望將其堆疊顯示。
上圖中的左右兩個組件，是同一個組件，功能上是完全一樣的，只是要展示不同的布局。
目前而言， 我們可以通過以某種方式識別該組件，比如通過添加一個類或使用其他選擇器來定位元素，該選擇器可以查看它在文檔結(jié)構(gòu)中的位置。
但是，這并不能完全實現(xiàn)媒體查詢在整個布局中的作用。
媒體查詢使我們能夠根據(jù)視口的范圍來改變元素的大小。
當(dāng)我們添加一個類或目標(biāo)元素時，我們決定當(dāng)對象在側(cè)邊欄中時，它必須使用堆疊布局。
但是，就可用空間而言，很可能是在大屏幕上，側(cè)邊欄中的對象將具有足夠的空間來以并排布局顯示。
容器查詢將解決這種情況。
除了查看視口的大小，我們還可以查看容器的大小，并根據(jù)容器中的空間進(jìn)行布局調(diào)整。
CSS 容器查提案
容器查詢， 將成為css containment規(guī)范的一部分，并向contain屬性添加新值。
該contain屬性最初是為了性能優(yōu)化而設(shè)計的。
它為Web開發(fā)人員提供了一種方法來隔離DOM的各個部分，并向瀏覽器聲明這些部分與文檔的其余部分無關(guān)。
使用contain: size;表示瀏覽器在兩個維度上都知道該區(qū)域的大小。
知道它有多大的容器，正是我們進(jìn)行容器查詢所需要的。
但是，通常我們并不經(jīng)常知道這兩個維度有多大。
當(dāng)我們使用媒體查詢時，大多數(shù)時候我們都會指定可用的寬度（或內(nèi)聯(lián)大?。?/p>
我們將列定義為: 該維度中,空間的百分比或分?jǐn)?shù)。
因此，容器查詢僅允許通過在一維中指示大小來擴(kuò)展包含屬性，這被描述為單軸遏制。
以下CSS將創(chuàng)建一個僅在嵌入式軸上包含容器的容器，內(nèi)容可以增長到在塊軸上所需的大?。?/p>
.sidebar {
contain: layout inline-size;
}
聲明contain屬性，并且把layout和size的值疊加, 瀏覽器便會在該元素上創(chuàng)建一個containment上下文。
聲明了這個屬性，就意味著瀏覽器知道：我以后可能要查詢此容器。
然后，可以編寫一個查詢來查找此包含上下文而不是視口大小，以便為組件制定布局決策。
使用創(chuàng)建容器查@container。
這將查詢最近的包含上下文。
為了使卡僅在邊欄寬于700px時才顯示為兩列，我們使用以下CSS：
@container (min-width: 700px) {
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
如果布局的其他區(qū)域也是containment，那么我們可以將組件放到那些區(qū)域中，它將自動響應(yīng)相關(guān)的容器。這使得我們可以在模式庫中創(chuàng)建的各種組件真正可重用，而無需知道它們所處的上下文。
其實還有很多事情可以說，上文介紹的只是一些基本概念。
另外，上文顯示的基本功能都已經(jīng)可以在Chrome Canary中進(jìn)行測試。
下載Canary，然后轉(zhuǎn)到chrome://flags，搜索Container Queries并啟用該標(biāo)志。
在線演示demo集合
本文演示的 demo 的在線鏈接：https://codepen.io/rachelandrew/pen/NWdaxde
以及容器查詢 demo 的大集合:
https://codepen.io/collection/XQrgJo
容器查詢的兼容性
目前還沒有瀏覽器支持。
容器查詢的相關(guān)進(jìn)展
Blink components
https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink
Proposed (提案階段）
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1145970
共識和標(biāo)準(zhǔn)
Chrome瀏覽器中提供功能后，此處列出的值不保證是最新的。
Firefox: No signal Edge: No signal Safari: No signal Web Developers: No signals
結(jié)論
CSS 容器查詢，為自適應(yīng)布局方案提供了一種新的思路。
但是目前還處于提案階段， 感興趣的可以保持關(guān)注。
好了，本文的內(nèi)容就這么多，謝謝。
相關(guān)資料
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries https://caniuse.com/?search=%40container%20 https://www.chromestatus.com/feature/6525308435955712 https://bugs.chromium.org/p/chromium/issues/detail?id=1145970 https://morioh.com/p/8b1afe84f3c2