PostCSSガイドは、セレクターとメディアクエリを改善します-CSSチュートリアル-php.cn

ルールネスト

カスタムセレクター

:matches()プラグインは、新しい

カスタムメディア

ホームページ

ウェブフロントエンド

CSSチュートリアル

PostCSSガイドは、セレクターとメディアクエリを改善します

Christopher Nolan

Feb 21, 2025 am 10:05 AM

<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174010351218537.jpg" class="lazy" alt="The PostCSS Guide to Improving Selectors and Media Queries "></p> <p><strong>コアポイント</strong></p> <ul> <li>PostCSSは、最新のCSS機能にポリフィルを提供するさまざまなプラグインを提供し、開発者が広範なブラウザサポートがない場合でも新しい機能を試してみることができます。 </li> <li> <code>postcss-nesting</code>プラグインは、W3Cネストされたモジュールの提案に従ってネストされたスタイルルールを実装し、親セレクターを参照して新しい<code>&amp;</code>ネストされたセレクターを導入します。 </li> <li> <code>postcss-custom-selectors</code>プラグインを使用すると、変数の重複セレクターを定義し、コードの複製を減らし、コードメンテナンスを改善できます。 </li> <li> <code>postcss-custom-media</code>および<code>postcss-media-minmax</code>プラグインは、メディアクエリを改善して、スタイルシートの使用を容易にし、重複を減らすことができます。 </li> </ul> <p>CSS仕様の最新の変更には、いくつかの興味深い機能が紹介されています。残念ながら、これらの機能のいくつかはまだドラフト段階にありますが、他の機能は広範なブラウザのサポートを欠いています。多くの場合、新しい提案は、ブラウザによってレビュー、受け入れ、実装されるまでに時間がかかります。ただし、待ち時間を節約し、PostCSSを使用してこれらの機能の一部を試すことができます。 </p> <p>PostCSSには、最新のCSS機能にポリフィルを実装するように設計されたさまざまなプラグインがあります。これらのプラグインは非常に広いため、1つの記事ですべてのプラグインをカバーすることは困難です。代わりに、セレクターとメディアクエリに新しい機能を追加することに焦点を当てたプラグインに焦点を当てます。多くのプラグインを使用すると、スタイルシートの構造を大幅に改善できますが、他のプラグは上部にきれいな構文砂糖を追加するだけです。 </p> <p>この記事では、PostCSの構成とインストールを詳細に紹介しません。これは、「PostCSSから始まる」および「PostCSSによるCSS品質の向上」で説明されています。簡単な参照として、GitHubのPostCSSページをチェックすることもできます。 </p> <h2 id="ルールネスト">ルールネスト</h2> <p>最も基本的な機能から始めましょう。すべてのプリプロセッサユーザーに馴染みがあります。 <code>postcss-nesting</code>プラグインは、W3Cネストされたモジュールの提案に従ってネストするスタイルルールを実装します。 </p> <p>提案では、親セレクターを参照する新しい<code>&amp;</code>ネストされたセレクターが導入されます。少ないまたはSASSに反して、このセレクターは仕様によって必要であり、ネストを有効にするためにセレクターチェーンで最初の基本セレクターでなければなりません。ネストされたセレクターが含まれていないセレクターは無視されます。たとえば、</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;.popular { background: #DDD; } &amp;amp; .title { font-weight: bold; } }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p>は次のように変換されます </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>指定されているように<p>セレクターを使用しないため、次のコードが無効であることに注意してください。 <code>&amp;</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; /* no nested-selector */ .popular { background: #DDD; } /* the nested selector is not the fist selector in the chain */ .latest &amp;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>親セレクターをセレクターのどこにでも挿入できるようにするため（最初だけでなく）、提案はネストされたATルール<p>を使用する代替構文を定義します。前の例で<code>@nest</code>セレクターを次のように修正できます。 <code>.latest &amp;amp;</code> </p>これは次のようにコンパイルされます <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; @nest .latest &amp;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p></p>文法も<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333 } .latest .article { border: 1px solid red }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>よりも表現力があります。 <p><h2 id="カスタムセレクター">カスタムセレクター</h2> <p> CSSを書くとき、私たちは多くの重複したセレクターを書く傾向があります。これは、すべてのリンクまたは任意のボタンを選択する単純なボイラープレートコード、または繰り返し繰り返しを必要とするより複雑なセレクターである可能性があります。これにより、多くのコードの重複と関連するすべてのコードメンテナンスの問題が導入される場合があります。新しいCSS拡張仕様は、セレクターを変数に保存し、スタイルシートの他の部分から参照する方法を紹介します。したがって、繰り返しセレクターは一度だけ定義する必要があり、その後、他の場所で安全に再利用できます。 </p> <p>postcssには、この機能を実装する<code>postcss-custom-selectors</code>プラグインがあります。これは、すべてのタイトル要素セレクターを定義する簡単な例です。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;.popular { background: #DDD; } &amp;amp; .title { font-weight: bold; } }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>次のようにコンパイルされます <p> </p>カスタムセレクターは擬似クラスとして実装されているため、構文は奇妙に見えます<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>。 <p> <code>:--</code>カスタムセレクターは、基本的なセレクターで効果的に使用できます。たとえば、</p> <p> </p>にコンパイルされています：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; /* no nested-selector */ .popular { background: #DDD; } /* the nested selector is not the fist selector in the chain */ .latest &amp;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p> </p>複数のカスタムセレクターを単一のセレクターに組み合わせて、より複雑な配置をとることもできます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; @nest .latest &amp;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p> </p>は生成されます：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333 } .latest .article { border: 1px solid red }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p> </p>この例は少し誇張されているかもしれませんが、この機能の力を非常によく示しています。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { font-weight: bold; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>新しい擬似クラス</p> セレクターレベル4の仕様では、多くの新しい擬似クラスを紹介しますが、ほとんどの擬似クラスの動的な性質により、PostCSプラグインとして利用できるものはごくわずかです。 <h2> </h2><p>pseudoclass </p> <h3 id="code-matches-code-プラグインは-新しい"><code>:matches()</code>プラグインは、新しい</h3>pseudoクラスを実装します。これは、パラメーター内のセレクターに一致する要素のみをフィルタリングする関数クラスです。複数のセレクターを渡す場合、要素は少なくともそのうちの1つと一致する必要があります。要するに：<p> <code>postcss-selector-matches</code> <code>:matches()</code>にコンパイルされています：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>h1, h2, h3, h4, h5, h6 { font-weight: bold; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p></p>pseudoclass <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article :--heading .author { color: blue; }</pre><div class="contentsignin">ログイン後にコピー</div></div> 特定のパラメーターと一致しない擬似クラスフィルタリング要素。 <h3>プラグインに実装されています。 <code>:not()</code> </h3> <p>結果は次のとおりです <code>:not()</code> <code>postcss-selector-not</code></p>pseudoclass <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article h1 .author, .article h2 .author, .article h3 .author, .article h4 .author, .article h5 .author, .article h6 .author { color: blue; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p></p>プラグインは<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@custom-selector :--links a, a:focus, a:visited, a:hover, a:active; article :--heading :--links { color: #333; }</pre><div class="contentsignin">ログイン後にコピー</div></div> pseudoクラスを実装します。それは、<h3>擬似クラスの周りの混乱を解決するのに役立つために導入されました。後者とは異なり、訪問したリンクを含むすべてのリンクと一致します。 <code>:any-link</code> </h3> <p>にコンパイルされています：<code>postcss-pseudo-class-any-link</code> <code>:any-link</code> <code>:link</code>メディアクエリの改善</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>article h1 a, article h2 a, article h3 a, article h4 a, article h5 a, article h6 a, article h1 a:focus, article h2 a:focus, article h3 a:focus, article h4 a:focus, article h5 a:focus, article h6 a:focus, article h1 a:visited, article h2 a:visited, article h3 a:visited, article h4 a:visited, article h5 a:visited, article h6 a:visited, article h1 a:hover, article h2 a:hover, article h3 a:hover, article h4 a:hover, article h5 a:hover, article h6 a:hover, article h1 a:active, article h2 a:active, article h3 a:active, article h4 a:active, article h5 a:active, article h6 a:active { color: #333; }</pre><div class="contentsignin">ログイン後にコピー</div></div>メディアクエリを使いやすくするためのPostCSSのためのライブラリにプラグインがあります。それらは<p>と</p>です。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>button:matches(:hover, :focus) { color: red; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <h2 id="カスタムメディア">カスタムメディア</h2> <p>メディアクエリを書くことは、通常のセレクターと同じ問題を作成します - それらはしばしばスタイルシートで繰り返されます。おそらく通常のセレクターよりも頻繁です。幸いなことに、カスタムセレクターに似たソリューションがあります。 <code>postcss-custom-media</code>プラグインは、メディアクエリを変数に保存する機能を高めるカスタムメディアクエリ仕様を実装します。 <code>postcss-media-minmax</code> </p>構文はカスタムセレクターに非常に似ています。簡単な例を次に示します：<h3> </h3> <p>にコンパイルされています：<code>postcss-custom-media</code><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;.popular { background: #DDD; } &amp;amp; .title { font-weight: bold; } }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p>もちろん、複数のカスタムメディアクエリを一度に使用できます。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>は生成されます：<p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.article { color: #333; /* no nested-selector */ .popular { background: #DDD; } /* the nested selector is not the fist selector in the chain */ .latest &amp;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>ご覧のとおり、「中ビューポート」の定義を変更して、関連するCSSコードを見つける方がはるかに簡単になりました。 <p> </p>最小および最大構文<h3> </h3>メディアの質問は素晴らしいものですが、最小および最大の文法はコミュニティから多くの批判を受けています。 W3Cは、比較演算子を使用して、より直感的な構文を導入することで応答します。 <p>プラグインは、<code>postcss-media-minmax</code>、<code>></code>、<code>>=</code>、<code><</code>、<code><=</code>のサポートを追加します。 </p> <p>（記事の残りの部分は記事の長さのために省略されていますが、画像リンクは変更されていません）</p>

以上がPostCSSガイドは、セレクターとメディアクエリを改善しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。