學(xué)姐叫我看 CSS 新出的容器查詢，然后把公共組件重構(gòu)成響應(yīng)式的！
在前端開發(fā)中經(jīng)常需要按不同屏幕尺寸來進設(shè)計達到PC和移動端響應(yīng)式。我們一般使用CSS媒體查詢來檢測視口寬度或高度，然后根據(jù)該模式改變設(shè)計。這就是在過去10年中設(shè)計Web布局的方式。
CSS容器查詢，一個長期以來被web開發(fā)者要求的特性，很快就會出現(xiàn)在CSS中，在最新的 Chrome Canary 中，我們可以通過 chrome://flags/#enable-container-queries 開啟 Container Queries 功能。在本文中，我將介紹它是什么，它將如何改變作為設(shè)計師的工作流，等等。
當(dāng)前響應(yīng)設(shè)計狀態(tài)
當(dāng)前，我們實現(xiàn)響應(yīng)式，一般需要 UI 設(shè)計三個樣式，分別是移動，平板電腦和桌面等。
在上圖中，UI設(shè)計了三種版本，因此開發(fā)人員可以很好的實現(xiàn)它，這是很 nice的(這怕偷懶的 UI 只提供PC版本，這就很蛋疼)。
現(xiàn)在我們來看看使用媒體查詢來看看怎么實現(xiàn)它。
上圖是同一個組件，它有三個變體，即default、Card和Featured。在CSS中，開發(fā)人員需要創(chuàng)建此組件的三個變體，其中每個組成均是唯一的。
- .c-media {
- /* the default styles */
- display: flex;
- flex-wrap: wrap;
- gap: 1rem;
- }
- @media (min-with: 400px) {
- .c-media--card {
- display: block;
- }
- .c-media--card img {
- margin-bottom: 1rem;
- }
- }
- @media (min-with: 1300px) {
- .c-media--featured {
- position: relative;
- /* other styles */
- }
- .c-media--featured .c-media__content {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- }
- }
上面的變體取決于媒體查詢或視口寬度。這意味著，我們無法根據(jù)其父寬度控制它們?，F(xiàn)在你可能會想，這里有什么問題?喔或，這是一個很好的問題。
問題是，只有當(dāng)視口寬度大于特定值時，開發(fā)人員才會使用組件的變體。例如，如果我在平板中使用 featured 也就是 PC 的樣式，它不能工作，為什么?因為它的媒體查詢寬度是大于1300px。
不僅如此，當(dāng)內(nèi)容低于預(yù)期時，我們還會面臨一個問題。有時，UP主可能只會添加一篇文章，而設(shè)計是包含其中的三篇。在這種情況下，要么我們將有一個空的空間，要么項目將擴展以填滿可用的空間。考慮下圖：
在第一種情況下(Case 1)，文章太寬，會導(dǎo)致封面變形。第二種情況下(Case 2)也是一樣的問題
如果使用容器查詢，我們可以通過查詢父組件來決定如何顯示特定組件來解決這些問題。考慮下圖，它展示了我們?nèi)绾问褂萌萜鞑樵儊硇迯?fù)這個問題。
這樣的話，如果我們把思路轉(zhuǎn)向組件的父組件呢?換句話說，如果我們查詢父組件，并根據(jù)父組件的寬度或高度來決定組件應(yīng)該是什么樣子的呢?我們來看下容器查詢的概念。
什么是容器查詢
首先，讓我定義容器。它就包含另一個元素的元素，一般我們叫它 wrapper。
最新的 Chrome Canary 中，我們可以通過 chrome://flags/#enable-container-queries 開啟 Container Queries 功能。
當(dāng)一個組件被放置在一個項中，它就被包含在該項中。這意味著，我們可以查詢父元素的寬度并據(jù)此修改它?？紤]下圖
注意，每個卡片都有一個黃色的輪廓線，代表每個組件的父組件。使用CSS容器查詢，我們可以根據(jù)父組件的寬度修改組件。
- <div class="o-grid">
- <div class="o-grid__item">
- <article class="c-media"></article>
- </div>
- <!-- + more items -->
- </div>
該組件是具有類.c-media的項，它的父級是.o-grid__item元素。在CSS中，我們可以執(zhí)行以下操作：
- .o-grid__item {
- contain: layout inline-size style;
- }
- .c-media {
- /* Default style */
- }
- @container (min-width: 320px) {
- .c-media {
- /* The styles */
- }
- }
- @container (min-width: 450px) {
- .c-media {
- /* The styles */
- }
- }
首先，我們告訴瀏覽器，每個帶有class .o-grid項的元素都是一個容器。然后，再告訴瀏覽器，如果父元素的寬度等于或大于500px，它應(yīng)該以不同的方式顯示。對于700px查詢也是如此。這就是CSS容器查詢的工作原理。
此外，我們可以在任何想要的地方定義它們，這意味著如果需要，我們可以在頂級容器上進行查詢?，F(xiàn)在大家已經(jīng)理解了CSS容器查詢的基本思想，在看看下面圖片加深一下映像。
在左邊，這是一個正在調(diào)整大小的視口。在右邊，一個根據(jù)父組件寬度更改的組件。這就是容器查詢的功能和用途。
在設(shè)計時考慮容器查詢
作為一名 UI，你需要適應(yīng)這個革命性的CSS特性，因為它將改變我們?yōu)榫W(wǎng)頁設(shè)計的方式。我們不僅為屏幕尺寸設(shè)計，還考慮組件在容器寬度變化時應(yīng)如何適應(yīng)。
現(xiàn)在，設(shè)計系統(tǒng)變得越來越流行。設(shè)計團隊將構(gòu)建一組規(guī)則和組件，以便其他成員可以基于它們構(gòu)建頁面。隨著CSS容器查詢的到來，我們還將設(shè)計一個組件應(yīng)該如何根據(jù)其父組件的寬度進行調(diào)整。
考慮以下設(shè)計:
請注意，我們有標(biāo)題、文章部分、引文和時事通訊。它們中的每一個都應(yīng)該適應(yīng)父視圖的寬度。
我可以把這些組件分成以下幾個部分
- Viewport (媒體查詢)
- Parent (容器查詢)
- 通用:不受影響的組件，如按鈕、標(biāo)簽、段落。
對于示例UI，下面是我們?nèi)绾蝿澐纸M件。
當(dāng)我們在設(shè)計UI時以這種心態(tài)思考時，我們可以開始考慮組件的不同變體，這些組件依賴于它們的父寬度。
在下面的圖中，請注意文章組件的每個變化是如何以特定的寬度開始的。
作為一名設(shè)計師，一開始考慮父級寬度可能有點奇怪，但這是未來的發(fā)展方向。我們?yōu)榍岸碎_發(fā)人員提供每個組件的細節(jié)和版本，他們可以使用它們。
不僅如此，我們還可能有一個組件的變體，它應(yīng)該只顯示在特定的上下文中。例如，事件列表頁面。在這種情況下，清楚在何處使用此變體是很重要的。
問題是，如何告訴設(shè)計師應(yīng)該在哪里使用這些組件。
與開發(fā)人員溝通
良好的溝通是項目成功的重要因素。作為一名設(shè)計人員，我們應(yīng)該提供關(guān)于應(yīng)該在何處使用組件變體的指導(dǎo)。它可以是一個完整的頁面設(shè)計，也可以是一個顯示如何使用每個組件的簡單圖。
注意我是如何將每個變體映射到一個特定的上下文，而不是一個視口。為了進一步證明這一點，我們配合 CSS網(wǎng)格一起使用時，組件的行為會有何不同。
在CSS網(wǎng)格中，我們可以通過使用auto-fit關(guān)鍵字告訴瀏覽器，如果列的數(shù)量低于預(yù)期，我們希望展開列(您可以在這里閱讀更多相關(guān)內(nèi)容)。這一功能非常強大，因為它可以幫助我們在相同的背景下呈現(xiàn)不同的變體。
讓一個組件對它的父寬度做出反應(yīng)是非常有用的。正如剛才所看到的，我們重新查看了桌面大小的頁面，并且有不同的部分，每個部分的列數(shù)不同。
在設(shè)計響應(yīng)式組件時避免復(fù)雜性
重要的是要記住，組件的內(nèi)部部分就像樂高游戲。我們可以根據(jù)當(dāng)前的變化對它們進行排序，但所有的東西都有一個限制。有時，前端開發(fā)人員最好處理一個全新的組件，而不是使用容器查詢創(chuàng)建變體。
考慮以下。
它具有以下內(nèi)容：
- 頭像
- 名稱
- 按鈕
- 鍵/值對
如果內(nèi)部部分保持不變，或者至少不包含新的部分，我們可以改變組件，并有如下所示的多種變化。
CSS容器查詢用例
我們來探索一些可以使用CSS容器查詢實現(xiàn)的用例。
聊天列表
我在Facebook messenger上看到了這種模式。聊天列表根據(jù)視口寬度改變。我們可以使用CSS容器查詢來實現(xiàn)它。
當(dāng)有足夠的空間時，清單將展開并顯示每個用戶的名稱。聊天列表的父元素可以是動態(tài)調(diào)整大小的元素(例如:使用CSS視口單元，或CSS比較函數(shù))。
- // HTML
- <div class="content">
- <aside>
- <ul>
- <li>
- <img src="shadeed.jpg" alt="Ahmad Shadeed" />
- <span class="name">Ahmad Shadeed</span>
- </li>
- </ul>
- </aside>
- <main>
- <h2>Main content</h2>
- </main>
- </div>
- // CSS
- .content {
- display: grid;
- grid-template-columns: 0.4fr 1fr;
- }
- aside {
- contain: layout inline-size style;
- }
- @container (min-width: 180px) {
- .name {
- display: block;
- }
- }
aside 寬度是0.4f，所以它是動態(tài)寬度。另外，我添加了contain屬性。然后，如果容器寬度大于180px，將顯示用戶名。
另一個類似的用例是側(cè)導(dǎo)航。我們可以切換導(dǎo)航項標(biāo)簽的位置，從在新行或旁邊的圖標(biāo)。
當(dāng)容器很小時，導(dǎo)航項標(biāo)簽是如何從一個新行切換的，當(dāng)有足夠的空間時，導(dǎo)航項標(biāo)簽是如何靠近導(dǎo)航圖標(biāo)的。
示例地址：https://codepen.io/shadeed/pen/Popmryw?editors=0100
~完，我是小智，我要去刷碗了，我們下期見!
作者：AAhmad Shadeed 譯者：前端小智 來源：shadeed
原文：https://ishadee.com/article/contner-queries-for-designers/
本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。
