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

本指南將說明如何在 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 的連結。

   

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

   

尋找容器元素

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

將滑鼠遊標懸停在名稱上，就會變成「Elements」面板中的元素連結，而「Styles」窗格則會顯示查詢的屬性和目前的值。

修改容器查詢

如要對查詢進行偵錯，請按照「查看及變更 CSS」一文所述，在「Styles」窗格中以任何其他 CSS 宣告方式修改查詢。

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

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