容器查詢可傳送至穩定版瀏覽器

今年情人節，我們將表揚在所有穩定版瀏覽器中抵達的容器查詢和容器查詢單元數量。

Una Kravets

容器查詢熱烈登場！今年情人節，所有新式瀏覽器都穩定大小容器查詢和容器查詢單位。

瀏覽器支援

  • Chrome：105。
  • Edge：105，
  • Firefox：110。
  • Safari：16.

資料來源

透過容器查詢，您可以查詢父項元素的樣式資訊，例如 inline-size。您可透過媒體查詢查詢可視區域的大小，而容器查詢可讓元件根據使用者介面中的位置進行調整。

媒體查詢與容器查詢。

容器查詢特別適合用於回應式設計和可重複使用的元件。舉例來說，您可以啟用資訊卡元件，以便放置在側欄中，並在產品格線中以不同設定方式版面配置。

使用容器查詢

如要使用容器查詢，請先在父項元素上設定包含項目。方法是在父項容器上設定 container-type，或使用 container 簡寫同時為其同時提供類型和名稱：

.card-container {
  container: card / inline-size;
}

將 container-type 設為 inline-size，即可查詢父項的內嵌方向大小。在英文 (例如英文) 中，文字會內嵌從左到右，因此這是卡片寬度。

現在，您可以使用 @container，使用該容器將樣式套用至其任何子項：

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

此外，您也可以使用容器查詢長度單位值，就像使用可視區域單位值一樣。差別在於容器單元是對應至容器，而不是可視區域。下例示範如何使用容器查詢單位和 clamp() 函式，來提供最小和最大大小值的回應式字體排版：

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

上述 15cqi 是指容器內嵌大小的 15%。clamp() 函式的最小值為 2 小時，最大值為 4 Rem。與此同時，如果 15cqi 介於這些值之間，則文字會縮小並隨之放大。

容器查詢

為慶祝這個節慶期間容器查詢的喜悅，我們準備了一款 Valentine 供所有人盡情體驗，無論您瀏覽的是哪個 (最新版本) 且穩定的瀏覽器，都能享受愉快的體驗！