容器查詢個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
Saurabh Rajpal
Saurabh Rajpal

容器查詢 可提供高度動態且靈活的回應式方法 設計。容器查詢使用規則中的 @container。運作方式類似 轉換為使用 @media 的媒體查詢,但 @container 會查詢父項 來呈現樣式資訊,而非可視區域和使用者代理程式。

容器查詢屬於基準新功能的一部分。

瀏覽器支援

  • Chrome:105。
  • Edge:105,
  • Firefox:110。
  • Safari:16.

資料來源

透過回應容器大小,容器查詢可讓元件 以便透過介面前往相關位置例如,資訊卡元件 例如側欄、主要元件 區段或格狀檢視畫面。

如下圖所示,您可以將媒體查詢合併為巨集 版面配置、適用於微版面配置的容器查詢、採用使用者偏好設定的媒體 建立強大的回應式設計系統。已讀 進一步瞭解容器查詢全新的回應式設計

這張圖片顯示了各種樣式設定如何搭配運作。
web.dev:全新的回應式網頁。

本文是探討電子商務公司運作方式的系列文章之一 運用新的 CSS 和 UI 功能提升網站品質這次我們會深入介紹 瞭解部分公司如何運用容器查詢,從中獲益。

redBus

redBus 會替自己的行動版和電腦版提供不同的程式碼。 只要在 觀光景點cargo 網頁,因此得以統一這個程式碼 並將程式碼彙整成單一程式碼集不僅為回應式設計,也方便儲存 相當可觀下例示範如何使用 Cargo 網頁:

程式碼

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

如果容器 bpdpSection 的寬度下限為 744px,則 font-sizeline-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;
   }
}

影響

變更前 (多個程式碼集) 使用後 (單一程式碼集)
基礎架構 獨立基礎架構 (成本高昂)。 相同的基礎架構 (成本較低)。
設計 有獨立的使用者介面,但一致性不佳。 困難重重,但可行。
成效 系統獨立,但會重複改善效能,因此易於管理。 這個網頁和功能相關,但 redBus PageSpeedInsights 獲得超過 80 分。
開發 不同的開發團隊 時間減少 30% 至 40%。

Tokopedia

Tokopedia 的產品詳細資料頁面 (PDP) 包含多個商店分頁, 產品資訊。先前,這個頁面的版面配置分為三個部分 有時候,就算是較小的產品名稱遭到截斷 螢幕大小 (請參閱下列「使用前」影片)。

為解決這個版面配置問題,該公司可以輕鬆快速採用容器查詢。 完成這項實作後,他們能靈活的版面配置,並設為 產品名稱一律都會完整顯示 (請參閱下方的「使用後」影片)。

之前

實作容器查詢前,「ISKU 10 in 1 Obeng」字樣 satu.」針對較小的螢幕,左上方的內容會遭到截斷。

使用後

實作容器查詢會調整版面配置,讓文字保持在可視區域內。

程式碼

以下程式碼會查詢名為 infowrapper 的父項容器大小。 如果 infowrapper 的寬度上限為 360 像素,則子項元件 widthmargin,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

資源:

探索本系列的其他文章,瞭解電子商務的運作方式 公司在使用全新 CSS 和 UI 功能 (例如捲動式介面) 時獲得良好成效 動畫、彈出式視窗、容器查詢和 has() 選取器。