Nouveaux utilisateurs sur la plate-forme Web en juin

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

Rachel Andrew

Date de publication : 30 juin 2026

Versions stables du navigateur

Chrome 149, Chrome 150 et Firefox 152 sont sortis en version stable en juin. Aucune version stable de Safari n'est sortie ce mois-ci. Cet article présente les nouvelles fonctionnalités disponibles dans les navigateurs Web.

Le dimensionnement des commandes de formulaire avec field-sizing devient la référence

Firefox 152 est désormais compatible avec la propriété CSS field-sizing, ce qui permet de redimensionner automatiquement les éléments de formulaire. Cette fonctionnalité est désormais disponible dans tous les principaux moteurs de navigateur.

La propriété field-sizing permet aux commandes de formulaire telles que <textarea>, <input> et <select> de se réduire ou de s'agrandir de manière dynamique pour s'adapter à leur contenu (field-sizing: content) au lieu de rester à une taille par défaut fixe (field-sizing: fixed). Cela élimine le besoin de solutions de contournement JavaScript lors de la création de champs de saisie de texte ou de zones de texte qui se redimensionnent à mesure que les utilisateurs tapent.

textarea {
  field-sizing: content;
}

Les formes de base rect() et xywh() dans shape-outside deviennent Baseline

Avec Chrome 149, la prise en charge des fonctions de forme rect() et xywh() dans la propriété shape-outside est désormais disponible dans les principaux navigateurs.

Les fonctions rect() et xywh() vous permettent de définir des zones d'exclusion flottantes rectangulaires à l'aide de coordonnées d'encart exactes ou d'une syntaxe d'origine et de dimensions. Cela offre une syntaxe plus simple et plus lisible que l'utilisation de polygon() pour les formes d'habillage flottantes rectangulaires.

Mise à l'échelle automatique des polices avec CSS text-fit

Chrome 150 introduit la propriété CSS text-fit, qui permet aux développeurs de mettre automatiquement à l'échelle la taille des polices pour qu'elles s'adaptent à la largeur d'une boîte de contenu.

.headline {
  text-fit: grow;
}

Décorations d'espaces CSS

Chrome 149 introduit la prise en charge des décorations d'espacement CSS dans les mises en page en grille et Flexbox. Les décorations d'espacement vous permettent d'ajouter des lignes et des styles directement à l'espacement entre les éléments de grille et flexibles, comme column-rule dans les mises en page multicolonnes.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Pour en savoir plus, consultez Gap decorations: Now in Chromium (Décorations d'espaces : désormais disponibles dans Chromium).

CSS background-clip: border-area

Chrome 150 prend désormais en charge background-clip: border-area à partir de CSS Backgrounds Level 4.

Cette valeur permet de rogner les arrière-plans des éléments spécifiquement sur la zone de bordure. Vous pouvez ainsi créer des bordures dégradées personnalisées, des bords de cadre décoratifs et des effets de bordure animés sans avoir besoin d'éléments d'encapsulation ni de pseudo-éléments supplémentaires.

Promesses de défilement programmatique

Chrome 150 met à jour les méthodes de défilement programmatique (scrollTo(), scrollBy() et scrollIntoView()) pour renvoyer une promesse.

La promesse renvoyée est résolue lorsque l'animation de défilement fluide se termine, ce qui fournit un signal fiable pour déclencher des actions de suivi une fois le défilement terminé.

Navigation au clavier déclarative avec focusgroup

Chrome 150 est désormais compatible avec l'attribut focusgroup.

L'attribut focusgroup permet aux développeurs de gérer de manière déclarative la navigation par touches fléchées dans les commandes d'interface utilisateur composites (telles que les barres d'outils, les listes d'onglets et les menus) sans avoir à écrire manuellement des écouteurs d'événements clavier.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Pour en savoir plus, consultez l'explication sur les groupes de discussion.

WebSockets compatibles avec le cache Back/Forward (bfcache)

Dans Chrome 149, les pages avec des connexions WebSocket actives peuvent désormais être incluses dans le cache Back/Forward (bfcache).

Auparavant, une connexion WebSocket ouverte rendait une page inéligible au bfcache. Désormais, le navigateur ferme automatiquement les connexions WebSocket actives lors de l'entrée dans le cache bfcache, ce qui permet de mettre en cache la page et de la restaurer instantanément lorsque l'utilisateur y revient.

Timing des réponses intermédiaires et d'en-tête dans Resource Timing

Firefox 152 ajoute la prise en charge de firstInterimResponseStart et finalResponseHeadersStart sur l'interface PerformanceResourceTiming.

Elles peuvent être utilisées pour mesurer le temps nécessaire au navigateur pour recevoir respectivement les réponses HTTP intermédiaires et la réponse HTTP finale après l'envoi d'une requête.

Boutons d'action pour les notifications

Firefox 152 ajoute la prise en charge des boutons d'action de notification à l'aide de la propriété actions sur Notification et des options dans ServiceWorkerRegistration.showNotification().

Vous pouvez désormais inclure des boutons d'action dans les notifications de l'OS et écouter les interactions des utilisateurs lorsqu'ils appuient sur les boutons.

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 Firefox 153 et Safari 27.

La version bêta de Firefox 153 est compatible avec Error.stackTraceLimit pour configurer la profondeur maximale de la trace de pile capturée, IDBObjectStore.getAllRecords() et IDBIndex.getAllRecords() pour récupérer les enregistrements indexés, et RTCDtlsTransport.getRemoteCertificates() pour l'inspection de la sécurité WebRTC. Les développeurs de modules complémentaires bénéficient également d'une nouvelle API publicSuffix et d'une méthode userScripts.execute() pour l'injection de script à la demande.

La version bêta de Safari 27 introduit le positionnement d'ancres tenant compte des transformations, la pseudo-classe :heading pour faire correspondre les éléments d'en-tête, le mot clé revert-rule pour annuler les calques en cascade, la prise en charge du mot clé stretch dans la taille de la boîte et les sélecteurs composés :host:has().