Combiner CSS :has() et HTML pour un meilleur style conditionnel —

Même si le CSS :has() La pseudo-classe est relativement nouvelle, nous en savons déjà beaucoup sur elle, grâce à de très nombreux articles et tutoriels démontrant sa puissante capacité à sélectionner conditionnellement des éléments en fonction de leur contenu. Nous avons tous vu les exemples de composants de carte et d’en-tête, mais la nature conditionnelle de :has() le rend en fait apte à travailler avec des contrôles de formulaire, qui sont également de nature assez conditionnelle.

Regardons spécifiquement le <select> élément. Grâce à lui, nous pouvons faire un choix parmi une série de <option>s. Combiné avec :has()nous sommes capables de manipuler les styles en fonction du modèle sélectionné <option>.

<select>
  <option value="1" selected>Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

C’est votre norme <select> utilisation, produisant un menu déroulant contenant des options de sélection par l’utilisateur. Et même si ce n’est pas obligatoire, j’ai ajouté le selected attribuer au premier <option> pour le définir comme option sélectionnée initialement.

L’application de styles basés sur la sélection d’un utilisateur n’est pas une nouveauté. Nous avons eu le Piratage de case à cocher dans nos poches depuis des années, en utilisant le :checked Pseudo-classe CSS pour styliser l’élément en fonction de l’option sélectionnée. Dans l’exemple suivant, je change le nom de l’élément color et le background-color propriétés basées sur la sélection <option>.

Mais cela se limite au style de l’élément actuel, n’est-ce pas ? Si un particulier <option> est :checked, puis nous stylisons son style. Nous pouvons écrire un sélecteur plus complexe et styliser les éléments enfants selon qu’un <option> est sélectionné en haut de la chaîne, mais c’est une voie à sens unique dans la mesure où nous ne pouvons pas styliser les éléments parents encore plus loin dans la chaîne.

C’est là que :has() entre en jeu parce que le style de la chaîne est exactement ce pour quoi elle est conçue ; en fait, on l’appelle souvent le « sélecteur de parents » pour cette raison (même si « sélecteur de famille » peut-être un meilleur descripteur).

Par exemple, si nous voulons modifier le background-color de la <select> élément en fonction de la valeur de l’élément sélectionné <option>, nous sélectionnons l’élément s’il a un spécifique [value] c’est :checked.

Est-ce vraiment pratique ? Une façon dont je l’utilise est de styler obligatoire <select> éléments sans sélection valide <option>. Ainsi, au lieu d’appliquer des styles si l’élément :has() un :checked état, j’applique des styles si le required l’élément fait :not(:has(:checked)).

Mais pourquoi s’arrêter là ? Si nous pouvons utiliser :has() pour styliser le <select> élément en tant que parent d’un <option>nous pouvons également l’utiliser pour styliser le parent du <select>, ainsi que son parent, en plus de son parent, et même son parent… tout le long de la chaîne jusqu’au :root élément. Nous pourrions même apporter :has() tout au long de la chaîne et détectez s’il y en a <select> enfant du document :root :has() un particulier <option> c’est :checked:

:root:has(select [value="foo"]:checked) {
  // Styles applied if <option value="foo"> is <select>-ed
}

Ceci est utile pour définition dynamique d’une valeur de propriété personnalisée ou appliquer un ensemble de styles pour toute la page. Créons un petit sélecteur de style qui illustre l’idée de définir des styles sur une page entière.

Ou peut-être un sélecteur de thème :

Comment fonctionne ce dernier exemple, j’ai ajouté une classe à chacun <select> élément et référencé cette classe à l’intérieur du :has() sélecteur afin d’éviter des sélections indésirables en cas de présence de plusieurs <select> éléments sur la page.

Et bien sûr, nous n’avons pas besoin d’aller jusqu’au :root élément. Si nous travaillons avec un composant spécifique, nous pouvons définir :has() à ce composant comme dans la démo suivante d’un composant de classement par étoiles.

Regardez un court didacticiel vidéo que j’ai réalisé sur l’utilisation CSS pour créer des étoiles animées en 3D.

Conclusion

Nous ferions :has() ce serait un très mauvais service si nous le considérions uniquement comme un « sélecteur de parents » plutôt que comme un « sélecteur de parents ». le grand opérateur conditionnel c’est pour appliquer des styles tout au long de la chaîne. Vu de cette façon, il s’agit plutôt d’une mise à niveau moderne du Checkbox Hack dans la mesure où il envoie des styles comme nous n’avions jamais pu le faire auparavant.

Il existe d’innombrables exemples d’utilisation :has() pour créer des variations de style d’un composant en fonction de son contenu. Nous l’avons même vu utilisé pour accomplir des tâches autrefois compliquées. modèle de carte liée. Mais vous avez maintenant un exemple pour l’utiliser pour créer des menus déroulants qui appliquent conditionnellement des styles (ou non) à une page ou à un composant en fonction de l’option actuellement sélectionnée – en fonction de l’étendue de la chaîne dans laquelle nous l’étendons.

J’ai utilisé cette technique de différentes manières – par exemple, comme validation de formulaire, sélecteur de style et classement par étoiles – mais je suis sûr qu’il existe de nombreuses autres façons d’imaginer comment l’utiliser dans votre propre travail. Et si vous utilisez :has() sur un <select> élément pour quelque chose de différent ou d’intéressant, faites-le-moi savoir car j’aimerais le voir !

Lectures complémentaires sur SmashingMag

(gg, ouais)