Version bêta de Chrome 150

Rachel Andrew

Publié le 3 juin 2026

Sauf indication contraire, les modifications suivantes s'appliquent à la dernière version bêta de Chrome pour Android, ChromeOS, Linux, macOS et Windows. Pour en savoir plus sur les fonctionnalités listées ici, cliquez sur les liens fournis ou consultez la liste sur ChromeStatus.com. Chrome est en version bêta depuis le 2 juin 2026. Vous pouvez télécharger la dernière version sur Google.com pour ordinateur ou sur le Google Play Store sur Android.

CSS et interface utilisateur

Couleurs système AccentColor et AccentColorText

Les couleurs système AccentColor et AccentColorText peuvent être utilisées en CSS pour accéder à la couleur d'accentuation du système spécifiée sur l'appareil de l'utilisateur. Cette fonctionnalité permet aux développeurs d'appliquer un style semblable à celui d'une application à leur contenu Web dans les contextes où les utilisateurs s'attendent à une intégration du thème du système d'exploitation, par exemple dans une application Web installée. Les utilisateurs doivent se trouver dans une application Web installée sur le profil initial pour voir la couleur d'accentuation du système s'afficher.

Autoriser le paramètre d'arrondi facultatif pour polygon()

Vous permet de spécifier un paramètre d'arrondi d'angle facultatif dans la fonction de forme CSS polygon(). Les développeurs peuvent spécifier une valeur de longueur pour arrondir les angles du polygone sans calculer manuellement les courbes de Bézier.

Zoom animable

La propriété CSS zoom est animable et s'interpole en tant que <number>. Les développeurs peuvent effectuer une transition et animer le zoom pour mettre à l'échelle les éléments et leur mise en page de manière fluide, en complément de la mise à l'échelle existante basée sur la transformation.

Modificateurs de requête d'URL CSS

Les fonctions CSS url() acceptent des modificateurs de requête facultatifs après la chaîne d'URL entre guillemets : cross-origin(), integrity() et referrer-policy(). Ces modificateurs contrôlent le comportement de récupération de la ressource référencée directement à partir du CSS, sans nécessiter de modifications du balisage HTML ni de JavaScript.

Par exemple, background-image: url("image.png" cross-origin(anonymous)) récupère l'image en mode anonyme CORS.

Propriété CSS text-fit

Met à l'échelle la taille de police des nœuds de texte pour qu'elle s'adapte parfaitement à la largeur de leur zone de contenu.

Cette propriété permet aux développeurs de s'assurer que les titres ou le contenu dynamique remplissent l'espace horizontal disponible sans avoir à calculer manuellement la taille de police ni à utiliser des solutions de contournement JavaScript complexes. Cette propriété fournit une solution robuste et native en CSS pour une typographie adaptative qui maintient l'alignement visuel sur différentes tailles d'écran et différentes longueurs de texte.

CSS background-clip: border-area

Implémente la valeur border-area pour la propriété CSS background-clip, comme défini dans CSS Backgrounds Level 4. La valeur background-clip découpe l'arrière-plan d'un élément dans la zone peinte par ses traits de bordure, en tenant compte de border-width et border-style, tout en ignorant la transparence de border-color. Cette valeur vous permet de créer des bordures de dégradé sans image de bordure.

Fonction CSS image(<color>)

La fonction image() permet aux développeurs de générer une image de couleur unie à partir de n'importe quelle couleur. La syntaxe est la suivante : image() = image( <color> ).

CSS light-dark() avec des valeurs d'image

Étend la fonction CSS light-dark() pour accepter les valeurs d'image, telles que url(), image-set() et none, dans les feuilles de style de l'auteur, ce qui permet aux propriétés d'image telles que background-image, list-style-image, border-image-source, cursor et content de basculer automatiquement entre les images en fonction du jeu de couleurs préféré de l'utilisateur. Auparavant, ce comportement n'était autorisé que dans les feuilles de style de l'agent utilisateur. Cette modification est conforme à la spécification CSS Color 5 et correspond à l'implémentation existante de Firefox.

Cloner dans tous les éléments descendants selectedcontent

Plusieurs petites modifications sont apportées aux cas extrêmes de l'élément selectedcontent :

• Lorsque plusieurs éléments selectedcontent sont placés simultanément dans un élément <select>, ils sont tous mis à jour au lieu du premier dans l'ordre DOM.
• La mise à jour de l'élément selectedcontent est différée lorsqu'elle s'exécute lors des étapes d'insertion, de suppression ou de déplacement pour résoudre les problèmes de sécurité. La mise à jour est différée à l'aide d'étapes post-insertion ou de microtâches.

