Plus réels utilisations du monde pour: a ()

CSS :has() pseudo-classe est sans aucun doute l'une de mes nouvelles fonctionnalités préférées de CSS, et je crois que de nombreux participants à l'enquête de l'état de CSS sont d'accord avec cela. Cette capacité à «inverser» les sélecteurs nous donne des capacités de manière inattendue.

La raison pour laquelle elle est appelée "plus puissante" est que de nombreux développeurs intelligents ont publié de nombreuses idées intelligentes incroyables, telles que:

• "Utilisation de Jen Simmons: a () comme sélecteur de parent CSS et plus"
• Bramus "Implémentation d'un certain nombre de requêtes pour" îles d'éléments "avec la même classe" en utilisant CSS: Has ()
• Les styles d'élément parent de Bramus en fonction du nombre d'enfants "
• Manuel Matuzović "Utilisation du combinateur dans: a ()"
• Austin Gil "Quatre façons de faire de vos formes HTML excellentes"
• "Vidéo :: a () des cas pratiques de Zoran Jambor"
• Jhey Tompkins ": Has (): sélecteur de famille"

Cet article n'est pas un guide faisant autorité pour :has(), ni une duplication du contenu existant. Je veux juste partager certaines des façons dont j'utilise très probablement :has() dans mon travail quotidien… Bien sûr, la prémisse est que le support du navigateur est assez bon. (Firefox est le dernier navigateur à persévérer, mais il sera bientôt pris en charge.)

Une fois que le support du navigateur est parfait, je vais certainement l'utiliser partout :has(). Voici quelques cas réels que j'ai construits récemment, et je me suis dit: «À quel point ce sera-t-il une fois que :has() est entièrement pris en charge!»

Évitez d'opérer en dehors des composants JavaScript

Avez-vous déjà construit un composant interactif qui a parfois besoin d'influencer le style de la page ailleurs? Dans l'exemple suivant,

est un mega menu, l'ouverture change la couleur du contenu ci-dessus. <nav></nav>

J'ai l'impression d'avoir toujours besoin de faire ce genre de chose.

Cet exemple spécifique est le composant React que j'ai fait pour un site Web. J'ai dû utiliser

à l'extérieur de la section réactive de la page "Touch" et basculer une classe sur document.querySelector(...), <header></header> ou d'autres composants. Ce n'est pas la fin du monde, mais cela semble un peu gênant. Même dans un site Web React complet (comme le site Web Next.js), j'ai dû choisir entre gérer l'état <main></main> sur un arbre de composants plus élevé ou effectuer la même sélection d'éléments DOM - qui n'est pas tout à fait de style réagi. Avec menuIsOpen, le problème est résolu: :has()

header:has(.megamenu--open) {
  /* 如果包含具有类“.megamenu--open”的元素，则以不同的方式设置 header 样式 */
}

Mon composant JavaScript n'a plus besoin de gérer d'autres parties du DOM!

Better Table Stripes Expérience utilisateur

Ajouter des "rayures" en ligne alternées à une table peut améliorer l'expérience utilisateur. Ils aident vos yeux à suivre les lignes dans lesquelles vous vous trouvez actuellement lors de la numérisation de la table.

Mais d'après mon expérience, cela ne fonctionne pas bien sur les tables avec seulement deux ou trois rangées. Par exemple, si votre table a trois lignes dans <tbody> et que vous "rayons" chaque "même" "même", vous pouvez vous retrouver avec une seule bande. Ce n'est pas digne de ce modèle et peut faire se demander à l'utilisateur ce qui est spécial dans cette ligne mis en évidence. En utilisant Bramus en utilisant <code>:has() la technique d'application des styles en fonction du nombre d'éléments enfants, nous pouvons appliquer des rayures de table en cas de plus de trois lignes:

Vous voulez des fonctionnalités plus avancées? Vous pouvez également décider de le faire uniquement si le tableau contient au moins un nombre spécifique de colonnes:

header:has(.megamenu--open) {
  /* 如果包含具有类“.megamenu--open”的元素，则以不同的方式设置 header 样式 */
}

supprimer la logique de classe conditionnelle du modèle

J'ai souvent besoin de modifier la disposition de la page en fonction de ce qui se trouve sur la page. Prenant l'exemple de la disposition de la grille suivante, l'emplacement du contenu principal modifiera la zone de la grille en fonction de la question de savoir si la barre latérale existe.

Cela peut dépendre de la définition de la page de frères et sœurs dans le CMS. J'utilise généralement la logique du modèle pour ajouter conditionnellement les classes de modificateurs BEM au wrapper de mise en page pour s'adapter aux deux dispositions. Le CSS peut ressembler à ceci (les règles réactives et autres contenus sont omis pour la concision):

table:has(:is(td, th):nth-child(3)) {
  /* 只有在有三列或更多列时才执行操作 */
}

Bien sûr, du point de vue du CSS, c'est absolument bien. Mais cela rend le code de modèle un peu en désordre. Selon votre langue de modèle, l'ajout d'un tas de classes conditionnellement peut devenir très moche, surtout si vous devez faire de même avec de nombreux éléments enfants.

Comparez cela avec une méthode basée sur :has():

/* m = 主要内容 */
/* s = 侧边栏 */
.standard-page--with-sidebar {
  grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar {
  grid-template-areas: '. m m m m m m m m m . .';
}

Honnêtement, du point de vue du CSS, ce n'est pas beaucoup mieux. Mais à mon avis, la suppression de la classe de modificateurs conditionnels du modèle HTML est un bon gain.

Il est facile de penser aux décisions de micro-conception de :has() - lorsque les images sont incluses dans la carte, par exemple - mais je pense qu'elle est également très utile pour ces changements de disposition macro.

Une meilleure gestion spécifique

Si vous lisez mes articles précédents, vous saurez que je suis un persistance de spécificité. Si vous êtes comme moi et que vous ne voulez pas que des scores spécifiques augmentent lorsque vous ajoutez :has() et :not() à l'ensemble du style, assurez-vous d'utiliser :where().

En effet, la spécificité de :has() est basée sur l'élément le plus spécifique de dans sa liste de paramètres. Donc, si vous incluez quelque chose comme ID dedans (je ne sais pas pourquoi!) Votre sélecteur sera difficile à écraser dans la cascade.

En revanche, la spécificité de

est toujours nulle et n'augmentera jamais le score de spécificité. :where()

/* m = 主要内容 */
/* s = 侧边栏 */
.standard-page:has(.sidebar) {
  grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) {
  grid-template-areas: '. m m m m m m m m m . .';
}

Bright Future

Ce ne sont que quelques-unes des fonctionnalités que j'ai hâte d'utiliser dans un environnement de production. CSS-Tricks Almanac fournit également quelques exemples. Qu'attendez-vous avec impatience d'utiliser

? Quels vrais cas avez-vous rencontrés qui seraient la solution parfaite? :has()

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!