Comment la pseudo-classe :has() élimine le besoin de hacks JavaScript en CSS

Vous souvenez-vous de ces moments où vous deviez styliser un élément parent en fonction de ses enfants, et où vous finissiez par écrire un tas de JavaScript juste pour ajouter une simple classe ? Eh bien, ces jours sont enfin derrière nous ! La pseudo-classe CSS :has() est là pour sauver la situation, en changeant la donne pour les développeurs front-end du monde entier.

De quoi s'agit-il à propos de :has() ?

Considérez :has() comme votre boule de cristal CSS – elle vous permet de regarder à l'intérieur des éléments pour vérifier ce qu'ils contiennent. Vous souhaitez styliser un div différemment lorsqu'il contient une image ? C'est aussi simple que d'écrire div:has(> img). Aucun JavaScript n'est requis !

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

La plupart des navigateurs modernes prennent désormais en charge :has(), bien que les utilisateurs d'Internet Explorer (si vous devez toujours les prendre en charge) auront besoin d'une solution de secours. Mais ne vous laissez pas arrêter : l'amélioration progressive est votre amie !

Les anciennes méthodes contre la nouvelle chaleur

Parlons de quelques scénarios courants qui nous rendaient fous. Vous vous en souvenez ?

La danse de validation des champs de formulaire

L'ancienne méthode :

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

La nouvelle façon :

.form-group:has(input:invalid) {
  border-color: red;
  background: #fff8f8;
}

Plus d’écouteurs d’événements ni de basculement de classe – juste du CSS pur et déclaratif. N'est-ce pas beau ?

La refonte du menu déroulant

Nous sommes tous passés par là : essayer de styliser un conteneur déroulant lorsque son menu est ouvert. Auparavant, vous auriez besoin de JavaScript pour faire défiler les classes de haut en bas dans l'arborescence DOM.

Ancienne approche JavaScript :

const dropdown = document.querySelector('.dropdown');
const menu = dropdown.querySelector('.menu');

menu.addEventListener('click', () => {
  dropdown.classList.toggle('is-open');
});

Nouvelle approche CSS :

.dropdown:has(.menu:focus-within) {
  background: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Des tours de magie du monde réel avec :has()

Regardons quelques exemples pratiques où :has() brille vraiment :

1. Galeries d'images intelligentes

Vous souhaitez que votre galerie ajuste sa mise en page en fonction du type de contenu qu'elle contient ? Facile comme bonjour !

.gallery:has(img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery:has(video) {
  display: flex;
  flex-direction: column;
}

Vous pouvez intégrer le lien vers l'article Medium dans votre nouvel article en l'utilisant comme référence, citation ou source d'inspiration. Voici comment vous pouvez l’inclure efficacement :

Les formulaires interactifs, les menus déroulants et la gestion de l'état des frères et sœurs ne sont que quelques exemples des domaines dans lesquels CSS prend désormais les devants. Comme indiqué dans cet article perspicace de Medium, des techniques modernes telles que :has() permettent à CSS de gérer directement ces tâches sans recourir à JavaScript.

2. Dépendances des champs de formulaire

Besoin de mettre en évidence une section entière lorsqu'une case est cochée ? Pas de problème !

.section:has(input[type="checkbox"]:checked) {
  background: #e8f4ff;
  padding: 1rem;
  border-radius: 4px;
}

3. Gestion des états vides

Vous souhaitez afficher un message lorsqu'un conteneur est vide ? :has() vous soutient :

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

La victoire en termes de performances

Voici le problème de l'utilisation de :has() au lieu de JavaScript : il ne s'agit pas seulement d'écrire moins de code. Vos pages fonctionneront en fait mieux parce que :

1. Le moteur de style du navigateur gère tout le travail de manière native
2. Aucune surcharge d'exécution JavaScript
3. Pas de perturbation de la mise en page due aux ajouts/suppressions de classes constantes
4. Moins d'auditeurs d'événements encombrant votre page

Meilleures pratiques et pièges

Bien que :has() soit génial, il y a quelques points à garder à l'esprit :

1. Gardez les choses simples
   N'allez pas trop loin avec des sélecteurs complexes. Ce n'est pas parce que vous pouvez écrire div:has(> span:has(> img)):has( p) que vous devriez le faire !

2. Amélioration progressive
   Ayez toujours une solution de secours judicieuse pour les navigateurs qui ne prennent pas en charge :has():
   

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

1. Considérations relatives aux performances Bien que :has() soit généralement performant, des sélecteurs très complexes peuvent toujours avoir un impact sur le rendu. Gardez un œil sur votre panneau de performances DevTools si vous l'utilisez beaucoup.

Conclusion

La pseudo-classe :has() est plus qu'une simple nouvelle fonctionnalité CSS : c'est un changement de paradigme dans la façon dont nous gérons les relations parent-enfant dans nos feuilles de style. Cela nous aide à écrire du code plus maintenable, à améliorer les performances et, plus important encore, il permet à CSS de faire ce que CSS fait de mieux : gérer le style de manière déclarative.

Alors la prochaine fois que vous utiliserez JavaScript pour basculer une classe sur un élément parent, rappelez-vous : il pourrait y avoir une solution plus simple et plus élégante avec :has(). Essayez-le – votre code (et vos utilisateurs) vous remercieront !

N'oubliez pas que même si la prise en charge du navigateur est bonne et continue de s'améliorer, consultez toujours caniuse.com pour obtenir les dernières informations de compatibilité. Et n'ayez pas peur d'expérimenter : c'est ainsi que nous apprenons et grandissons tous en tant que développeurs !

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!