<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> Kernpunkte </strong> </p> <ul> <li> postCSS bietet eine Vielzahl von Plugins, die Polyfills für die neuesten CSS -Funktionen zur Verfügung stellen und es Entwicklern erm?glichen, neue Funktionen auszuprobieren, auch wenn ihnen eine umfangreiche Browserunterstützung fehlt. </li> <li> <code>postcss-nesting</code> Das Plug-In implementiert Stilregeln, die gem?? dem W3C-Vorschlag für verschachteltes Modul untergebracht sind und einen neuen <code>&amp;amp;amp;</code> verschachtelten Selektor einführen, der sich auf den übergeordneten Selektor bezieht. </li> <li> <code>postcss-custom-selectors</code> Plugin erm?glicht das Definieren von Duplikationselektoren in Variablen, die Verringerung der Code -Duplikation und die Verbesserung der Codewartung. </li> Die Plugins <li> <code>postcss-custom-media</code> und <code>postcss-media-minmax</code> verbessern die Medienabfragen, um die Verwendung und die Verringerung der Duplikation in Stilbl?ttern zu erleichtern. </li> </ul> <p> Die neuesten ?nderungen an der CSS -Spezifikation führen einige interessante Funktionen ein. Leider befinden sich einige dieser Funktionen noch in der Entwurfsbühne, andere fehlen eine umfangreiche Browserunterstützung. Oft dauern neue Vorschl?ge einige Zeit, bis sie vom Browser überprüft, akzeptiert und implementiert werden. Wir k?nnen jedoch Wartezeit sparen und einige dieser Funktionen mit postcss ausprobieren. </p> <p> postCSS verfügt über verschiedene Plug-Ins, mit denen Polyfills für die neuesten CSS-Funktionen implementiert werden k?nnen. Da diese Plugins sehr breit sind, ist es schwierig, alle Plugins in einem Artikel abzudecken. Stattdessen konzentrieren wir uns auf Plugins, die sich auf das Hinzufügen neuer Funktionen zu Selektoren und Medienabfragen konzentrieren. Viele Plugins erm?glichen es uns, die Struktur des Stylesheet erheblich zu verbessern, w?hrend andere nur einen sauberen syntaktischen Zucker an die Oberseite hinzufügen. </p> <p> In diesem Artikel wird die Konfiguration und Installation von PostCSS nicht ausführlich eingeführt. Dies wurde in "Beginn with postcss" und "Verbesserung der CSS -Qualit?t mit Postcss" beschrieben. Als kurze Referenz k?nnen Sie auch die POSTCSS -Seite auf GitHub überprüfen. </p> <h2 id="Regeln-nisten"> Regeln nisten </h2> <p> Beginnen wir mit der grundlegendsten Funktionalit?t, die jedem Pr?prozessorenbenutzer sicherlich bekannt ist. <code>postcss-nesting</code> Plug-In-Implementierung von Style-Regeln nach W3C-verschachtelten Modulvorschl?gen. </p> <p> Der Vorschlag führt einen neuen <code>&amp;amp;amp;</code> verschachtelten Selektor vor, der auf den übergeordneten Selektor verweist. Entgegen weniger oder SASS ist dieser Selektor durch Spezifikation erforderlich und muss der erste grundlegende Selektor in der Selektorkette sein, das die Verschachtelung erm?glicht. Jeder Selektor, der keine verschachtelten Selektoren enth?lt, wird ignoriert. Zum Beispiel: </p> <pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }</pre> <p> wird konvertiert in: </p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre> <p> Bitte beachten Sie, dass der folgende Code ungültig ist, da er den Ausw?hls <code>&amp;amp;amp;</code> wie angegeben nicht verwendet. </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;amp; { border: 1px solid red; } }</pre> <p>, damit der übergeordnete Selektor überall in den Selektor eingefügt werden kann (nicht nur zu Beginn), definiert der Vorschlag eine alternative Syntax, um verschachtelte AT-RULE <code>@nest</code> zu verwenden. Wir k?nnen den <code>.latest &amp;amp;amp;amp;</code> -Alektor im vorherigen Beispiel durch: </p> beheben <pre class='brush:php;toolbar:false;'>.article { color: #333; @nest .latest &amp;amp;amp;amp;amp; { border: 1px solid red; } }</pre> <p> Dies wird kompilieren zu: </p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .latest .article { border: 1px solid red }</pre> <p> <code>@nest</code> Die Grammatik ist auch ausdrucksvoller als <code>&amp;amp;amp;</code>. </p><h2 id="benutzerdefinierte-Selector"> benutzerdefinierte Selector </h2> <p> Beim Schreiben von CSS neigen wir dazu, viele doppelte Selektoren zu schreiben. Dies kann ein einfacher Boilerplate -Code sein, der alle Links oder Schaltfl?chen ausw?hlt, oder ein komplexerer Selektor, für den wiederholte Wiederholungen erforderlich sind. Dies kann viele Code -Duplikationen und alle zugeh?rigen Code -Wartungsprobleme einführen. Die neue CSS -Erweiterungsspezifikation führt eine M?glichkeit vor, Selektoren in Variablen zu speichern und aus anderen Teilen des Stylesheetes zu verweisen. Daher muss ein Wiederholungsauswahl nur einmal definiert werden und kann dann sicher an anderer Stelle wiederverwendet werden. </p> <p> postcss hat ein <code>postcss-custom-selectors</code> Plugin, das diese Funktion implementiert. Hier ist ein einfaches Beispiel, das alle Titelelemente -Selektoren definiert: </p> <pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }</pre> <p> es wird kompilieren zu: </p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre> <p> benutzerdefinierte Selektoren werden als Pseudoklasse implementiert, sodass die Syntax seltsam aussieht <code>:--</code>. </p> <p> Benutzerdefinierte Selektoren k?nnen effektiv mit Basisauswahlern verwendet werden. Zum Beispiel: </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;amp; { border: 1px solid red; } }</pre> <p> kompiliert zu: </p> <pre class='brush:php;toolbar:false;'>.article { color: #333; @nest .latest &amp;amp;amp;amp;amp; { border: 1px solid red; } }</pre> <p> Sie k?nnen sogar mehrere benutzerdefinierte Selektoren zu einem einzelnen Selektor kombinieren, um komplexere Anordnungen zu erhalten. </p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .latest .article { border: 1px solid red }</pre> <p> wird erzeugen: </p> <pre class='brush:php;toolbar:false;'>@custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { font-weight: bold; }</pre> <p> Dieses Beispiel mag etwas übertrieben sein, aber es zeigt die Kraft dieser Funktion sehr gut. </p> <h2 id="Neue-Pseudo-Klasse"> Neue Pseudo-Klasse </h2> In der Spezifikation der Auswahlstufe 4 wird eine Reihe neuer Pseudoklassen eingeführt. Aufgrund der dynamischen Natur der meisten Pseudoklassen sind jedoch nur wenige als Postcss-Plug-Ins erh?ltlich. <p> </p> <h3> pseudoklas <code>:matches()</code> Das Plugin </h3> <p> implementiert eine neue <code>postcss-selector-matches</code> Pseudoklasse. Es ist eine Funktionsklasse, die nur Elemente filtert, die dem Selektor im Parameter entsprechen. Wenn Sie mehrere Selektoren bestehen, müssen die Elemente mindestens eines von ihnen übereinstimmen. Kurz gesagt: <code>:matches()</code> </p> <pre class='brush:php;toolbar:false;'>h1, h2, h3, h4, h5, h6 { font-weight: bold; }</pre> kompiliert zu: <p> </p> <pre class='brush:php;toolbar:false;'>.article :--heading .author { color: blue; }</pre> <h3> pseudoklas <code>:not()</code> </h3> <p> Filterelemente der Pseudoklasse, die nicht mit einem bestimmten Parameter übereinstimmen. Es ist im <code>:not()</code> -Plugin implementiert. <code>postcss-selector-not</code> </p> <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> Das Ergebnis ist: <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> <h3> pseudoklas <code>:any-link</code> </h3> <p> Plugin implementiert die <code>postcss-pseudo-class-any-link</code> Pseudoklasse. Es wurde eingeführt, um die Verwirrung in der Pseudoklasse <code>:any-link</code> zu l?sen. Im Gegensatz zu letzteren entspricht es allen Links - einschlie?lich der besuchten. <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> kompiliert zu: <p> </p> <pre class='brush:php;toolbar:false;'>button:matches(:hover, :focus) { color: red; }</pre> Medienabfrageverbesserung <h2> </h2> Es gibt Plugins in der Bibliothek für Postcss, um Medienfragen zu vereinfachen. Sie sind <p> und <code>postcss-custom-media</code>. <code>postcss-media-minmax</code> </p> benutzerdefinierte Medien <h3> </h3> Medienabfragen schreiben die gleichen Probleme wie regul?re Selektoren - sie werden oft in Stilbl?ttern wiederholt. Wahrscheinlich h?ufiger als normale Selektoren. Glücklicherweise gibt es eine L?sung, die einem benutzerdefinierten Selektor ?hnelt. <p> Das Plug-In implementiert eine benutzerdefinierte Medienabfragespezifikation, die die M?glichkeit erh?ht, Medienabfragen in Variablen zu speichern. <code>postcss-custom-media</code> </p> Die Syntax ist einem benutzerdefinierten Selektor sehr ?hnlich. Hier ist ein einfaches Beispiel: <p> </p> <pre class='brush:php;toolbar:false;'>button:hover, button:focus { color: red; }</pre> kompiliert zu: <p><pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }</pre> <p> Natürlich k?nnen Sie mehrere benutzerdefinierte Medienabfragen gleichzeitig verwenden: </p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre> <p> wird erzeugen: </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;amp; { border: 1px solid red; } }</pre> <p> Wie Sie sehen, ist es jetzt viel einfacher, die Definition von "mittlerem Ansichtsfenster" zu ?ndern und einen relevanten CSS -Code zu finden. </p> <h3 id="minimales-und-maximales-Syntax"> minimales und maximales Syntax </h3> <p> Obwohl Medienanfragen eine gro?artige Sache sind, haben die minimalen und maximalen Grammatiken viel Kritik von der Community erhalten. W3C reagiert mit der Einführung einer intuitiveren Syntax mit Vergleichsbetreibern. <code>postcss-media-minmax</code> Plugin fügt Unterstützung für <code>></code>, <code>>=</code>, <code><</code>, <code><=</code>, </p> hinzu. <p> </p> (der Rest des Artikels wurde aufgrund der L?nge des Artikels weggelassen, aber der Bildverbesser bleibt unver?ndert)

Das obige ist der detaillierte Inhalt vonDer POSTCSS -Leitfaden zur Verbesserung der Selektoren und Medienabfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!