Dave Rupert による最新の CSS マジック コンポーネントの CSS が、投入したコンテンツを処理できない場合はどうなるでしょうか。
特定の状況は、レイアウト グリッドが偶数のアイテムを想定しているが、代わりに奇数が提供されている場合です。 最後に「ぶら下がっている」要素が残っており、レイアウトから外れています。 必要なものはいくつかあるようです 防御的な CSS そしてデイブはそれを達成します。
彼は手を伸ばす :has() 奇数の項目を含むグリッドの最後の項目を嗅ぎ分ける気の利いたセレクターを作成するには:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }それを分解する：
- の親コンテナがあります
.items. - コンテナの場合
:has()an.itemそのタイプの最後の子である、 - …そしてそれ
.itemたまたま奇数のインスタンスであり、 - …次に、最初のものを選択します
.itemそのタイプの要素とスタイルを設定してください!
この場合、最後の .item レイアウトの穴を防ぐために全幅に設定できます。
If... then... CSS には条件付きロジック機能があります。 現時点では、Safari TP と Edge/Chrome Canary のサポートについてのみ説明していますが、これは非常に素晴らしいことです。
偶然にも、Temani Afif は最近、彼が学んだトリックを共有しました。 暗黙的なグリッドの実験. CSS グリッドの自動配置アルゴリズムを利用することで、グリッドの列と行の固定数を明示的に宣言する必要さえありません — 必要に応じて CSS がそれらを作成します!
いいえ、Temani の手法は、Dave の「ダングラー」ジレンマに対する代替ソリューションではありません。 しかし、再現可能なグリッド レイアウト パターンへの Temani のアプローチと、Dave の防御的な CSS の使用を組み合わせると、 :has()、非常に強力で複雑に見えるグリッドが得られます。これは軽量で、バランスの取れた反復可能なパターンを維持しながら、任意の数のアイテムを処理できます。