Requêtes de conteneur séparées par une virgule

Prend en charge plusieurs requêtes par règle @container. La règle @container s'applique si au moins l'une des requêtes correspond.

Cette fonctionnalité permet, par exemple, d'avoir des requêtes de secours pour les fonctionnalités qui ne sont pas compatibles avec tous les navigateurs.

Exemple :

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

En plus de la prise en charge de plusieurs requêtes, le modèle objet est étendu pour prendre en charge l'attribut conditions sur l'API CSSContainerRule.

Exposer les zones non imprimables au CSS

Les imprimantes ont généralement une petite zone sur chacun des quatre bords d'une feuille de papier qu'elles ne peuvent pas marquer de manière fiable, généralement en raison du mécanisme de gestion du papier de l'imprimante. Les marges de page par défaut doivent être supérieures à ces zones, mais si les auteurs définissent eux-mêmes des marges et souhaitent même ajouter des zones de marge @page, par exemple pour des en-têtes et des pieds de page personnalisés, ils ont besoin d'un moyen de déterminer où il est sûr d'imprimer.

Le descripteur CSS page-margin-safety peut être utilisé pour éviter ces zones non imprimables.

Attribut focusgroup

Permet aux auteurs de fournir de manière déclarative aux widgets composites une navigation par touches fléchées, un arrêt de tabulation garanti et une mémoire du dernier focus, en remplaçant les scripts de tabindex itinérants codés à la main. Exemple :

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

Pseudo-classes d'élément multimédia

Les pseudo-classes CSS :playing, :paused, :seeking, :buffering, :stalled, :muted, et :volume-locked correspondent aux éléments <audio> et <video> en fonction de leur état.

Cette fonctionnalité est l'un des principaux domaines d'intérêt de Interop 2026.

Modifications du comportement popover=hint

Cette modification implémente un modèle d'empilement révisé et simplifié pour l'attribut popover=hint et ses interactions avec popover=auto. Auparavant, les interactions entre ces deux types de pop-up pouvaient être complexes dans certains cas extrêmes, comme l'imbrication de popover=auto dans popover=hint, et pouvaient entraîner un comportement inattendu. Dans le nouveau modèle, l'ouverture d'un popover=hint ne ferme plus involontairement les éléments popover=auto non liés. Les pop-up d'aide ne sont masquées que lorsque leur popover=auto ancêtre est masqué ou lorsqu'un nouveau popover=auto non lié est ouvert. De plus, les développeurs peuvent imbriquer en toute sécurité un pop-up automatique dans un pop-up d'aide. Au lieu de générer une exception ou d'interrompre la pile, le popover=auto imbriqué est rétrogradé et se comporte comme un popover=hint. Cette fonctionnalité permet aux développeurs de placer un <select> personnalisable dans un popover=hint.

Pour améliorer encore la prévisibilité et éviter les mutations d'état complexes, Chrome renforce également le comportement d'ouverture et de fermeture des pop-up à partir de l'événement beforetoggle. Auparavant, des protections étaient en place pour certains cas, mais pas pour tous. Cette modification remanie le mécanisme utilisé pour détecter ces cas afin de générer de manière plus fiable des InvalidStateError pour tous ces cas. Cette modification garantit que la gestion de l'état des pop-up reste stable et empêche les bugs de réentrance en boucle.

Ces modifications ont été motivées par des discussions sur les normes avec Mozilla concernant la demande d'extraction de la spécification HTML sur GitHub.

Couleurs alpha relatives

Les couleurs alpha relatives offrent un moyen CSS direct de dériver une version translucide d'une couleur existante sans réécrire ses canaux de couleur. Les développeurs doivent actuellement dupliquer les valeurs des composants ou créer des jetons précalculés distincts lorsqu'ils souhaitent la même couleur avec une opacité différente. La fonction CSS Color 5 alpha() conserve les composants de couleur d'origine et ne modifie que l'alpha, ce qui réduit la surcharge de création et facilite la réutilisation et la maintenance des jetons de couleur.

À taille adaptative <iframe>

Permet aux sites d'activer la taille adaptative des iFrames, ce qui dimensionne l'élément <iframe> dans le document parent en fonction de la taille de dépassement de mise en page du document iframe pour éviter le défilement dans le document enfant.

flex-wrap:balance

