意図したquery containerを確認
期待するcontainer-typeを設定し、複雑な画面ではcontainer-nameで誤った祖先への参照を防ぎます。ルールの原因を調べる前に、実際のコンテナとinline-sizeを確認します。
.card-grid {
container: cards / inline-size;
}
@container cards (min-width: 42rem) {
.card { grid-template-columns: 12rem 1fr; }
}境界の前後をテストする
672pxで変化するなら671、672、673pxを確認します。同じ部品を本文、サイドバー、モーダル、分割画面に置き、同じviewportでもローカル領域に合うか検証します。
カスタムviewportで境界を探し、実際のコンテナ幅は開発ツールで確認します。
コンテンツ負荷をかける
短い英語見出しだけでは不十分です。長い中国語、英語、日本語、画像なし、長いバッジ、割引、エラー状態で境界付近のoverflowや不安定な切替を探します。
- 1行と3行の見出し
- 画像あり、なし、読込失敗
- 0個、1個、複数の操作
- 長い翻訳と右から左の言語
入れ子とフィードバックループ
入れ子部品は最も近い無名コンテナを意図せず参照することがあります。結果がコンテナ自身のサイズを変えて不安定になる構造を避け、明確な名前と責任を設定します。
利用可能な基本レイアウトを残す
Container Queriesなしでも読めて操作できる基本版を先に作ります。機能が使えない場合も内容順、ボタン、データが消えないようにします。