エリック・ベイリーがピカリリの記事で使用しているような「コンテンツ認識コンポーネント」という用語が好きです CSSを使用したコンテンツを意識したコンポーネントの作成：has（）、グリッド、および数量クエリ。カードには写真がありますか？はい、あることをしてください、いいえ、別のことをしてください。そのようなこと。エリックには、UIコンポーネントが別のコンポーネントよりも多くの「タグ」を持っているため、レイアウトはそれらをより良く収容するように調整されます。
に感謝します :has()、「数量クエリ」のアイデア（たとえば、4つ以上の要素がある場合は要素のスタイル）がずっと簡単になりました。私がそれを理解する方法、私たちは好きになることができます：
.card:has(.tag:nth-child(4)) {
/* apply styles to the card because there are at least 4 tags */
}確かに、「3以下のタグ」が必要な場合は、このロジックはもう少し複雑になりますが、それはエリックが記事でまさにカバーし、元のアイデアとリソースをリンクしているので、あなたは幸運です。
先週のCSSデーで、私はアフマドシェイデッドが素晴らしいアイデアを持っているのを聞いていました ステージ上。 1つのアイテムのレイアウトを想像してください、あなたはそれを見せます。 2つのアイテム？並んで？ 3つのアイテム？たぶん2つ、一番上に1つ。 4？ 2 x 2。五？良い！それはたくさんのアイテムになりつつあります。それらを分割することができます カルーセル。すべてがCSSにあります。そうです 野生。いつか作りたいです。多分私は それをストリーミングしてみてください これらの日の1つ。 （もちろん、私がこれを書いているとき ケビン・パウエルはビデオを出しました それはアイデアに悩まされ、それは非常に賢いです。）
アフマドといえば、彼は素晴らしいです 記事の大規模な改善を紹介します attr() 関数 手に入れました。属性値をHTMLから引き抜き、実際に有用にする方法が大好きです。私たちはますますその力を実現すると思います。しかし、ここでは、この数量のクエリの状況を考慮に入れることができることが私に起こります。サーバーがこのようなものを知り、出力することを信頼しているとします。だから：
...
文字列ではなく実際の番号として、次のようなCSSで13を手に入れることができます。
attr(data-cards type(), 2) 上記の2番はフォールバックです。そのような数字で、それは私が多分 – 私たちはそれをnewfangledと組み合わせることができると思うようになります if() CSSのコマンド（参照 UNAの素晴らしいビデオ）同じ種類の「数量クエリ」ロジックを記述します。
YaはSassの方法を知っています @mixin CSSのブロックを繰り返すには？ネイティブCSSにはまだそれはありませんが、スタイルクエリはかなり近いです。ケビンのビデオからこのスクリーンショットを引っ掛けました（Codepen、当然）：
彼がどのようにフリップするかを見てください --custom-property 次に、そのカスタムプロパティが設定され、スタイルのブロックを出力すると、スタイルクエリが一致しますか？それは私にとってミックスインのようにひどい感じがします。 ミリアムには、ネイティブミキシン用の素敵なホームベースページがあります、一部にリンクしています 非常に積極的な議論 その上。ペースでは、CSSが動いています。私たちが知る前にそれを持っていると思います。ただ @applyは @mixin スタイルクエリアプローチよりも簡単なアプローチのように思えますが、パラメーターや場合によってはスロットを使用する可能性が高いため、より柔軟になります。
CSSカルーセル かなり多額のCSSになります。それを多額にするのはクールではないでしょうか @mixin それはあなたが望むどんな機能にパラメーターを取りますか？それを出荷します。
他のニュースでは、 ギャップの装飾 物事になり始めていて、それは素晴らしいことです。彼らがそこにHTML要素を必要とせずにグリッド領域のスタイリングに右に移動することを願っています。それは同じくらい素晴らしいことです。私はまだ記事のコンテンツの列全体をグリッドにすることをためらいますが、それは私の問題です、私は他の人がいるのを見ます 来る アイデアについて。
Views: 0
