容器查詢個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

容器查詢 提供高度動態且彈性的方法，可進行回應式設計。容器查詢會使用 @container at 規則。這項功能與使用 @media 的媒體查詢類似，但 @container 會查詢父項容器的樣式資訊，而不是檢視區塊和使用者代理程式。

容器查詢可回應容器大小，讓元件配合介面中的位置調整大小。舉例來說，卡片元件可以根據放置的容器調整大小和樣式，無論是側欄、主打區塊或頁面主體內的格線都適用。

如下圖所示，您可以結合巨集版面配置的媒體查詢、微版面配置的容器查詢，以及以使用者偏好設定為依據的媒體查詢，建立強大的回應式設計系統。進一步瞭解容器查詢和全新回應式設計。

圖片：顯示不同類型的樣式如何搭配運作。
web.dev：全新回應式設計。

本文是系列文章之一，探討電子商務公司如何運用全新的 CSS 和 UI 功能，提升網站品質。這次我們將深入探討幾家公司如何使用容器查詢，並從中獲益。

redBus

redBus 會維護並提供行動版和電腦版網站的不同程式碼。在「Things-to-do」和「cargo」頁面導入容器查詢後，他們就能將這些網站的程式碼統一為單一程式碼庫。這讓他們能夠快速回應，並節省開發時間。以下範例說明如何使用貨物頁面執行這項操作：

程式碼

在以下範例中，.bpdpCardWrapper 是父項容器，名稱為 bpdpSection。

如果容器 bpdpSection 的最小寬度為 744 像素，系統會更新 font-size 和 line-height，以顯示 .bpdpCardContainer 和 .subTxt, .bpdpAddress 選取的元件。

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

影響

變更前 (多個程式碼集) 之後 (單一程式碼集)
基礎架構 基礎架構各自獨立 (成本高)。 使用相同基礎架構 (降低成本)。
設計 UI 分開，但一致性不佳。 難以解決，但並非不可能。
效能 容易處理，因為系統是分開的，但改善效能的工作會重複。 這項指標與網頁和功能有關，但 redBus PageSpeedInsights 分數高於 80 分。
開發 開發人員團隊各自獨立。 節省 30% 至 40% 的時間。

Tokopedia

Tokopedia 的產品詳細資料頁面 (PDP) 包含商店和產品資訊的多個分頁。先前，這個頁面的版面配置分為三欄，有時左側的產品名稱會因螢幕尺寸較小而遭到截斷 (請參閱下方的「先前」影片)。

為解決這個版面配置問題，他們輕鬆快速地採用了容器查詢。實作這項功能後，他們就能採用彈性版面配置，確保產品名稱一律完整顯示 (請參閱下方的「實作後」影片)。

之前

實作容器查詢前，左上方的「ISKU 10 in 1 Obeng satu..」字詞在較小的螢幕尺寸上會遭到截斷。

晚於

導入容器查詢會調整版面配置，讓文字顯示在可視區域內。

程式碼

下列程式碼會查詢名為 infowrapper 的父項容器大小。 如果 infowrapper 的最大寬度為 360 像素，子元件的 width、margin, 和 padding 會隨之調整。

將 container-type 設為 inline-size 會查詢父項的內嵌方向大小。在英文等拉丁語言中，由於文字會從左到右內嵌流動，因此這會是父項容器的寬度。

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

使用容器查詢時的注意事項

Tokopedia 發現網站上有文字省略號，因此找到適合的用途。 這表示容器可能太小，導致內容遭截斷，使用者無法完整瀏覽。

電子商務網站的容器查詢另一個實用用途，是找出重複使用的元件。舉例來說，系統可能會根據父項容器以不同方式顯示「加入購物車」按鈕 (例如，如果按鈕位於產品資訊卡中，可能只會顯示圖示；如果按鈕是網頁上的主要號召性動作，則可能會顯示圖示和文字)。按鈕很適合使用容器查詢。

您可以選擇逐步改善網站。舉例來說，您可以從較小的應用實例著手，例如 Tokopedia 的橢圓形範例，並在其中實作容器查詢。然後逐步找出更多案件，並改善 CSS。

資源：

歡迎參閱本系列的其他文章，瞭解電子商務公司如何運用捲軸驅動動畫、快顯視窗、容器查詢和 has() 選取器等 CSS 和 UI 新功能獲益。