Nouveautés de Chrome 137

Rachel Andrew

Publié le : 27 mai 2025

Chrome 137 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 137.

Voici les points clés de cette version :

Utilisez reading-flow et reading-order pour assurer un ordre de tabulation logique dans les mises en page complexes. La fonction if() CSS permet d'exprimer des valeurs conditionnelles de manière concise. L'intégration des promesses JavaScript (JSPI, JavaScript Promise Integration) permet aux applications WebAssembly de s'intégrer aux promesses JavaScript.

CSS reading-flow et reading-order

La propriété CSS reading-flow contrôle l'ordre dans lequel les éléments d'une mise en page flexible, en grille ou en bloc sont exposés aux outils d'accessibilité et la façon dont ils sont sélectionnés à l'aide de méthodes de navigation séquentielle linéaire. Cela résout un problème de longue date avec les mises en page en grille et flexibles, où l'ordre de tabulation peut être déconnecté de l'ordre dans lequel les éléments sont disposés.

Il accepte une valeur de mot clé, avec une valeur par défaut de normal, qui conserve le comportement de tri des éléments dans l'ordre DOM. Pour l'utiliser dans un conteneur flex, définissez sa valeur sur flex-visual ou flex-flow. Pour l'utiliser dans un conteneur de grille, définissez sa valeur sur grid-rows, grid-columns ou grid-order.

La propriété CSS reading-order vous permet de remplacer manuellement l'ordre des éléments dans un conteneur de flux de lecture. Pour utiliser cette propriété dans un conteneur de grille, flex ou bloc, définissez la valeur reading-flow sur source-order et la valeur reading-order de chaque élément sur un nombre entier.

Pour en savoir plus, consultez Utiliser le CSS reading-flow pour une navigation logique et séquentielle au clavier.

Fonction CSS if()

La fonction CSS if() permet d'exprimer des valeurs conditionnelles de manière concise. Il accepte une série de paires condition-valeur, délimitées par des points-virgules. La fonction évalue chaque condition de manière séquentielle et renvoie la valeur associée à la première condition "true". Si aucune des conditions n'est remplie, la fonction renvoie un flux de jetons vide.

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

Intégration des promesses JavaScript WebAssembly (JSPI)

L'intégration des promesses JavaScript (JSPI) est une API qui permet aux applications WebAssembly de s'intégrer aux promesses JavaScript.

Il permet à un programme WebAssembly d'agir en tant que générateur de promesse et d'interagir avec les API contenant des promesses.

En particulier, lorsqu'une application utilise JSPI pour appeler une API (JavaScript) porteuse de promesse, le code WebAssembly est suspendu. L'appelant d'origine du programme WebAssembly reçoit une promesse qui sera tenue lorsque le programme WebAssembly sera enfin terminé.

Et bien plus !

Bien sûr, il y a beaucoup d'autres choses :

  • Dans le cadre de la proposition Storage Partitioning, Chrome a implémenté le partitionnement de l'accès aux URL blob par clé de stockage.
  • Les formats de pixels à virgule flottante Canvas sont désormais implémentés.
  • offset-path: shape() est compatible, ce qui vous permet d'utiliser des formes responsives pour définir le chemin d'animation.

Documentation complémentaire

Cette liste ne couvre que quelques points essentiels. Consultez les liens suivants pour découvrir les autres modifications apportées à Chrome 137.

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 138 sera disponible, nous vous présenterons les nouveautés de Chrome.