セレクターが行うことの違いを説明できますか :has(:not) 対 :not(:has)? Kilian Valkhof が、先ほどリンクした投稿を書きました。私は、彼が考え抜く方法として、すべてを書き出すことを教えているのが好きです。 暗黙の 仕事中のセレクター。例えば：
.card:has(:not(img)) {}
.card:not(:has(img)) {}Code language: CSS (css)本当に:
.card:has(*:not(img)) {}
.card:not(.card:has(img)) {}Code language: CSS (css)後者は私にとってより明確になります。
- 内のすべてのものを選択します
.cardそれはそうではありませんimg。 - が含まれていないカードを選択してください。
img。
超違う。こういうのが大好きなんです。 CSS オタク向けの Sudoku パズルのようなものです。
といえば :has()、 Heydon は「サイドバー」レイアウトで少し哲学的になります、特定のレイアウトでそれを処理する方法を考えるときに、どのようにより柔軟になるかを説明します。 たまたまサイドバーがあるだけです。 そして たまたまそうなる の専門です :has()、素敵な少量で磨き上げられました @container。
こんなことになるとは知りませんでしたが、とても気に入っていますし、直感的に理解できました。ウナさんはこう説明する スタイルクエリの範囲構文。
@container style(--rain-percent > 45%) {
.weather-card {
background: linear-gradient(140deg, skyblue, lightblue);
}
}Code language: CSS (css)私の脳は今どうやって動いていますか line-height 多くの場合、吸い込まれる必要があります。 font-size 上がります。したがって、これらがカスタム プロパティを活用していると仮定すると、次のようなものがクールになる可能性があります。
@container style(--font-size > 2rem) {
line-height: 1;
}Code language: CSS (css)しかし、カスタム プロパティを設定したのと同じ要素に対してコンテナ クエリを実行できないという事実によって、私の熱意は弱まります。したがって、次のようには機能しません:
h1, h2, h3 {
font-size: var(--header-font-size, 1.5rem);
@container style(--header-font-size > 2rem) {
line-height: 1;
}
}
h1 {
--header-font-size: 3rem;
}Code language: CSS (css)私の言いたいことはわかります 動作バージョンはこちら。
設定してるから --header-font-size テストしているのと同じ「レベル」で @container それはうまくいきません。少なくとも 1 つ上の DOM レベルに設定する必要がありますが、これはおそらくこのような要素に対して行うことではありません。いやぁ、それでもカッコいいですね。
感謝します ローマ・コマロフは細部にまでこだわっています。このウェブサイト インク＆スイッチ このようなラフな手書きの下線が付いています。しかし、彼らが 包む ラッピングエッジは「ハードカット」です。しかし、そうである必要はありません。 CSS プロパティ box-decoration-break: clone 完全に修正します。美しい。ブラウザのサポートは完璧ではないので、これを知らない人がいるのは少し許せます。そしてさらに、それが始まるという事実は、 box- それは何かと関係があるのではないかと思わせる box-shadow しかし、実際は次のとおりです（これを取得してください）。 border-radius、 border-image、 box-shadow、 そして background。これは、あなたとすべての CSS 学習者のための、バーに関する優れたトリビアです。
私の有害な特性は、物事の勝者を宣言するのが好きなことです。どうやって アップルが勝ったのは、 grid-lanes 😬。あるいはどのようにして oklch() は、モダンなカラー形式の勝者です。それらのトピックにふさわしいニュアンスを与える代わりに。使用するだけでマッスルメモリーもたくさんあります rem どこにでもユニットがいて、彼らが勝利ユニットであると考えられています。しかし、それはほぼ間違いなく狭すぎる意見です。実際、それはおそらく特定のユニットではありませんが、ミリアムが言うように 最適な CSS ユニットは組み合わせかもしれません: どちらかを選択する必要はありません px そして rem 間隔を空けるために。
.card {
--min: min(1lh, 2vi);
--nearest-half: round(up, 2vi, 0.5lh);
}Code language: CSS (css)Views: 0
