<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機能にポリフィルを提供するさまざまなプラグインを提供し、開発者が広範(fàn)なブラウザサポートがない場合でも新しい機能を試してみることができます。 </li> <li> <code>postcss-nesting</code>プラグインは、W3Cネストされたモジュールの提案に従ってネストされたスタイルルールを?qū)g裝し、親セレクターを參照して新しい<code>&amp;amp;</code>ネストされたセレクターを?qū)毪筏蓼埂?</li> <li> <code>postcss-custom-selectors</code>プラグインを使用すると、変數(shù)の重複セレクターを定義し、コードの複製を減らし、コードメンテナンスを改善できます。 </li> <li> <code>postcss-custom-media</code>および<code>postcss-media-minmax</code>プラグインは、メディアクエリを改善して、スタイルシートの使用を容易にし、重複を減らすことができます。 </li> </ul> <p>CSS仕様の最新の変更には、いくつかの興味深い機能が紹介されています。殘念ながら、これらの機能のいくつかはまだドラフト段階にありますが、他の機能は広範(fàn)なブラウザのサポートを欠いています。多くの場合、新しい提案は、ブラウザによってレビュー、受け入れ、実裝されるまでに時間がかかります。ただし、待ち?xí)r間を節(jié)約し、PostCSSを使用してこれらの機能の一部を試すことができます。 </p> <p>PostCSSには、最新のCSS機能にポリフィルを?qū)g裝するように設(shè)計されたさまざまなプラグインがあります。これらのプラグインは非常に広いため、1つの記事ですべてのプラグインをカバーすることは困難です。代わりに、セレクターとメディアクエリに新しい機能を追加することに焦點を當(dāng)てたプラグインに焦點を當(dāng)てます。多くのプラグインを使用すると、スタイルシートの構(gòu)造を大幅に改善できますが、他のプラグは上部にきれいな構(gòu)文砂糖を追加するだけです。 </p> <p>この記事では、PostCSの構(gòu)成とインストールを詳細(xì)に紹介しません。これは、「PostCSSから始まる」および「PostCSSによるCSS品質(zhì)の向上」で説明されています。簡単な參照として、GitHubのPostCSSページをチェックすることもできます。 </p> <h2 id="ルールネスト">ルールネスト</h2> <p>最も基本的な機能から始めましょう。すべてのプリプロセッサユーザーに馴染みがあります。 <code>postcss-nesting</code>プラグインは、W3Cネストされたモジュールの提案に従ってネストするスタイルルールを?qū)g裝します。 </p> <p>提案では、親セレクターを參照する新しい<code>&amp;amp;</code>ネストされたセレクターが導(dǎo)入されます。少ないまたはSASSに反して、このセレクターは仕様によって必要であり、ネストを有効にするためにセレクターチェーンで最初の基本セレクターでなければなりません。ネストされたセレクターが含まれていないセレクターは無視されます。たとえば、</p> <pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp; .title { font-weight: bold; } }</pre> <p>は次のように変換されます </p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre>指定されているように<p>セレクターを使用しないため、次のコードが無効であることに注意してください。 <code>&amp;amp;</code> </p> <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;amp; { border: 1px solid red; } }</pre>親セレクターをセレクターのどこにでも挿入できるようにするため（最初だけでなく）、提案はネストされたATルール<p>を使用する代替構(gòu)文を定義します。前の例で<code>@nest</code>セレクターを次のように修正できます。 <code>.latest &amp;amp;amp;</code> </p>これは次のようにコンパイルされます <pre class='brush:php;toolbar:false;'>.article { color: #333; @nest .latest &amp;amp;amp;amp; { border: 1px solid red; } }</pre> <p></p>文法も<pre class='brush:php;toolbar:false;'>.article { color: #333 } .latest .article { border: 1px solid red }</pre>よりも表現(xiàn)力があります。 <p><h2 id="カスタムセレクター">カスタムセレクター</h2> <p> CSSを書くとき、私たちは多くの重複したセレクターを書く傾向があります。これは、すべてのリンクまたは任意のボタンを選択する?yún)g純なボイラープレートコード、または繰り返し繰り返しを必要とするより複雑なセレクターである可能性があります。これにより、多くのコードの重複と関連するすべてのコードメンテナンスの問題が導(dǎo)入される場合があります。新しいCSS拡張仕様は、セレクターを変數(shù)に保存し、スタイルシートの他の部分から參照する方法を紹介します。したがって、繰り返しセレクターは一度だけ定義する必要があり、その後、他の場所で安全に再利用できます。 </p> <p>postcssには、この機能を?qū)g裝する<code>postcss-custom-selectors</code>プラグインがあります。これは、すべてのタイトル要素セレクターを定義する簡単な例です。 </p> <pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp; .title { font-weight: bold; } }</pre>次のようにコンパイルされます <p> </p>カスタムセレクターは擬似クラスとして実裝されているため、構(gòu)文は奇妙に見えます<pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre>。 <p> <code>:--</code>カスタムセレクターは、基本的なセレクターで効果的に使用できます。たとえば、</p> <p> </p>にコンパイルされています：<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;amp; { border: 1px solid red; } }</pre> <p> </p>複數(shù)のカスタムセレクターを単一のセレクターに組み合わせて、より複雑な配置をとることもできます。 <pre class='brush:php;toolbar:false;'>.article { color: #333; @nest .latest &amp;amp;amp;amp; { border: 1px solid red; } }</pre> <p> </p>は生成されます：<pre class='brush:php;toolbar:false;'>.article { color: #333 } .latest .article { border: 1px solid red }</pre> <p> </p>この例は少し誇張されているかもしれませんが、この機能の力を非常によく示しています。 <pre class='brush:php;toolbar:false;'>@custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { font-weight: bold; }</pre> <p>新しい擬似クラス</p> セレクターレベル4の仕様では、多くの新しい擬似クラスを紹介しますが、ほとんどの擬似クラスの動的な性質(zhì)により、PostCSプラグインとして利用できるものはごくわずかです。 <h2> </h2><p>pseudoclass </p> <h3 id="code-matches-code-プラグインは-新しい"><code>:matches()</code>プラグインは、新しい</h3>pseudoクラスを?qū)g裝します。これは、パラメーター內(nèi)のセレクターに一致する要素のみをフィルタリングする関數(shù)クラスです。複數(shù)のセレクターを渡す場合、要素は少なくともそのうちの1つと一致する必要があります。要するに：<p> <code>postcss-selector-matches</code> <code>:matches()</code>にコンパイルされています：</p> <pre class='brush:php;toolbar:false;'>h1, h2, h3, h4, h5, h6 { font-weight: bold; }</pre> <p></p>pseudoclass <pre class='brush:php;toolbar:false;'>.article :--heading .author { color: blue; }</pre> 特定のパラメーターと一致しない擬似クラスフィルタリング要素。 <h3>プラグインに実裝されています。 <code>:not()</code> </h3> <p>結(jié)果は次のとおりです <code>:not()</code> <code>postcss-selector-not</code></p>pseudoclass <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> <p></p>プラグインは<pre class='brush:php;toolbar:false;'>@custom-selector :--links a, a:focus, a:visited, a:hover, a:active; article :--heading :--links { color: #333; }</pre> pseudoクラスを?qū)g裝します。それは、<h3>擬似クラスの周りの混亂を解決するのに役立つために導(dǎo)入されました。後者とは異なり、訪問したリンクを含むすべてのリンクと一致します。 <code>:any-link</code> </h3> <p>にコンパイルされています：<code>postcss-pseudo-class-any-link</code> <code>:any-link</code> <code>:link</code>メディアクエリの改善</p> <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>メディアクエリを使いやすくするためのPostCSSのためのライブラリにプラグインがあります。それらは<p>と</p>です。 <pre class='brush:php;toolbar:false;'>button:matches(:hover, :focus) { color: red; }</pre> <h2 id="カスタムメディア">カスタムメディア</h2> <p>メディアクエリを書くことは、通常のセレクターと同じ問題を作成します - それらはしばしばスタイルシートで繰り返されます。おそらく通常のセレクターよりも頻繁です。幸いなことに、カスタムセレクターに似たソリューションがあります。 <code>postcss-custom-media</code>プラグインは、メディアクエリを変數(shù)に保存する機能を高めるカスタムメディアクエリ仕様を?qū)g裝します。 <code>postcss-media-minmax</code> </p>構(gòu)文はカスタムセレクターに非常に似ています。簡単な例を次に示します：<h3> </h3> <p>にコンパイルされています：<code>postcss-custom-media</code><pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp; .title { font-weight: bold; } }</pre> <p>もちろん、複數(shù)のカスタムメディアクエリを一度に使用できます。 </p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre>は生成されます：<p> </p> <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;amp; { border: 1px solid red; } }</pre>ご覧のとおり、「中ビューポート」の定義を変更して、関連するCSSコードを見つける方がはるかに簡単になりました。 <p> </p>最小および最大構(gòu)文<h3> </h3>メディアの質(zhì)問は素晴らしいものですが、最小および最大の文法はコミュニティから多くの批判を受けています。 W3Cは、比較演算子を使用して、より直感的な構(gòu)文を?qū)毪工毪长趣菑甏黏筏蓼埂?<p>プラグインは、<code>postcss-media-minmax</code>、<code>></code>、<code>>=</code>、<code><</code>、<code><=</code>のサポートを追加します。 </p> <p>（記事の殘りの部分は記事の長さのために省略されていますが、畫像リンクは変更されていません）</p>

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