下一代 CSS：@container

• 原文地址：Next Gen CSS: @container
• 原文做者：Una Kravets
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：霜羽 Hoarfroster
• 校對者：Chorer、Kim Yang

Chrome 正在試驗 CSS @container 查詢器功能，這是由 Oddbird 的 Miriam Suzanne 和一羣網絡平臺開發者支持的 CSS 工做組 Containment Level 3 規範。@container 查詢器使咱們可以根據父容器的大小來設置元素的樣式。

@container API 不穩定，會受到語法變化的影響。若是你想要本身嘗試一下，可能會遇到一些錯誤。請將這些錯誤報告給相應的瀏覽器引擎！報告錯誤的連接以下：

• Chrome
• Firefox
• Safari

你能夠把這些想象成一個媒體查詢（@media），但不是依靠 viewport 來調整樣式，而是你的目標元素的父容器會調整這些樣式。

容器查詢將是自 CSS3 以來 Web 樣式的最大變化，將會改變咱們對「響應式設計」含義的見解。

viewport 和用戶代理再也不是咱們建立響應式佈局和 UI 樣式的惟一目標。經過容器查詢，元素將可以定位本身的父元素並相應地應用本身的樣式。這意味着存在於側邊欄、主體或頭圖中的相同元素可能會根據其可用大小和動態看起來徹底不一樣。

@container 實例

在本示例中，我在父級中使用了兩張帶有如下標記的卡片：

<div class="card-container">
    <div class="card">
        <figure> ...</figure>
        <div>
            <div class="meta">
                <h2>...</h2>
                <span class="time">...</span>
            </div>
            <div class="notes">
                <p class="desc">...</p>
                <div class="links">...</div>
            </div>
            <button>...</button>
        </div>
    </div>
</div>
複製代碼

而後，我在將查詢容器樣式的父級（.card-container）上設置 Containment（contain 屬性）。我還在 .card-container 的父級上設置了一個相對網格佈局，所以它的 inline-size 將根據該網格而改變。這就是我使用 @container 查詢的內容：

.card-container {
  contain: layout inline-size;
  width: 100%;
}
複製代碼

如今，我能夠查詢容器樣式來調整樣式！這與使用基於寬度的媒體查詢設置樣式的方式很是類似，當元素小於指定尺寸時使用 max-width 設置樣式，當元素大於指定尺寸時使用 min-width。

/* 當父容器寬度小於 850px， 再也不顯示 .links 而且減少 .time 字體尺寸 */

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

/* 當父容器寬度小於 650px 時， 減少 .card 元素之間的網格間距到 1rem */

@container (max-width: 650px) {
  .card {
    gap: 1rem;
  }

  /* ... */
}
複製代碼

容器查詢 + 媒體查詢

容器查詢的最佳功能之一是可以將 微觀上的佈局 與 宏觀上的佈局 分開。咱們可使用容器查詢設置單個元素的樣式，建立細微的微觀佈局，並使用媒體查詢（宏佈局）設置整個頁面佈局的樣式。這創造了一個新的控制水平，使界面更具響應性。

這是另外一個示例。它展現了使用媒體查詢進行宏觀佈局（即日曆從單面板到多面板）和微觀佈局（即日期佈局/大小和事件邊距/大小移動），以建立一個漂亮的和諧的查詢。

容器查詢 + CSS 網格

我我的最喜歡的查看容器查詢影響的方法之一是查看它們在網格中的工做方式。如下面的植物貿易 UI 爲例：

本網站根本沒有使用媒體查詢。相反，咱們只使用容器查詢和 CSS 網格來在不一樣的視圖中顯示購物卡組件。

在產品網格中，佈局使用了 grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); 標記建立。這將建立一個佈局，告訴卡片佔用可用的小數空間，直到它們的大小達到 230px，而後下一格切換到下一行。你能夠在 1linelayouts.com 上查看更多網格技巧。

而後，咱們有一個容器查詢，當卡片寬度小於 350px 時，它會將卡片樣式設置爲採用垂直塊佈局，並經過應用 display: flex（默認狀況下具備內聯流）轉換爲水平內聯佈局。

@container (min-width: 350px) {
  .product-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  /* ... */
}
複製代碼

這意味着每張卡片擁有本身的響應式樣式。這是咱們使用產品網格建立宏觀佈局以及使用產品卡片建立微觀佈局的另外一個示例，酷斃了！

用法

爲了使用@container，首先須要建立一個具備 Containment 的父元素。爲此，咱們須要在父級上設置 contain: layout inline-size。由於咱們目前只能將容器查詢應用於內聯軸，因此咱們只可使用 inline-size。這也能夠防止咱們的佈局在塊方向上中斷。

設置 contain: layout inline-size 會建立一個新的 Containment 塊 和新的塊格式上下文，讓瀏覽器將其與佈局的其他部分分開，如今咱們就可使用容器查詢了！

限制

目前，您不能使用基於高度的容器查詢，只能使用塊軸方向上的查詢。爲了讓網格子元素與 @container 一塊兒工做，咱們須要添加一個容器元素。儘管如此，添加容器仍可以讓咱們得到所需的效果。

試試看

您如今能夠在 Chromium 中試驗 @container 屬性，方法是導航到：Chrome Canary 中的 chrome://flags 頁面並打開 #experimental-container-queries 標誌。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。