近々ブラウザに導入される 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 をよろしくお願いいたします。