Nouveautés de Chrome 154

Rachel Andrew

Publié le 22 septembre 2026

Chrome 154 est en cours de déploiement. Cet article présente certaines des principales fonctionnalités de cette version. Consultez les notes de version complètes de Chrome 154.

Voici quelques points essentiels de cette version :

  • Taille responsive <iframe> permet à une <iframe> de se dimensionner en fonction de la taille intrinsèque de son document intégré.
  • Les modes scroll-marker-group CSS ajoutent les modes links et tabs pour configurer l'ordre de mise au point et la sémantique d'accessibilité des repères de défilement.
  • CSS text-decoration-inset vous permet d'ajuster les points de début et de fin des décorations de texte.

<iframe> : taille responsive

Chrome 154 ajoute la prise en charge des iFrames de taille adaptative, ce qui permet à un élément <iframe> d'un document parent de s'adapter à la taille du débordement de la mise en page du document intégré afin d'éviter le défilement dans le document enfant. Cela remplace le modèle dans lequel vous mesurez manuellement le contenu de l'iFrame, envoyez les dimensions avec postMessage() et mettez à jour la taille de l'iFrame sur la page d'intégration.

Pour dimensionner un iFrame en fonction de la hauteur de son contenu, utilisez la propriété CSS frame-sizing sur l'élément <iframe> de la page d'intégration :

.embed {
  width: 100%;
  frame-sizing: content-height;
}

Le document intégré doit également activer la fonctionnalité en incluant un élément <meta name="responsive-embedded-sizing"> dans son <head> :

<meta name="responsive-embedded-sizing" content="allow-origins=*">

Pour en savoir plus et voir des démonstrations, consultez iFrames responsifs dans Chrome 154.

Modes scroll-marker-group des CSS

La propriété scroll-marker-group contrôle si un conteneur de défilement génère un pseudo-élément ::scroll-marker-group avant ou après son contenu. Chrome 154 améliore scroll-marker-group avec deux modes qui définissent l'ordre de sélection et la sémantique d'accessibilité WAI-ARIA de ::scroll-marker-group et ::scroll-marker :

/* Links mode (default) */
scroll-marker-group: after links;

/* Tabs mode */
scroll-marker-group: before tabs;

CSS text-decoration-inset

Par défaut, la décoration de texte d'un élément (comme un soulignement, un surlignement ou un texte barré) a la même longueur que le texte affiché. La propriété CSS text-decoration-inset vous permet d'ajuster les points de début et de fin de la décoration de texte d'un élément afin qu'elle soit insérée, étendue ou décalée par rapport aux bords de la série de texte.

text-decoration-inset accepte les valeurs auto, de longueur et de pourcentage à l'aide d'une syntaxe à une ou deux valeurs. Par exemple, pour insérer les deux extrémités de 10 px :

text-decoration-inset: 10px;

Les valeurs positives insèrent la décoration (en la raccourcissant), tandis que les valeurs négatives la font ressortir (en la rallongeant). Cela vous permet d'ajuster l'espacement des décorations et de créer des effets d'affichage progressif de soulignement animés avec des décorations de texte CSS au lieu de dégradés d'arrière-plan ou d'éléments supplémentaires.

Pour en savoir plus, consultez la documentation text-decoration-inset sur MDN.

Documentation complémentaire

Cette liste ne couvre que quelques points clés. Consultez les liens suivants pour découvrir d'autres modifications apportées à Chrome 154 :

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube Chrome Developers. Vous recevrez une notification par e-mail chaque fois que nous publierons une nouvelle vidéo. Vous pouvez également nous suivre sur X ou LinkedIn pour découvrir nos nouveaux articles et posts de blog.

Dès que Chrome 155 sera disponible, nous vous présenterons les nouveautés de Chrome.