Sélecteurs CSS : débloquer des sélecteurs avancés pour une conception Web moderne

Salut tout le monde ! Bienvenue sur mon blog. ?

Introduction

Aujourd'hui, nous plongeons dans le monde des sélecteurs CSS avancés. Ces sélecteurs, comme :is(), :where(), :not() et :has(), peuvent sembler un peu délicats au début en raison de leurs règles de spécificité ou de problèmes de prise en charge du navigateur, mais ce sont des outils super puissants pour créer un CSS plus efficace et dynamique. Explorons ensemble ces sélecteurs, comprenons leur fonctionnement, voyons-les en action et discutons de quelques nuances supplémentaires.

Ce que vous apprendrez dans cet article

• Comprendre chaque sélecteur : Décomposer :is(), :where(), :not() et :has().

• Support des navigateurs : Savoir quels navigateurs prennent en charge ces sélecteurs.

• Specificity Insights : Comment ces sélecteurs affectent l'application des règles CSS.

• Exemples pratiques : Cas d'utilisation réels pour montrer comment ces sélecteurs peuvent simplifier votre CSS.

• Bonnes pratiques : Conseils pour utiliser efficacement ces sélecteurs.

? Le :is() Sélecteur

Qu'est-ce que :est() ?

La fonction pseudo-classe :is() vous permet d'appliquer des styles à plusieurs sélecteurs sans répéter les mêmes propriétés. C'est particulièrement utile pour regrouper des sélecteurs avec des spécificités différentes.

Exemple :

<div>





<pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) {
    font-weight: bold;
    border: 1px solid;
    border-radius: 4px;
}

.alert.success { border-color: green; }
.alert.error { border-color: red; }
.alert.warning { border-color: orange; }

Résultat : tous les types d'alertes reçoivent une police en gras et une bordure, avec la couleur définie par leur classe spécifique.

?Astuce : Vous pouvez copier-coller tous les exemples sur Codepen, pour voir le(s) résultat(s) en action.

? Le sélecteur :where()

Qu'est-ce que :where() ?

Semblable aux sélecteurs de groupes :is(), :where(), mais il a une spécificité de 0, ce qui le rend idéal pour créer des styles faciles à remplacer.

Exemple :

<button>





<pre class="brush:php;toolbar:false">/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

Résultat :

? Le :not() Sélecteur

Qu'est-ce que :not() ?

La pseudo-classe :not() est utilisée pour exclure certains éléments d'une sélection. C'est idéal pour appliquer des styles à tout sauf à un élément ou une classe particulière.

Exemple :

<ul>
    <li>





<pre class="brush:php;toolbar:false">/* Style all list items except those marked as 'done' */
li:not(.done) {
    background-color: #f0f0f0;
}

/* Darken the text for completed items */
li.done {
    color: #888;
}

Résultat :

? Le :has() Sélecteur

Qu'est-ce que :has() ?

La pseudo-classe :has() permet de styliser un élément en fonction de ce qu'il contient. Ce sélecteur est très puissant mais sa prise en charge par les navigateurs est limitée au moment de la rédaction.

Exemple :

<div>





<pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) {
    font-weight: bold;
    border: 1px solid;
    border-radius: 4px;
}

.alert.success { border-color: green; }
.alert.error { border-color: red; }
.alert.warning { border-color: orange; }

<button>





<pre class="brush:php;toolbar:false">/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

Résultat :

Support du navigateur

• :is() et :where() : les navigateurs modernes les prennent généralement en charge, mais vérifient toujours les dernières données de compatibilité.
• :not() : Largement pris en charge, mais les sélecteurs complexes à l'intérieur de :not() peuvent ne pas fonctionner dans les anciens navigateurs.
• :has() : limité aux versions récentes de Safari avec un support expérimental dans d'autres navigateurs. À utiliser avec prudence ou utilisez des polyfills pour une compatibilité plus large.

Considérations spécifiques

• :is() et :where() héritent de la spécificité la plus élevée des sélecteurs qu'ils contiennent, :where() ayant lui-même une spécificité nulle.
• La spécificité de :not() est celle du sélecteur qu'il contient.
• :has() peut entraîner des problèmes de spécificité complexes car cela dépend des sélecteurs qu'il contient, mais cela n'ajoute pas directement au score de spécificité.

Bonnes pratiques d'utilisation des sélecteurs avancés

• Utiliser pour DRY CSS : Ces sélecteurs réduisent les répétitions, rendant votre CSS plus maintenable.
• Considérez les performances : Les sélecteurs complexes peuvent avoir un impact sur les performances, en particulier ceux imbriqués.
• Remplacement pour les navigateurs plus anciens : lorsque vous utilisez :has(), assurez-vous d'avoir des solutions de secours ou utilisez les requêtes de fonctionnalités avec @supports.
• Évitez la surutilisation : Bien que puissant, ne compliquez pas trop vos sélecteurs, car la lisibilité est la clé.

Applications pratiques

• Composants de style : utilisez :is() et :where() pour les styles communs à différentes classes de boutons ou éléments de formulaire.

• Mise en page dynamique : :has() peut être utilisé pour les mises en page adaptatives où la présence de certains éléments modifie le style du parent.

• Responsive Design : Combinez ces sélecteurs avec des requêtes multimédias pour des conceptions encore plus dynamiques et contextuelles.

Conclusion

Les sélecteurs CSS avancés peuvent rationaliser vos feuilles de style, les rendant plus propres et plus efficaces. Gardez un œil sur la prise en charge du navigateur, en particulier pour :has(), et utilisez ces sélecteurs à bon escient pour améliorer votre CSS sans sacrifier la maintenabilité.

Bon codage, et que votre CSS soit aussi sélectif qu'il doit l'être ! ?

---

? Bonjour, je m'appelle Eleftheria, Community Manager, développeur, conférencière et créatrice de contenu.

? Si vous avez aimé cet article, pensez à le partager.

? Tous les liens | X | LinkedIn

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!