Le Guide PostCSS pour améliorer les sélecteurs et les requêtes multimédias

<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> Points de base </strong> </p> <ul> <li> POSTCSS fournit une variété de plugins qui fournissent des polyfills pour les dernières fonctionnalités CSS, permettant aux développeurs d'essayer de nouvelles fonctionnalités même si elles manquent de support de navigateur approfondi. </li> <li> <code>postcss-nesting</code> Le plug-in implémente les règles de style qui nichent en fonction de la proposition de module imbriqué W3C, introduisant un nouveau sélecteur imbriqué, faisant référence au sélecteur parent. <code>&amp;amp;amp;</code> </li> <li> Le plugin permet de définir des sélecteurs de duplication dans les variables, de réduire la duplication de code et d'améliorer la maintenance du code. <code>postcss-custom-selectors</code> Les plugins </li> <li> et <code>postcss-custom-media</code> améliorent les requêtes multimédias pour les rendre plus faciles à utiliser et à réduire les feuilles de style. <code>postcss-media-minmax</code> </li> </ul> Les dernières modifications apportées à la spécification CSS introduisent certaines fonctionnalités intéressantes. Malheureusement, certaines de ces fonctionnalités sont toujours à l'étape du projet, tandis que d'autres manquent de support approfondie du navigateur. Souvent, les nouvelles suggestions prennent un certain temps avant d'être examinées, acceptées et mises en œuvre par le navigateur. Cependant, nous pouvons enregistrer le temps d'attente et essayer certaines de ces fonctionnalités à l'aide de PostCSS. <p> </p> POSTCSS dispose de divers plug-ins conçus pour implémenter des polyfills pour les dernières fonctionnalités CSS. Parce que ces plugins sont très larges, il est difficile de couvrir tous les plugins dans un seul article. Au lieu de cela, nous nous concentrerons sur les plugins qui se concentrerons sur l'ajout de nouvelles fonctionnalités aux sélecteurs et aux requêtes multimédias. De nombreux plugins nous permettront d'améliorer considérablement la structure de la feuille de style, tandis que d'autres peuvent simplement ajouter du sucre syntaxique propre au sommet. <p> </p> Cet article ne présentera pas la configuration et l'installation de PostCSS en détail. Cela a été décrit dans "commencer par PostCSS" et "Améliorer la qualité CSS avec PostCSS". Comme référence rapide, vous pouvez également consulter la page PostCSS sur GitHub. <p> </p> Règles Nesting <h2> </h2> Commençons par les fonctionnalités les plus élémentaires - bien familières à chaque utilisateur de préprocesseur - en déclin. <p> Le plug-in implémente les règles de style nidification en fonction des propositions de modules imbriquées W3C. <code>postcss-nesting</code> </p> La proposition introduit un nouveau sélecteur <p> imbriqué qui fait référence au sélecteur parent. Contrairement à moins ou SASS, ce sélecteur est requis par la spécification et doit être le premier sélecteur de base de la chaîne de sélecteur pour permettre la nidification. Tout sélecteur qui ne contient pas de sélecteurs imbriqués sera ignoré. Par exemple: <code>&amp;amp;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; &amp;amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> sera converti en: <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> Veuillez noter que le code suivant n'est pas valide car il n'utilise pas le sélecteur <p> comme spécifié. <code>&amp;amp;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;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> pour permettre au sélecteur parent d'être inséré n'importe où dans le sélecteur (et pas seulement au début), la proposition définit une alternative à l'utilisation de l'at-règle imbriqué <p>. Nous pouvons réparer le sélecteur <code>@nest</code> dans l'exemple précédent par: <code>.latest &amp;amp;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;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> Cela se compilera à: <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> La grammaire est également plus expressive que <code>@nest</code>. <code>&amp;amp;amp;</code><h2 id="Sélecteur-personnalisé"> Sélecteur personnalisé </h2> <p> Lors de l'écriture de CSS, nous avons tendance à écrire de nombreux sélecteurs en double. Il peut s'agir d'un simple code passe-partout qui sélectionne tous les liens ou tout boutons, ou un sélecteur plus complexe qui nécessite des répétitions répétées. Cela peut introduire de nombreuses duplications de code et tous les problèmes de maintenance de code connexes. La nouvelle spécification d'extension CSS introduit un moyen de stocker des sélecteurs dans des variables et de les référence à partir d'autres parties de la feuille de style. Par conséquent, un sélecteur de répétition ne doit être défini qu'une seule fois, puis il peut être réutilisé en toute sécurité ailleurs. </p> <p> POSTCSS a un plugin <code>postcss-custom-selectors</code> qui implémente cette fonctionnalité. Voici un exemple simple qui définit tous les sélecteurs d'élément de titre: </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;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Il compilera à: </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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Les sélecteurs personnalisés sont implémentés sous forme de pseudo-classes, donc la syntaxe semble bizarre <code>:--</code>. </p> <p> Les sélecteurs personnalisés peuvent être utilisés efficacement avec des sélecteurs de base. Par exemple: </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;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> compilé à: </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;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Vous pouvez même combiner plusieurs sélecteurs personnalisés en un seul sélecteur pour des arrangements plus complexes. </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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> générera: </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">Copier après la connexion</div></div> <p> Cet exemple peut être un peu exagéré, mais il démontre très bien la puissance de cette fonctionnalité. </p> <h2 id="Nouveau-pseudo-classe"> Nouveau pseudo-classe </h2> La spécification de niveau 4 du sélecteur introduit un tas de nouvelles classes pseudo-classes, mais en raison de la nature dynamique de la plupart des pseudo-classes, seuls quelques-uns sont disponibles en tant que plug-ins PostCSS. <p> </p> <h3> Pseudoclass <code>:matches()</code> Le plugin </h3> <p> implémente un nouveau <code>postcss-selector-matches</code> pseudo-classe. Il s'agit d'une classe de fonction qui filtre uniquement les éléments qui correspondent au sélecteur dans le paramètre. Si vous passez plusieurs sélecteurs, les éléments doivent correspondre au moins l'un d'entre eux. Bref: <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">Copier après la connexion</div></div> compilé à: <p> </p> <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">Copier après la connexion</div></div> <h3> Pseudoclass <code>:not()</code> </h3> <p> Éléments de filtrage pseudo-classe qui ne correspondent à aucun paramètre donné. Il est implémenté dans le plugin <code>:not()</code>. <code>postcss-selector-not</code> </p> <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">Copier après la connexion</div></div> Le résultat est: <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">Copier après la connexion</div></div> <h3> Pseudoclass <code>:any-link</code> Le plugin </h3> <p> implémente le <code>postcss-pseudo-class-any-link</code> pseudo-classe. Il a été introduit pour aider à résoudre la confusion autour de la pseudo-classe <code>:any-link</code>. Contrairement à ce dernier, il correspond à tous les liens - y compris ceux visités. <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">Copier après la connexion</div></div> compilé à: <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">Copier après la connexion</div></div> Amélioration des requêtes médiatiques <h2> </h2> Il existe des plugins dans la bibliothèque pour PostCSS pour faciliter l'utilisation des requêtes multimédias. Ils sont <p> et <code>postcss-custom-media</code>. <code>postcss-media-minmax</code> </p> Médias personnalisés <h3> </h3> Écrire des requêtes multimédias crée les mêmes problèmes que les sélecteurs réguliers - ils sont souvent répétés dans des feuilles de style. Probablement plus fréquent que les sélecteurs normaux. Heureusement, il existe une solution similaire à un sélecteur personnalisé. <p> Le plug-in implémente une spécification de requête multimédia personnalisée qui augmente la possibilité d'enregistrer les requêtes multimédias en variables. <code>postcss-custom-media</code> </p> La syntaxe est très similaire à un sélecteur personnalisé. Voici un exemple simple: <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>button:hover, button:focus { color: red; }</pre><div class="contentsignin">Copier après la connexion</div></div> compilé à: <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;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Bien sûr, vous pouvez utiliser plusieurs requêtes multimédias personnalisées à la fois: </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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> générera: </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;amp;amp; { border: 1px solid red; } }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Comme vous pouvez le voir, il est désormais beaucoup plus facile de modifier la définition de la "fenêtre moyenne" et de trouver tout code CSS pertinent. </p> <h3 id="Syntaxe-minimale-et-maximale"> Syntaxe minimale et maximale </h3> <p> Bien que les requêtes médiatiques soient une grande chose, les grammaires minimales et maximales ont reçu beaucoup de critiques de la communauté. W3C répond en introduisant une syntaxe plus intuitive à l'aide d'opérateurs de comparaison. Le plugin <code>postcss-media-minmax</code> ajoute la prise en charge de <code>></code>, <code>>=</code>, <code><</code>, <code><=</code>, </p>. <p> </p> (Le reste de l'article a été omis en raison de la durée de l'article, mais le lien de l'image reste inchangé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!