Front-End-Checklist 容器查詢規(guī)則用 container 打造真正可復(fù)用的組件級(jí)響應(yīng)式布局【免費(fèi)下載鏈接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents項(xiàng)目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist在 Front-End-Checklist 的 CSS 規(guī)則體系中container-queries規(guī)則優(yōu)先級(jí) medium、難度 intermediate、預(yù)計(jì)耗時(shí) 20 分鐘教給開發(fā)者和 AI Agent 一個(gè)核心能力讓組件根據(jù)自身容器的尺寸而非視口寬度來(lái)自適應(yīng)布局。讀完本篇你將掌握container-type的設(shè)置方式、container斷言語(yǔ)法、命名容器與容器單位cqi/cqw/cqmin 等的完整用法并理解該規(guī)則如何被倉(cāng)庫(kù)中的 MCP 代碼審查工具自動(dòng)檢測(cè)和驗(yàn)證。為什么需要容器查詢媒體查詢的“上下文依賴”問題媒體查詢media的斷言對(duì)象是視口寬度這導(dǎo)致組件天然帶有上下文依賴一張為 3 列網(wǎng)格設(shè)計(jì)的卡片一旦被放進(jìn) 2 列網(wǎng)格或側(cè)邊欄布局就可能破碎。容器查詢解決了這個(gè)問題——卡片可以根據(jù)容器實(shí)際分配給它的空間自行決定布局從而在側(cè)邊欄、網(wǎng)格、全寬區(qū)域等任何布局上下文中都保持可用。這正是 規(guī)則頁(yè)面 中whyItMatters字段給出的核心論斷容器查詢讓組件“genuinely reusable in any layout context”在任何布局上下文中真正可復(fù)用?；A(chǔ)用法父元素定義容器子元素查詢?nèi)萜魅萜鞑樵兊耐暾ぷ髂Ｊ椒謨刹皆诟冈厣隙x容器在子元素上查詢?nèi)萜?。這是 rules 參考文檔 給出的標(biāo)準(zhǔn)代碼示例/* 1. Define the container on the PARENT */ .card-container { container-type: inline-size; /* Optionally name it */ container-name: card; /* Shorthand */ container: card / inline-size; } /* 2. Query the container from the CHILD */ container (min-width: 400px) { .card { display: flex; gap: 1.5rem; } .card__image { flex: 0 0 200px; } }要點(diǎn)拆解container-type: inline-size是啟用容器查詢的前提寫在父級(jí)元素上container-name簡(jiǎn)寫為container: card / inline-size給容器命名供后續(xù)精確指定目標(biāo)container (min-width: 400px)的斷言條件是最近命名容器的 inline 尺寸而非視口當(dāng)容器寬度達(dá)到 400px 時(shí)卡片切換為橫向 flex 布局。命名容器在多個(gè)祖先容器中精確尋址當(dāng)頁(yè)面上存在多個(gè)容器如側(cè)邊欄與主內(nèi)容區(qū)時(shí)匿名container只匹配最近的容器而命名容器允許你在斷言中指名道姓地針對(duì)特定祖先/* Name containers to target specific ancestors */ .sidebar { container: sidebar / inline-size; } .main-content { container: main / inline-size; } /* Target the sidebar container specifically */ container sidebar (max-width: 300px) { .widget { font-size: 0.875rem; } } container main (min-width: 800px) { .article { column-count: 2; } }這個(gè)模式的價(jià)值在于同一個(gè).widget組件在側(cè)邊欄中縮小字號(hào)而主文章區(qū)在寬度足夠時(shí)開啟雙欄排版——兩條規(guī)則互不干擾因?yàn)閏ontainer sidebar與container main各自只匹配對(duì)應(yīng)命名的容器。實(shí)戰(zhàn)案例三檔自適應(yīng)的卡片組件參考文檔 中給出的“Real-World Card Component”展示了容器查詢最典型的應(yīng)用一張卡片在任意位置側(cè)邊欄、網(wǎng)格、全寬都能根據(jù)可用空間切換三檔布局/* The card works anywhere — sidebar, grid, full-width */ .card-wrapper { container-type: inline-size; } .card { /* Stacked layout by default (narrow context) */ display: grid; gap: 1rem; } .card__image { aspect-ratio: 16 / 9; } /* Side-by-side layout when theres enough room */ container (min-width: 480px) { .card { grid-template-columns: 200px 1fr; align-items: start; } .card__image { aspect-ratio: 1; } } /* Richer layout at wide sizes */ container (min-width: 720px) { .card { grid-template-columns: 320px 1fr; } .card__meta { display: flex; gap: 1rem; } }三檔布局策略值得注意默認(rèn)檔窄容器grid 縱向堆疊圖片保持 16:9 寬高比480px 檔圖片與正文并排200px 固定圖列 1fr 文本列圖片切換為 1:1720px 檔圖列加寬到 320px元信息區(qū).card__meta展開為橫向 flex。關(guān)鍵在于斷言基準(zhǔn)是.card-wrapper的寬度同一張卡片放進(jìn) 360px 的側(cè)邊欄時(shí)永遠(yuǎn)停在第一檔放進(jìn) 1200px 的全寬區(qū)域則自動(dòng)升到第三檔——無(wú)需為每種頁(yè)面布局單獨(dú)寫媒體查詢。container-type 的三種取值container-type決定元素是否成為容器以及可查詢的維度container-type: normal; /* Default — not a container */ container-type: inline-size; /* Queries based on inline (usually width) dimension */ container-type: size; /* Queries based on both inline and block dimensions */normal默認(rèn)值元素不是容器inline-size最常用僅暴露 inline 維度橫排書寫方向下即寬度供查詢。注意它會(huì)使元素產(chǎn)生類似contain: inline-size的布局隔離——元素的 inline 尺寸不再依賴子元素內(nèi)容size同時(shí)暴露 inline 與 block 兩個(gè)維度因此可以使用min-height/max-height等 block 維度斷言但代價(jià)是元素的兩個(gè)維度都必須顯式確定不能由子元素?fù)伍_使用受限較多實(shí)踐中優(yōu)先選擇inline-size。容器單位隨容器縮放的比例單位除了斷言容器查詢還引入了一組容器查詢單位讓字號(hào)、間距等聲明隨容器尺寸連續(xù)縮放而非在斷言點(diǎn)跳變/* Relative to the nearest container */ .responsive-text { font-size: clamp(1rem, 4cqi, 2rem); /* cqi 1% of containers inline size */ /* cqb 1% of containers block size */ /* cqw, cqh same but always width/height */ /* cqmin, cqmax minimum/maximum of the two */ }六個(gè)單位一覽單位基準(zhǔn)說(shuō)明cqi容器 inline 尺寸隨書寫方向通常等于寬度cqb容器 block 尺寸隨書寫方向通常等于高度cqw容器寬度始終按物理寬度計(jì)算cqh容器高度始終按物理高度計(jì)算cqmin兩者較小值等價(jià)于 CSS 全局單位min()的語(yǔ)義cqmax兩者較大值等價(jià)于 CSS 全局單位max()的語(yǔ)義示例中clamp(1rem, 4cqi, 2rem)的含義是字號(hào)跟隨容器的 4% 線性縮放并限制在 1rem2rem 之間——容器查詢單位與clamp()配合是替代“字號(hào)斷言階梯”的平滑方案。與 CSS Containment 的關(guān)系container-type 自動(dòng)設(shè)置隔離規(guī)則頁(yè)面 的relatedRules明確將css-containment列為關(guān)聯(lián)規(guī)則理由是“Container queries require containment — container-type automatically sets it”容器查詢依賴隔離container-type會(huì)自動(dòng)設(shè)置它。這一點(diǎn)在 css-containment 規(guī)則文檔 中得到呼應(yīng)contain: inline-size的取值注釋即為 “Inline size is independent (for container queries)”。這意味著給元素設(shè)置container-type: inline-size時(shí)瀏覽器隱式施加了 inline-size 方向的布局隔離容器內(nèi)部的布局變化不會(huì)向外傳播容器尺寸的計(jì)算也不再依賴子元素。這一機(jī)制是容器查詢能夠保證布局穩(wěn)定性的底層原因同時(shí)也是使用時(shí)的注意事項(xiàng)——如果某個(gè)祖先元素本應(yīng)被子元素內(nèi)容撐開高度直接對(duì)它啟用容器類型會(huì)改變其行為這是引入容器查詢后最常見的副作用來(lái)源。瀏覽器支持與項(xiàng)目支持?jǐn)?shù)據(jù)的自動(dòng)化參考文檔 的 Support Notes 給出該規(guī)則在當(dāng)前倉(cāng)庫(kù)的支持基線該特性在項(xiàng)目當(dāng)前瀏覽器矩陣上受支持Baseline 兼容最低版本為chrome 115、edge 115、firefox 116、safari 16.4、safari_ios 16.4當(dāng)項(xiàng)目必需的目標(biāo)瀏覽器落在此支持范圍之外時(shí)應(yīng)補(bǔ)充回退或漸進(jìn)增強(qiáng)說(shuō)明。這些數(shù)字并非手寫維護(hù)而是由倉(cāng)庫(kù)的腳本管線從權(quán)威數(shù)據(jù)源計(jì)算得出。從 rule-support-data.ts 的源碼可以看到規(guī)則 slug 被映射到 MDN Browser Compat Data 的特性 IDconst RULE_SUPPORT_FEATURE_MAP: Recordstring, string { // ... container-queries: css.at-rules.container, // ... }getRuleSupportData 函數(shù)則以項(xiàng)目browserslist配置解析出的目標(biāo)瀏覽器列表為輸入對(duì)照 BCD 數(shù)據(jù)標(biāo)記出不受支持的目標(biāo)并從baseline-browser-mapping包讀取 Baseline 最低版本。也就是說(shuō)文檔中“supported across the current project browser matrix”這句結(jié)論是從項(xiàng)目的瀏覽器目標(biāo)配置與 BCD 兼容性數(shù)據(jù)比對(duì)后生成的事實(shí)適用前提正是項(xiàng)目browserslist配置所聲明的瀏覽器范圍。規(guī)則在 MCP 審查工具中的自動(dòng)檢測(cè)該規(guī)則在倉(cāng)庫(kù)中不只是一篇文檔——MCP 工具包 的代碼審查工具內(nèi)置了對(duì)應(yīng)的啟發(fā)式檢測(cè)邏輯。在 review-code.ts 中// Container queries — modern responsive alternative to media queries if (slug.includes(container-queries) || slug.includes(container-query)) { const mediaQueries (code.match(/media\s/gi) || []).length const containerQueries (code.match(/container\s/gi) || []).length if ( mediaQueries MEDIA_QUERY_THRESHOLD containerQueries 0 lowerCode.includes(component) ) { return { hasIssue: true, issue: Found component-scoped CSS with media queries but no container queries (consider container queries for component-level responsiveness) } } }配合閾值定義 MEDIA_QUERY_THRESHOLD 3“3 media queries before suggesting container for component-scoped CSS”可以完整讀出該工具的判定條件當(dāng)被審查的組件級(jí) CSS 中出現(xiàn)超過 3 條media斷言、且沒有任何container斷言時(shí)工具會(huì)報(bào)告問題并建議改用容器查詢實(shí)現(xiàn)組件級(jí)響應(yīng)式。這與規(guī)則文檔“Check”環(huán)節(jié)的指引——“Look for components in this CSS that have media query breakpoints — consider whether container queries would make them more reusable”——完全一致人工審查與機(jī)器啟發(fā)式共用同一判斷標(biāo)準(zhǔn)。Skill 工作流Check / Fix / Explain / Code Review倉(cāng)庫(kù)中對(duì)應(yīng)的 SKILL.md 為 Agent 定義了四個(gè)標(biāo)準(zhǔn)動(dòng)作可作為人工自查清單直接復(fù)用Check查找樣式中帶有媒體查詢斷點(diǎn)的組件評(píng)估改用容器查詢是否能讓其在不同布局上下文中更可復(fù)用Fix將組件從基于媒體查詢的響應(yīng)式用container-type與container改造為基于容器查詢的響應(yīng)式Explain解釋容器查詢與媒體查詢的區(qū)別、為何容器查詢帶來(lái)更好的組件復(fù)用以及如何建立“容器/查詢”的父子關(guān)系Code Review審查與容器查詢相關(guān)的樣式表、組件樣式與響應(yīng)式狀態(tài)標(biāo)記出在渲染結(jié)果中違反該規(guī)則的精確選擇器、聲明或斷點(diǎn)。驗(yàn)證清單在提交修改前參考文檔 要求完成以下驗(yàn)證步驟在受該規(guī)則影響的斷點(diǎn)與交互狀態(tài)下檢查渲染后的 UI在 DevTools 中確認(rèn)計(jì)算樣式computed styles與預(yù)期修復(fù)一致上線前至少測(cè)試一個(gè)移動(dòng)端視口和一個(gè)桌面端視口如果規(guī)則影響到動(dòng)效、對(duì)比度或布局穩(wěn)定性需直接驗(yàn)證這些面向用戶的表現(xiàn)。小結(jié)container-queries規(guī)則的核心脈絡(luò)可以概括為一條鏈路父元素container-type: inline-size定義容器并隱式獲得 inline-size 隔離→ 子元素用container斷言按容器尺寸切換布局 → 用命名容器在多容器頁(yè)面精確尋址 → 用cqi/cqmin等單位實(shí)現(xiàn)平滑縮放 → 按項(xiàng)目的瀏覽器目標(biāo)與 Baseline 版本chrome 115 / firefox 116 / safari 16.4 等確認(rèn)兼容性。倉(cāng)庫(kù)中從 規(guī)則內(nèi)容、Agent Skill 到 MCP 自動(dòng)檢測(cè) 與 支持?jǐn)?shù)據(jù)腳本圍繞同一條規(guī)則形成了“文檔—自動(dòng)化—驗(yàn)證”的完整閉環(huán)這套模式對(duì)理解 Front-End-Checklist 的規(guī)則工程化設(shè)計(jì)也有參考價(jià)值。【免費(fèi)下載鏈接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents項(xiàng)目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考