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

今年的情人節，我們慶祝大小容器查詢和容器查詢單位在所有穩定版瀏覽器中上線。

Una Kravets

容器查詢功能即將推出！今年的情人節，所有新型瀏覽器的大小容器查詢和容器查詢單位都已穩定運作。

瀏覽器支援

  • Chrome：105。
  • Edge：105。
  • Firefox：110。
  • Safari：16 歲。

資料來源

您可以使用容器查詢，查詢父項元素 (例如 inline-size) 的樣式資訊。您可以使用媒體查詢查詢可視區大小，容器查詢則可讓元件根據 UI 中的位置變更。

媒體查詢與容器查詢。

容器查詢特別適合回應式設計和可重複使用的元件。舉例來說，您可以啟用可在側欄中以一種方式排版，以及在產品格狀檢視畫面中以不同設定排版的資訊卡元件。

使用容器查詢

如要使用容器查詢，請先在父元素上設定容納值。方法是設定父項容器的 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() 函式會將此值設為 2rem 的下限和 4rem 的上限。同時，如果 15cqi 介於這些值之間，文字會相應縮小和放大。

容器查詢情人節

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