檢查 CSS 容器查詢並進行偵錯

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

本指南說明如何在 Chrome 開發人員工具的「Elements」面板中檢查 CSS 容器查詢並偵錯。

CSS 容器查詢可讓您根據元素的父項容器屬性操控元素的樣式。這項功能將回應式網頁設計的概念從網頁式轉移到容器式。

本指南中的螢幕截圖取自這個示範頁面。

探索容器及其子系

在「元素」面板中，定義為查詢容器的每個元素旁邊都會顯示 container 標記。徽章會切換容器及其子系的虛線疊加層。

如要切換重疊元素，請按照下列步驟操作：

  1. 開啟開發人員工具。
  2. 在「元素」面板中，按一下已定義為容器的元素旁邊的 container 徽章。

容器徽章。

在這個範例中，container-type: inline-size 屬性定義了容器元素。子係可以查詢其內嵌尺寸 (水平軸)，並根據容器寬度變更樣式。

檢查容器查詢

子元素 (即容器符合查詢條件時) 會在「元素」面板中顯示 @container 查詢宣告。

如要瞭解何時可以檢查這個示範頁面中的 @container 宣告，請查看以下程式碼範例：

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

在這個範例中，如果容器的寬度超過下列像素數量，系統就會套用對應的樣式：

  • 大於 400px：段落 (p) 元素會以區塊的形式顯示在頁面上，這會自成一行開始，並佔滿整個寬度。
  • 600px 以上：子系採用水平格線版面配置，標題 (h1) 在頂端，圖片 (img) 位於左側。

如要檢查第一個 @container 宣告：

  1. 在「Elements」面板中，將容器的寬度設為 500px。系統會隨即顯示 p 元素。

  2. 選取 p 元素。在「Styles」窗格中，系統會顯示 @container 宣告，以及父項容器 article.card 的連結。

    @container 宣告。

  3. 將寬度設為大於 600px，然後選取任何受影響的元素。觀察實作水平版面配置的 @container 宣告。

    更多 @container 宣告。

尋找容器元素

如要尋找並選取導致查詢生效的容器元素，請將滑鼠遊標懸停在 @container 宣告上方的元素名稱上，

將滑鼠遊標懸停在元素名稱上。

當遊標懸停在「Elements」面板中，名稱會轉為元素連結，「Styles」窗格則會顯示查詢的屬性及其目前的值。

修改容器查詢

如要對查詢進行偵錯，請將其修改為「樣式」窗格中的任何其他 CSS 宣告，如「查看及變更 CSS」一文所述。

在此範例中，容器的寬度為 500px。網頁上會顯示段落 (p) 元素。

  1. 選取 p 元素。在「Styles」窗格中。您可以看到 @container (inline-size > 400px) 宣告。
  2. 將 inline-size 從 400px 變更為 520px。
  3. 段落 (p) 元素不符合查詢條件，因此從頁面中移除。