flex-wrap:balance permet aux développeurs de répartir le contenu entre les lignes flexibles afin qu'il apparaisse plus équilibré, comme text-wrap:balance.

Fonction named-feature() pour CSS @supports

La fonction named-feature() permet aux règles CSS @supports d'interroger un petit ensemble de fonctionnalités nommées spécifiques qu'il n'est pas possible de tester à l'aide d'autres mécanismes @supports, mais qui sont considérées comme très utiles à tester.

overscroll-behavior: chain

overscroll-behavior comporte trois valeurs : none, auto et contain. Ces valeurs affectent deux effets indépendants : la propagation du défilement et l'effet de bordure local. Par exemple, l'étirement du défilement hors limites.

• none : aucune propagation du défilement, aucun effet de limite locale.
• auto : propagation du défilement, effets de limite locale.
• contain : aucune propagation du défilement, effets de limite locale.

Cette version suit une nouvelle valeur pour compléter l'ensemble : chain : propagation du défilement, aucun effet de limite locale.

Cette valeur est utile pour les effets tels que les menus latéraux implémentés en tant que barres de défilement. Vous pouvez afficher le menu, et lorsqu'il atteint le bord, il ne dépasse pas, ne s'étire pas et ne se traduit pas. Toutefois, le défilement est ensuite enchaîné à l'ancêtre.

API Web

Désactiver les filtres SVG sur les plug-ins et les iFrames inter-origines ou restreints

Chrome 150 empêche l'application de filtres SVG (Scalable Vector Graphics) aux iFrames inter-origines ou restreints (par exemple, ceux en bac à sable) et aux plug-ins intégrés (par exemple, les PDF). Lorsqu'un frame ou un plug-in est peint avec un effet de filtre SVG, l'arborescence des effets est parcourue pour trouver l'ancêtre le plus élevé sans filtres SVG, et cet effet est appliqué à la place.

IndexedDB : backend SQLite

L'implémentation IndexedDB de Chromium est réécrite sur SQLite pour remplacer l'implémentation précédente qui utilise un hybride de LevelDB et de fichiers plats. Cette modification n'affecte pas l'API Web.

Cette réécriture devrait améliorer la fiabilité et, dans une moindre mesure, les performances.

Pour l'instant, cette modification s'applique aux nouveaux magasins de données. Cette modification est l'étape 2 d'une version progressive en plusieurs phases. Consultez la page de fonctionnalité ChromeStatus pour les contextes en mémoire SQLite qui suit l'étape 1.

Compteurs de frames MediaStreamTrackProcessor

Ajoute les attributs discardedFrames et totalFrames à l'interface MediaStreamTrackProcessor. Ces compteurs permettent aux développeurs Web de surveiller l'état de leurs pipelines de traitement multimédia en suivant le nombre de frames reçues et supprimées par le processeur.

Origine opaque pour les URL data:

Chrome 150 modifie la façon dont DedicatedWorker et SharedWorker gèrent data: URL. Au lieu d' hériter automatiquement de l'origine de sécurité du script ou de la page qui les a créés, ces workers se voient attribuer une origine opaque unique.

Cette modification est conforme à la spécification HTML du worker et améliore la sécurité en isolant ces workers de l'état de même origine du créateur, ce qui les empêche d'accéder à des données sensibles via des mécanismes tels que BroadcastChannel ou le stockage de même origine. Pour maintenir des limites d'isolation correctes, ces workers résident toujours dans la même partition de stockage (par exemple, en conservant le site de premier niveau ou le nonce) que leur créateur.

Ce réglage de sécurité est activé par défaut sur les plates-formes de bureau et mobiles. Les administrateurs peuvent examiner ou vérifier les limites de sécurité via leurs configurations centralisées. Pour obtenir des informations techniques sur l'implémentation et des références aux spécifications, consultez l'étape 3 des paramètres du worker HTML Living Standard.

Migration de l'origine des PWA

Lorsqu'un utilisateur installe une progressive web app (PWA), son identité et le contexte de sécurité associé sont étroitement liés à son origine Web, par exemple app.example.com. Cette liaison représente un défi de taille pour les développeurs qui doivent modifier l'origine de leur PWA en raison d'un rebranding, d'une restructuration de domaine ou d'une nouvelle architecture technique. Une telle modification oblige les utilisateurs à désinstaller manuellement l'ancienne application et à réinstaller la nouvelle, ce qui entraîne une expérience perturbatrice et une perte potentielle d'utilisateurs. Chrome 150 introduit un mécanisme permettant aux développeurs de migrer une PWA installée vers une nouvelle origine de même site, en préservant la confiance et les autorisations des utilisateurs.

