開發人員工具提示:如何檢查 CSS 容器查詢

Sofia Emelianova
Sofia Emelianova

CSS 容器查詢是網頁程式開發人員樂見的全新 CSS 功能。這可能會觸發網頁設計的革新,從網頁式回應式設計到容器式回應式設計都包含在內。

Chrome 開發人員工具可協助您採用新的版面配置設計模式,並隨時掌握最新趨勢。透過支援這項 CSS 功能,您現在可以在開發人員工具中檢查容器查詢並偵錯。

上方影片將概略介紹容器查詢、相關語法,以及如何在開發人員工具中檢查這些查詢。

您現在可以透過可切換虛線疊加層的相應徽章,探索容器元素及其子系。

容器徽章。

當容器符合查詢條件時,檢查套用至子系的 @container 規則。

@container 規則。

如要進一步瞭解開發人員工具中的容器查詢支援功能,請參閱「檢查及偵錯 CSS 容器查詢」。