:has est un sélecteur impitoyable

Une petite chose s'est produite sur le chemin de la publication du CSS :has() sélecteur au vieil almanach. j'avais initialement décrit :has() en tant que sélecteur "indulgent", l'idée étant que tout ce qui se trouve dans son argument est évalué, même si un ou plusieurs des éléments sont invalides.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

See ::scoobydoo là-dedans ? C'est totalement invalide. Une liste de sélecteurs indulgents ignore ce faux sélecteur et procède à l'évaluation du reste des éléments comme s'il était écrit comme ceci :

article:has(h2, ul) { }

:has() était en effet un sélecteur indulgent dans un précédent projet daté du 7 mai 2022. Mais cela a changé après qu'un problème a été signalé que la nature indulgente entre en conflit avec jQuery lorsque :has() contient un sélecteur complexe (par exemple header h2 + p). Le W3C a adopté une résolution pour a prendre une :has() un sélecteur "impitoyable" il y a quelques semaines seulement.

Alors, notre exemple précédent ? La liste entière du sélecteur n'est pas valide car le faux sélecteur n'est pas valide. Mais les deux autres sélecteurs indulgents, :is() ainsi que le :where(), restent inchangés.

Il y a un peu une solution de contournement pour cela. Rappelles toi, :is() ainsi que le :where()sont indulgents, même si :has() n'est pas. Cela signifie que nous pouvons imbriquer l'un ou l'autre de ces sélecteurs dans :has() pour obtenir un comportement plus indulgent :

article:has(:where(h2, ul, ::-scoobydoo)) { }

Lequel vous utilisez peut avoir de l'importance car la spécificité de :is() est déterminé par l'élément le plus spécifique de sa liste. Donc, si vous avez besoin de quelque chose de moins spécifique, vous feriez mieux d'atteindre :where() puisqu'il n'ajoute rien au score de spécificité.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

Nous avons mis à jour quelques-uns de nos messages pour refléter les dernières informations. J'en vois beaucoup d'autres dans la nature qui doivent être mis à jour, alors juste un petit message d'intérêt public pour tous ceux qui ont besoin de faire de même.

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://css-tricks.com/has-is-an-unforgiving-selector/