Nouveau sur la plate-forme Web en mai

Découvrez quelques-unes des fonctionnalités intéressantes qui ont été déployées dans les navigateurs Web stables et bêta en mai 2026.

Rachel Andrew

Publié le : 29 mai 2026

Versions stables du navigateur

Chrome 148, Firefox 151 et Safari 26.5 sont sortis en version stable en mai. Cet article présente les nombreuses nouveautés de ce mois-ci.

Remarque : Les données de compatibilité des navigateurs extraites de MDN sont incluses dans ces articles. Il est possible qu'elles n'aient pas encore été mises à jour pour les versions de navigateur très récentes. Les informations correctes s'afficheront dans le post dès qu'elles apparaîtront dans la version des données de compatibilité du navigateur.

La pseudo-classe CSS :open devient "Baseline"

Safari 26.5 est principalement une version de correctifs pour les fonctionnalités existantes. Toutefois, il inclut également la prise en charge de la pseudo-classe :open, ce qui rend cette fonctionnalité disponible dans la version de référence.

La pseudo-classe :open vous permet de styliser les éléments qui ont des états "ouvert" et "fermé" lorsqu'ils sont ouverts. Cela s'applique aux éléments tels que <details> et <dialog> lorsqu'ils sont ouverts, ainsi qu'aux éléments <select> et <input> (comme les sélecteurs de couleur ou de date) lorsque leurs interfaces de sélecteur sont affichées. Cela offre une alternative sémantique plus propre à la mise en forme à l'aide d'attributs tels que details[open].

Browser Support

• 133
• 133
• 136
• 26.5

Source

Les requêtes de conteneur CSS avec nom uniquement deviennent de référence

Avec la sortie de Chrome 148 ce mois-ci, les requêtes de conteneur avec nom uniquement sont désormais disponibles dans la catégorie "Nouveautés de référence".

Auparavant, lorsque vous rédigiez une requête de conteneur, vous deviez spécifier une condition de requête de taille ou de style à côté du nom du conteneur, et établir le type du conteneur avec la propriété container-type. Vous pouvez désormais interroger la présence d'un conteneur nommé par son nom uniquement, sans aucune condition supplémentaire. De plus, vous n'avez plus besoin de définir un container-type sur l'ancêtre si vous n'interrogez que par nom :

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

• 148
• 148
• 149
• 26.4

Les requêtes de style de conteneur pour les propriétés personnalisées deviennent de référence

Firefox 151 est désormais compatible avec les requêtes style() sur @container, ce qui rend les requêtes de style de conteneur pour les propriétés personnalisées disponibles dans la version de référence.

Les requêtes de style de conteneur vous permettent d'appliquer des styles aux éléments en fonction des propriétés CSS d'un conteneur parent. Les requêtes de taille sont extrêmement puissantes, mais les requêtes de style vous permettent d'interroger des fonctionnalités autres que la taille. Cette version apporte notamment une prise en charge complète des requêtes sur les propriétés personnalisées dans tous les navigateurs. Par exemple, vous pouvez vérifier si une propriété personnalisée --theme est définie sur dark dans un conteneur parent :

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

• 111
• 111
• 151
• 18

Chargement différé pour les éléments vidéo et audio

Chrome 148 introduit le chargement différé natif pour les éléments <video> et <audio> avec l'attribut loading="lazy".

Comme pour les éléments <img> et <iframe>, vous pouvez désormais demander au navigateur de retarder le chargement des ressources multimédias jusqu'à ce qu'elles soient proches de la fenêtre d'affichage. Cela permet d'améliorer les performances de chargement des pages, d'économiser de la bande passante et de réduire la consommation des données pour vos utilisateurs. Pour en savoir plus, consultez l'article How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today (Comment utiliser le chargement différé standard des éléments vidéo et audio HTML sur le Web aujourd'hui) de l'équipe qui a implémenté cette fonctionnalité.

Browser Support

• 148
• 148
• x
• x

Source

API Picture-in-Picture pour les documents

Firefox 151 est compatible avec l'API Document Picture-in-Picture sur les plates-formes de bureau.

Contrairement à l'API Picture-in-picture standard qui vous permet d'afficher un élément <video> dans une fenêtre toujours au premier plan, l'API Document Picture-in-picture vous permet d'ouvrir une fenêtre toujours au premier plan contenant du contenu HTML arbitraire. Cela permet d'afficher des calques interactifs enrichis, tels que des grilles de participants à une visioconférence, des tickers boursiers interactifs ou des minuteurs qui persistent même lorsque vous quittez la page.

Browser Support

• 116
• 116
• 151
• x

Source

L'API Web Serial étend la compatibilité avec les plates-formes

Firefox 151 est désormais compatible avec l'API Web Serial sur les plates-formes de bureau, et Chrome 148 sur Android.

L'API Web Serial permet aux sites Web de lire et d'écrire des données sur des appareils série, par exemple des microcontrôleurs, des imprimantes 3D, des cartes de développement et du matériel périphérique. Dans Firefox, l'utilisation de l'API Web Serial nécessite que les utilisateurs installent un module complémentaire d'autorisation de site généré de manière synthétique, ce qui garantit un mécanisme sûr et contrôlé pour gérer l'accès.

Browser Support

• 89
• 89
• 151
• x

Source

Versions bêta du navigateur

Les versions bêta du navigateur vous donnent un aperçu des fonctionnalités de la prochaine version stable du navigateur. C'est le moment idéal pour tester les nouvelles fonctionnalités ou les suppressions qui pourraient avoir un impact sur votre site avant que le monde entier ne découvre cette version. Les nouvelles versions bêta de ce mois-ci sont Chrome 149 et Firefox 152. Il n'y a pas de version bêta de Safari ce mois-ci.

La version bêta de Chrome 149 inclut des mises à jour CSS intéressantes, comme les décorations d'espaces CSS, qui vous permettent de styliser les espaces blancs (espaces) entre les éléments flex et de grille. Il est également compatible avec path() et shape(), ainsi qu'avec les fonctions de forme de base rect() et xywh() dans la propriété shape-outside, et avec path-length en tant que propriété CSS. Du côté de l'API, les méthodes de défilement programmatique telles que scrollTo(), scrollBy() et scrollIntoView() renvoient désormais des promesses qui se résolvent lorsque le défilement fluide est terminé. Les pages avec des connexions WebSocket actives peuvent désormais être éligibles à la mise en cache arrière/avant (BFCache).

La version bêta de Firefox 152 introduit la prise en charge complète de la propriété field-sizing, qui permet aux éléments de formulaire d'ajuster automatiquement leur taille en fonction de leur contenu. Il ajoute également les propriétés actions et maxActions à l'interface Notification, ainsi que la prise en charge de options.pseudoElement dans Element.getAnimations().