近々ブラウザに導入される CSS :is() と :where() の簡単な分析

近々ブラウザに導入される CSS :is() と :where() の簡単な分析

Safari (Technology Preview 106) および Firefox (バージョン 78) のプレビュー バージョンでは、新しい CSS :is()および:where()疑似クラスがサポートされるようになりました。 Chrome の実装はまだ遅れています。

重複を減らすには:is() を使用する

:is()疑似クラスを使用して、セレクター リストから重複を削除できます。

/* 前に */
.embed .save-button:hover,
.添付ファイル .保存ボタン:hover {
  不透明度: 1;
}

/* 後 */
:is(.embed, .attachment) .save-button:hover {
  不透明度: 1;
}

この機能は主に、処理されていない標準 CSS コードで役立ちます。 Sass または同様の CSS プリプロセッサを使用する場合は、ネストを使用することをお勧めします。

注: ブラウザは:is()に似ていますがより制限的な、非標準の:-webkit-any()および:-moz-any()疑似クラスもサポートしています。 WebKit は 2015 年に:-webkit-any()を非推奨にし、Mozilla は Firefox のユーザー エージェント スタイルシートを更新して : :-moz-any() :is()を使用するようになりました。

詳細度を低く保つには:where() を使用する

:where()疑似クラスは:is()と同じ構文と機能を持ちます。これらの唯一の違いは:where()セレクター全体の詳細度が上がらないことです (つまり、CSS ルールの詳細度が高いほど、そのスタイルはより優先されます)。

:where()疑似クラスもその引数もセレクターの詳細度には寄与せず、セレクターの詳細度は常に 0 になります。

この機能は、簡単に上書きできるスタイルに役立ちます。たとえば、基本スタイルシート sanitize.css には、 <svg fill>属性がない場合にデフォルトの塗りつぶし色を設定する次のスタイル ルールが含まれています。

svg:not([塗りつぶし]) {
  塗りつぶし: 現在の色;
}

詳細度が高い (B=1、C=1) ため、Web サイトは単一のクラス セレクター (B=1) でこの宣言を上書きすることはできず!importantを追加するか、セレクターの詳細度を人為的に高める必要があります (例: .share- icon.share-icon )。

.share-icon {
  fill: blue; /* 詳細度が低いため適用できません*/
}

CSS ライブラリと基本スタイルシートでは、属性セレクターを:where()でラップしてセレクター全体の詳細度を低く (C=1) 保つことで、この問題を回避できます。

/* サニタイズ.css */
svg:where(:not([fill])) {
  塗りつぶし: 現在の色;
}

/* 著者スタイルシート */
.share-icon {
  fill: blue; /* 詳細度が高いため適用可能*/
}

要約する

CSS :is() と :where() がブラウザーに導入されることに関するこの記事はこれで終わりです。CSS :is() と :where() ブラウザーに関するその他のコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL データベースでは、datetime、bigint、timestamp を使用して時間の選択を表します。時間を保存するのに最も効率的なのはどれですか?

>>:  JavaScript を使用せずに HTML の a タグを無効にするには、純粋な CSS を使用します。

推薦する

CocosCreator ソースコードの解釈: エンジンの起動とメインループ

目次序文準備行く!文章プロセスを開始するメインループまとめ要約する序文準備皆さんは、こんなことを考え...

JavaScript でネットワーク速度をテストする方法

目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...

zabbix を使用して ogg プロセスを監視する (Linux プラットフォーム)

以前作成されたデータベースの ogg プロセスは、発見されるまでの約半月間ダウンしていました。起動で...

MySQLトリガーの使用と理解

目次1. トリガーとは何ですか? 2. トリガーを作成するトリガーを作成するための構文は次のとおりで...

MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有

問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...

Docker を使用した JMeter+Grafana+Influxdb 監視プラットフォームの構築に関する詳細なチュートリアル

Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...

Dockerfile ビルド中に発生する「/bin/sh: pip: コマンドが見つかりません」という問題の解決方法

記述した Dockerfile の内容は次のとおりです。 Python:3.6.8 から pip i...

Flask アプリケーションの Docker デプロイ実装手順

1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...

MySql クライアントが数秒で終了する問題を解決する (my.ini が見つからない)

問題の説明 (環境: windows7、MySql8.0)今日、MySql をインストールした後、M...

ルート変更を監視するJavaScriptの詳細な説明

目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...

vue+canvasでタイムラインを描く方法

この記事では、参考までにvueキャンバスのタイムライン描画の具体的なコードを紹介します。具体的な内容...

Vue要素はテーブルの追加、削除、データの変更を実装します

この記事では、テーブル内のデータを追加、削除、変更するためのvue要素の具体的なコードを参考までに共...

ドラッグフォトウォールを実現するネイティブJS

この記事では、ネイティブ JS で実装されたドラッグ可能な写真ウォールを紹介します。効果は次のとおり...

JSブラウザイベントモデルの詳細な説明

目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...

HTMLベースの複数画像アップロードのプレビュー機能を実装

最近、Web ページに複数の画像をアップロードするためのスクリプトを作成しました。これは非常に実用的...