CSS容器查詢終于來(lái)了! 它們目前在谷歌瀏覽器（105）中得到了支持，很快就會(huì)在Safari 16中得到支持。這對(duì)前端來(lái)說(shuō)容器查詢與媒體查詢一樣重要。

在這節(jié)課中，我們介紹一下容器查詢是如何工作的，如何使用它們，以及語(yǔ)法是什么樣子的，并分享一些現(xiàn)實(shí)生活中的例子和用例。

簡(jiǎn)介

在設(shè)計(jì)一個(gè)組件時(shí)，我們需要適配不同的變化，并根據(jù)CSS類或視口大小來(lái)改變它們。這對(duì)于我們開(kāi)發(fā)來(lái)說(shuō)不是很理想，會(huì)迫使我們根據(jù)變化類或視口尺寸來(lái)寫(xiě)CSS。

考慮下面例子：

我們有一個(gè)卡片組件，當(dāng)視口足夠大時(shí)，它應(yīng)該切換到水平樣式。乍一看，這可能聽(tīng)起來(lái)不錯(cuò)。然而，當(dāng)你更深入地思考這個(gè)問(wèn)題時(shí)，它就有點(diǎn)復(fù)雜了。

如果我們想在不同的地方使用同一個(gè)卡片組件，比如在空間狹小的側(cè)邊欄和有更多空間的主區(qū)域，我們就需要使用不同的類來(lái)適配：

.c-article {
  /* Default stacked style */
}
@media (min-width: 800px) {
  /* Horizontal style. */
  .c-article--horizontal {
    display: flex;
    align-items: center;
  }
}

如果我們不想用上面的方式，那么會(huì)出現(xiàn)下面這樣的情況：

這種從用戶界面的角度來(lái)看，并不友好。

通過(guò)容器查詢，我們可以簡(jiǎn)單地編寫(xiě)響應(yīng)父級(jí)或容器寬度的CSS。請(qǐng)看下圖：

注意到在媒體查詢中，我們是如何根據(jù)視口或屏幕寬度來(lái)查詢一個(gè)組件的。在容器查詢中，同樣的情況發(fā)生在父級(jí)上。

什么是容器查詢？

通過(guò) container-type 屬性查詢一個(gè)組件與最接近的父類的關(guān)系，該父類有一個(gè)定義的包含物。

我們過(guò)去在媒體查詢中寫(xiě)CSS的方式，但只是針對(duì)組件層面。

容器查詢語(yǔ)法

要根據(jù)一個(gè)組件的父級(jí)寬度查詢，我們需要使用 container-type 屬性。看下面的例子"

.wrapper {
  container-type: inline-size;
}

有了這些，我們就可以開(kāi)始查詢一個(gè)組件。在下面的例子中，如果.card元素的容器的寬度等于400px或更大，我們需要添加一個(gè)特定的樣式。

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

雖然上述方法可行，但當(dāng)有多個(gè)容器時(shí)，就會(huì)造成混亂。為了避免這種情況，最好為一個(gè)容器命名。

.wrapper {
  container-type: inline-size;
  container-name: card;
}

現(xiàn)在，我們可以在 @container 旁邊加容器名稱，如下所示。

@container card (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

完整代碼：

.wrapper {
  container-type: inline-size;
  container-name: card;
}
.c-article {
  /* Default stacked style */
}

@container card (min-width: 400px) {
  /* Horizontal style. */
  .c-article {
    display: flex;
    align-items: center;
  }
}

瀏覽器支持

容器查詢現(xiàn)在在Chrome 105中得到支持，并很快在Safari 16中得到支持。

事例

這邊有10個(gè)關(guān)于容器查詢的事例，地址：https://lab.ishadeed.com/container-queries。