La règle WebAppInstallForceList bloque la migration. Étant donné que les règles d'entreprise concernant les applications Web sont principalement basées sur les URL et les origines, il existe un risque qu'une migration contourne certaines règles qu'un administrateur a pu configurer. Chrome ne propose pas de migration à l'utilisateur lorsqu'une application est installée de force par l'administrateur de son entreprise, mais affiche une bannière expliquant cela à l'utilisateur.

Analyser les instructions de traitement en HTML

Les instructions de traitement (syntaxe : <?target data>) sont une construction DOM existante, exposée en XML, qui autorise les objets de nœud qui ne sont pas des éléments, mais qui peuvent avoir une signification sémantique pour le traitement d'un document.

Par exemple, vous pouvez les utiliser pour désigner des plages de streaming ou de mise en surbrillance sans nécessiter de nouveaux éléments DOM et sans modifier la structure DOM en ce qui concerne le CSS, ou comme directives pour l'analyseur HTML sur la façon de mettre en mémoire tampon et de diffuser.

Streaming hors séquence

Le streaming hors séquence vous permet d'utiliser <template for> et des plages d'instructions de traitement (<?start> et <?end>) pour diffuser du code HTML dans un ordre non séquentiel et mettre à jour des parties existantes du document sans JavaScript.

Promesses de défilement programmatiques

Cette fonctionnalité fournit un signal fiable pour l'état d'achèvement d'un défilement fluide programmatique. Toutes les méthodes de défilement dans Element et Window renvoient des objets Promise qui sont résolus à la fin du défilement, et la valeur résolue indique si le défilement a été interrompu.

WebGPU Immediates

Ajoute un nouvel espace d'adressage immédiat dans WGSL et une méthode setImmediateData() sur les encodeurs de passe de rendu, de passe de calcul et de bundle de rendu qui permet de transmettre de petites quantités de données fréquemment mises à jour directement aux shaders sans créer d'objets de mémoire tampon GPU ni de groupes de liaison. Cela est particulièrement utile pour les applications qui doivent mettre à jour les paramètres par dessin, tels que les index d'objet, les index de matériau ou les matrices de transformation à chaque appel de dessin, ce qui permet d'améliorer considérablement les performances en évitant la surcharge de gestion des mémoires tampons et des groupes de liaison.

API Web Speech : qualité de la reconnaissance sur l'appareil

Étend l'interface SpeechRecognition en ajoutant une propriété quality à SpeechRecognitionOptions. Cette propriété permet aux développeurs de spécifier la fonctionnalité sémantique requise pour la reconnaissance sur l'appareil à l'aide de processLocally: true.

L'énumération quality proposée comporte trois niveaux (command, dictation et conversation), qui correspondent à une complexité croissante des tâches et à des exigences matérielles. Cette fonctionnalité permet aux développeurs de déterminer si l'appareil local peut gérer des cas d'utilisation à enjeux élevés (comme la transcription de réunions) ou s'ils doivent revenir aux services cloud, ce qui résout la nature opaque des fonctionnalités du modèle sur l'appareil.

Nouvelles versions d'évaluation de l'origine

Dans Chrome 150, vous pouvez participer aux nouvelles versions d'évaluation de l'origine suivantes .

Protocole de validation des adresses e-mail (EVP)

Le protocole de validation des adresses e-mail (EVP) aide les utilisateurs à créer, à accéder et à récupérer des comptes en fournissant une preuve de propriété chiffrée de manière transparente plutôt que des codes secrets à usage unique par e-mail manuellement.

Obsolescence et suppressions

Cette version de Chrome introduit les obsolescences et suppressions suivantes.

Supprimer [LegacyNoInterfaceObject] de l'IDL FontFaceSet

L'IDL FontFaceSet de Chromium utilisait auparavant incorrectement [LegacyNoInterfaceObject], ce qui masquait FontFaceSet en tant que propriété globale et supprimait la propriété du constructeur de son prototype. Ce comportement s'écartait de la spécification CSS Font Loading et différait du comportement de Safari et de Firefox.

Cette suppression supprime [LegacyNoInterfaceObject] de l'IDL FontFaceSet, ce qui rend FontFaceSet correctement accessible en tant que propriété globale. Comme aucun constructor() n'est défini dans l'IDL, l'appel de new FontFaceSet() à partir de JavaScript génère correctement TypeError: Illegal constructor, ce qui correspond au comportement imposé par la spécification.