:has()
疑似クラス 間違いなく、私のお気に入りの新しい CSS 機能です。 少なくとも、それがあなた方の多くにとっても同じであることは知っています。 State of CSS アンケートにご回答いただいた皆様. セレクターを逆さまに書く能力は、私が不可能だと思っていたより多くのスーパーパワーを私たちに与えてくれます。
私が「より多くの超大国」と言うのは、次のような非常に賢い人々によって、本当に驚くべき賢いアイデアがすでにたくさん発表されているからです。
この記事は、完全なガイドではありません。 :has()
. また、すでに言われたことを逆流させるためにここにいるわけでもありません。 私(こんにちは👋)が、私が最もよく使用する方法のいくつかを共有するために、少しだけ時流に乗っています。 :has()
日常業務で…つまり、Firefox で正式にサポートされたら 差し迫ったもの.
それが起こったとき、あなたは私が使い始めるに違いない :has()
あらゆる所に。 以下は、私が最近作ったものの実際の例です。 :has()
完全にサポートされています。」
JavaScript コンポーネントの外部に到達する必要がないようにする
ページの別の場所でスタイルに影響を与える必要があるインタラクティブなコンポーネントを作成したことがありますか? 次の例を見てください。 <nav>
メガメニュー、開くと色が変わります <header>
その上のコンテンツ。
こういうことをしなきゃいけない気がする で常に波形捕捉.
この特定の例は、サイト用に作成した React コンポーネントです。 ページの React 部分の「外側に手を伸ばす」必要がありました。 document.querySelector(...)
でクラスを切り替えます <body>
, <header>
、または別のコンポーネント。 それは世界の終わりではありませんが、確かに少し気分が悪いです. 完全な React サイト (たとえば、Next.js サイト) でも、管理するかどうかを選択する必要があります。 menuIsOpen
コンポーネントツリーのずっと上にある状態にするか、同じDOM要素の選択を行います—これはあまりReact-yではありません。
:has()
、問題は解決します:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
JavaScript コンポーネントで DOM の他の部分をいじる必要はもうありません!
テーブル ストライピング UX の改善
テーブルに交互の行「ストライプ」を追加すると、UX が向上する可能性があります。 テーブルをスキャンするときに、目で自分がどの列にいるのかを追跡するのに役立ちます。
しかし、私の経験では、これは XNUMX ~ XNUMX 行しかないテーブルではうまく機能しません。 たとえば、テーブルに XNUMX つの行がある場合、 <tbody>
そして、すべての「偶数」行を「ストライピング」していると、XNUMX つのストライプだけになる可能性があります。 これはパターンとしてあまり価値がなく、強調表示された XNUMX つの行の何が特別なのか、ユーザーに疑問を抱かせる可能性があります。
この手法を使用すると、 ブラマスが使う :has()
子の数に基づいてスタイルを適用する、たとえば XNUMX 行以上ある場合は、テーブル ストライプを適用できます。
もっと凝ったものにするには? テーブルに少なくとも特定の数の列がある場合にのみこれを行うこともできます。
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
テンプレートから条件付きクラス ロジックを削除する
ページの内容に応じて、ページ レイアウトを変更する必要があることがよくあります。 次のグリッド レイアウトを使用します。ここでは、サイドバーが存在するかどうかによって、メイン コンテンツの配置がグリッド領域を変更します。
これは、CMS に兄弟ページが設定されているかどうかによって異なります。 私は通常、条件付きで追加するテンプレートロジックでこれを行います BEM モディファイヤ クラス 両方のレイアウトを考慮して、レイアウト ラッパーに追加します。 その CSS は次のようになります (簡潔にするためにレスポンシブ ルールやその他のものは省略されています)。
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
もちろん、CSSに関しては、これで問題ありません。 ただし、テンプレート コードは少し面倒です。 テンプレート言語によっては、多数のクラスを条件付きで追加するのは非常に見苦しいものになる可能性があります。特に、多くの子要素でこれを行う必要がある場合はなおさらです。
それを :has()
ベースのアプローチ:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
正直なところ、CSS に関してはそれほど優れているわけではありません。 しかし、私に言わせれば、HTML テンプレートから条件付き修飾子クラスを削除することは素晴らしい勝利です。
マイクロ デザインの決定を考えるのは簡単です。 :has()
- 画像が入っているカードのように —しかし、これらのマクロレイアウトの変更にも非常に役立つと思います.
より優れた特異性管理
あなたが読めば 私の最後の記事、あなたは私が特異性にこだわっていることを知っているでしょう. 私のように、追加時に特異性スコアを吹き飛ばしたくない場合 :has()
および :not()
スタイル全体で、必ず使用してください :where()
.
その特異性だからです。 :has()
〜に基づいています 引数リスト内の最も具体的な要素. したがって、そこに ID のようなものがある場合、セレクターはカスケードでオーバーライドするのが難しくなります。
一方、 の特異性 :where()
常にゼロです、特異性スコアに追加することはありません。
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
未来は明るい
これらは、本番環境で使用できるようになるのが待ちきれないもののほんの一部です。 CSS-Tricks Almanac にもたくさんの例があります。 何をするのが楽しみですか :has()
? どこでどのような実際の例に出くわしましたか :has()
完璧な解決策だったでしょうか?
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- 能力
- できる
- 私たちについて
- 上記の.
- 影響を及ぼす
- すべて
- 既に
- 常に
- 驚くべき
- および
- 別の
- 申し込む
- アプローチ
- エリア
- 引数
- 記事
- ベース
- なぜなら
- 賭ける
- より良いです
- の間に
- ビット
- 吹きます
- 内蔵
- 束
- 取得することができます
- カード
- 滝
- 一定
- 変化する
- 変更
- 子
- 選択する
- class
- クラス
- Cms
- コード
- コラム
- コンポーネント
- 含まれています
- コンテンツ
- 可能性
- コース
- CSS
- 決定
- 決定的な
- によっては
- 設計
- そうではありません
- すること
- DOM
- ドント
- ダウン
- 要素は
- 特に
- 等
- さらに
- EVER
- あらゆる
- 例
- 例
- 体験
- 視線
- お気に入り
- 特徴
- 少数の
- 終わり
- Firefoxの
- フォロー中
- フォワード
- から
- 完全に
- 取得する
- 与える
- ゴエス
- 行く
- 素晴らしい
- グリッド
- グリッド テンプレート エリア
- ガイド
- 起こる
- 持って
- 助けます
- こちら
- hi
- より高い
- 強調表示された
- HTML
- HTTPS
- 私は
- 考え
- 画像
- 改善
- in
- 相互作用的
- IT
- JavaScriptを
- 一つだけ
- キープ
- 種類
- 知っている
- 言語
- 姓
- レイアウト
- 可能性が高い
- 少し
- 見て
- 探して
- たくさん
- マクロ
- 製
- メイン
- make
- 管理する
- 多くの
- かもしれない
- 瞬間
- 他には?
- 最も
- モジラ
- 必要
- ニーズ
- 新作
- 次の
- Next.js
- 通常は
- 数
- 正式に
- ONE
- 開設
- その他
- 外側
- 部
- 特定の
- 部品
- パターン
- のワークプ
- 完璧
- 場所
- プラトン
- プラトンデータインテリジェンス
- プラトデータ
- 可能
- 現在
- かなり
- 問題
- 生産
- 公表
- リーチ
- 反応する
- 読む
- 現実の世界
- 最近
- 除去
- 反応する
- 行
- ルール
- ラン
- 前記
- 同じ
- スキャン
- 選択
- セッションに
- シェアする
- ウェブサイト
- スマート
- So
- 溶液
- 一部
- 何か
- どこか
- 特別
- 特定の
- 特異性
- start
- 都道府県
- ストライプ
- ストライプ
- スーパー
- サポート
- テーブル
- 取る
- TD
- template
- ステート
- 世界
- もの
- 物事
- 考え
- 三
- 全体
- 〜へ
- トン
- あまりに
- 完全に
- 追跡する
- true
- アップサイド
- us
- つかいます
- users
- ux
- wait
- 方法
- この試験は
- かどうか
- which
- 誰
- win
- 不思議に思います
- 仕事
- 世界
- 価値
- でしょう
- 書きます
- You
- あなたの
- ゼファーネット