Publié le : 3 juin 2026
Bienvenue dans le récapitulatif mensuel de Baseline. En mai 2026, plusieurs nouvelles fonctionnalités CSS, propriétés d'événement et ajouts d'API sont devenus disponibles dans Baseline, tandis que les unités CSS, les propriétés d'interaction utilisateur et les pseudo-classes ont atteint le statut "Largement disponible" dans Baseline, en plus d'importantes mises à jour de la communauté des développeurs.
Enquête sur l'état des CSS en 2026
Le bilan annuel de la communauté Web est disponible : l'enquête sur l'état du CSS en 2026 est désormais ouverte. Cette année, les organisateurs se sont efforcés d'affiner l'enquête, en se concentrant sur les fonctionnalités qui comptent le plus pour les développeurs à l'ère du codage assisté par l'IA. Les fournisseurs de navigateurs suivent de près ces résultats pour les aider à définir les priorités de leurs feuilles de route d'ingénierie et à résoudre les problèmes des développeurs. N'hésitez pas à donner votre avis et à partager votre expérience sur l'évolution du paysage CSS avant la clôture de l'enquête le 1er juillet.
Nouvelles fonctionnalités de référence
Les fonctionnalités de cette section sont compatibles depuis mai 2026 dans l'ensemble de navigateurs principaux et sont désormais disponibles dans Baseline Newly.
Requêtes de style de conteneur
Les requêtes de conteneur ne sont plus limitées à la taille. Grâce aux requêtes de style, vous pouvez désormais appliquer des styles à des éléments en fonction des propriétés personnalisées d'un conteneur parent. Cela vous permet de créer des composants très modulaires qui peuvent adapter leur thème ou leur style en fonction de leur emplacement contextuel, sans avoir à utiliser des structures de classe complexes.
Pour en savoir plus, consultez la page de référence MDN pour @container.
Pseudo-classe :open
Auparavant, pour styliser des éléments avec des états ouverts et fermés (comme <dialog> et <details>), il fallait vérifier les attributs ou gérer les classes. La pseudo-classe :open simplifie cela en ne faisant correspondre ces éléments que lorsqu'ils sont actuellement ouverts, ce qui permet d'obtenir un CSS plus propre et plus déclaratif.
Pour en savoir plus, consultez la page MDN sur la pseudo-classe :open.
ToggleEvent.source
Lorsque vous utilisez l'API Popover, il est essentiel de réagir aux changements d'état. La propriété source de l'interface ToggleEvent renvoie l'élément de contrôle qui a déclenché l'action d'activation/désactivation du pop-up. Cela vous permet d'identifier l'origine de l'événement et de coordonner des interactions complexes de l'UI.
Pour en savoir plus, consultez la documentation MDN sur ToggleEvent.source.
image-rendering établissement
La propriété CSS image-rendering vous permet de contrôler l'algorithme de mise à l'échelle utilisé lors du redimensionnement des images. C'est particulièrement utile pour le pixel art, les images basse résolution ou les codes QR, où il est important d'éviter l'interpolation floue et de conserver une mise à l'échelle nette et pixélisée.
Découvrez comment l'utiliser sur la page MDN pour image-rendering.
text-decoration-skip-ink: all
Les traits de soulignement qui traversent les jambages peuvent parfois paraître encombrés. Alors que text-decoration-skip-ink: auto ne saute l'encre que lorsqu'il y a intersection, le paramètre all force le trait de soulignement à sauter tous les glyphes, quelle que soit l'intersection, ce qui permet de mieux contrôler l'esthétique de la typographie.
Pour en savoir plus, consultez le guide MDN sur text-decoration-skip-ink.
SharedWorker
L'API SharedWorker fournit un worker d'arrière-plan spécialisé accessible à partir de plusieurs contextes de navigation, tels que différentes fenêtres, onglets ou iFrames sur la même origine. C'est un outil puissant pour partager l'état, gérer les connexions ou coordonner les tâches en arrière-plan au-delà des limites des onglets.
Consultez la documentation MDN pour SharedWorker.
Fonctionnalités standards largement disponibles
Les fonctionnalités suivantes sont désormais disponibles dans Baseline, ce qui signifie qu'elles sont largement compatibles et utilisables dans vos projets.
Unité de longueur lh
L'unité relative lh correspond à la hauteur de ligne calculée de l'élément sur lequel elle est utilisée. Il est ainsi plus facile de dimensionner des éléments (comme des badges d'icônes ou des mises en surbrillance d'arrière-plan) pour qu'ils correspondent parfaitement à la hauteur d'une ligne de texte.
Pour en savoir plus, consultez la documentation MDN sur les unités de longueur.
Unité de longueur rlh
Semblable à lh, l'unité rlh représente la hauteur de ligne, mais spécifiquement celle de l'élément racine (<html>). Cela vous permet d'établir un rythme vertical cohérent sur l'ensemble de votre page, quels que soient la taille de police ou les remplacements de hauteur de ligne locaux.
Pour en savoir plus, consultez la documentation MDN sur les unités de longueur.
Navigator.userActivation
De nombreuses API Web (comme la lecture vidéo, les pop-ups ou l'accès au presse-papiers) nécessitent une interaction de l'utilisateur avant de pouvoir être déclenchées. La propriété Navigator.userActivation renvoie un objet contenant des informations sur l'état d'activation actuel et historique de l'utilisateur sur la fenêtre, ce qui permet aux scripts de vérifier si un geste de l'utilisateur a eu lieu.
Découvrez comment l'utiliser sur la page MDN pour Navigator.userActivation.
clip-path
La propriété CSS clip-path vous permet de créer une région de découpage qui définit la partie d'un élément qui doit être visible. En utilisant des formes de base (comme des cercles, des ellipses ou des polygones) ou des chemins SVG, vous pouvez créer des mises en page et des transitions attrayantes sans masquer le contenu en trop.
Consultez les détails de l'implémentation sur la page MDN pour clip-path.
Pseudo-classe :user-invalid
Contrairement à :invalid, qui applique un style dès qu'une page se charge (ce qui entraîne souvent une mauvaise expérience utilisateur), la pseudo-classe :user-invalid ne correspond qu'aux éléments de formulaire non valides après que l'utilisateur a interagi avec eux. Cela signifie que vous pouvez afficher des commentaires de validation de formulaire une fois que l'utilisateur a quitté le champ.
Pour en savoir plus, consultez la documentation MDN pour :user-invalid.
Conclusion
Dites-nous si nous avons oublié quelque chose concernant Baseline. Nous veillerons à l'inclure dans une prochaine édition. Si vous avez des questions ou souhaitez nous faire part de vos commentaires sur Baseline, vous pouvez signaler un problème dans notre Issue Tracker.