Résumé

  • En novembre 2018, le brouillon Selectors Level 4 du W3C décrivait :has() pour sélectionner un élément selon un enfant ou un voisin suivant, mais l’excluait du profil de sélection CSS en direct.
  • En mai 2022, les profils disparurent du texte ; :has() devint une fonction facultative et à risque. La révision de novembre interdit son imbrication en elle-même et, en règle générale, les pseudo-éléments dans son argument.

Une rédaction publie des cartes d’articles. Certaines portent une image, d’autres n’ont qu’un titre et deux lignes de présentation. La boîte extérieure devrait accorder plus d’espace à la photo quand elle apparaît. CSS sait descendre dans la structure : « dans cette carte, habille l’image ainsi ». Remonter est une autre affaire : « cette carte contient-elle une image ? ». Faute de réponse, les sites ont souvent ajouté un indice supplémentaire dans la structure ou dans un script. La famille possède déjà l’information, mais le parent réclame encore un mot dans le carnet de correspondance.

Le brouillon W3C du 21 novembre 2018 proposait :has() comme réponse. Son exemple a:has(> img) sélectionne un lien qui a directement une image pour enfant. C’est le lien qui est visé ; l’image sert de condition. Le même texte présente dt:has(+ dt) : un terme de définition est sélectionné si un autre terme vient immédiatement après lui. Le surnom de « sélecteur de parent » fait sourire et aide à mémoriser l’idée, mais le voisin de palier compte aussi. :has() décrit une relation autour de l’élément examiné.

Le brouillon de 2018 réservait pourtant cette question à une salle d’attente. Il séparait un profil « live », conçu notamment pour la sélection CSS du navigateur, d’un profil « snapshot » adapté à un arbre de document évalué à un instant donné ; querySelector() en était l’exemple. :has() appartenait au second et figurait parmi les exceptions du premier. Un inspecteur pouvait demander si la carte contenait une image. La feuille de style active, selon cette version, devait garder le silence. Les auteurs du texte demandaient aux implémenteurs de revoir ce partage. La fonctionnalité avait des exemples parlants, mais la porte du salon CSS restait fermée.

Le brouillon du 7 mai 2022 changea la règle d’entrée. Son historique de modifications annonce la suppression des profils et classe :has() comme facultatif et « at-risk ». La vieille frontière entre interrogation ponctuelle et sélection CSS en direct s’effaçait. Le soutien à la fonction demeurait un choix d’implémentation dans ce brouillon. Le règlement autorisait donc la conversation familiale, sans imposer à chaque navigateur la même date de réunion.

Le fonctionnement tient dans une question ancrée sur l’élément que l’on veut sélectionner. Dans a:has(> img), la flèche > exige une image enfant immédiate. Dans dt:has(+ dt), le signe + regarde le frère suivant. Ces signes minuscules font toute la différence. Un titre placé quelque part dans une section, une image précisément enfant d’un lien et un élément à la porte voisine n’occupent pas la même place. La feuille de style peut choisir le bon cadre à partir de cette relation, puis lui donner une présentation adaptée.

Le texte de mai 2022 offre aussi une petite bombe grammaticale. section:not(:has(h1, h2, h3, h4, h5, h6)) cherche une section sans titre descendant. Déplacez la négation pour écrire section:has(:not(h1, h2, h3, h4, h5, h6)) et l’on cherche une section contenant quelque chose qui n’est pas un titre. Une section bien titrée avec un simple paragraphe peut satisfaire la seconde formule. Une parenthèse mal rangée et la règle d’édition a changé de sujet. Le correcteur de copie peut reprendre son stylo rouge.

La révision du 11 novembre 2022 traça des limites plus nettes. :has() ne peut être imbriqué dans lui-même. Les pseudo-éléments sont généralement exclus de ses arguments. Le document explique que certains pseudo-éléments existent selon le style de leurs ancêtres : demander à cet ancêtre de dépendre à son tour de ces créations risquerait de tourner en rond. La conversation remonte vers le parent, mais elle ne peut devenir un conseil de famille sans fin.

L’historique de publication du W3C situe les étapes de 2018 et 2022. Leur intérêt dépasse une astuce de mise en page. Le navigateur teste une relation commune dans l’arbre du document ; le site décide quelle relation mérite un changement visible. La carte avec photo peut respirer, le terme suivi d’un autre peut recevoir un traitement particulier, une section sans titre peut être repérée. Les données restent dans le document où elles étaient déjà. La feuille de style cesse de faire semblant de ne pas connaître les habitants de la maison.

Le parent a reçu son courrier. Et, belle surprise, le voisin avait aussi quelque chose à dire.