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.

Points forts de cette version:

Utilisez reading-flow et reading-order pour assurer un ordre logique des onglets dans les mises en page complexes. La fonction CSS if() permet d'exprimer des valeurs conditionnelles de manière concise. L'intégration des promesses JavaScript (JSPI) 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 flex, grid ou bloc sont exposés aux outils d'accessibilité et la façon dont ils sont mis au point à 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 en flex, où l'ordre des onglets peut ne pas correspondre à l'ordre de mise en page des éléments.

Il prend une valeur de mot clé, avec la valeur par défaut normal, qui conserve le comportement d'ordonnancement 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 parcours de lecture. Pour utiliser cette propriété dans un conteneur de grille, de flex ou de bloc, définissez la valeur reading-flow du conteneur sur source-order et définissez la valeur reading-order de l'élément individuel sur un entier.

Pour en savoir plus, consultez Utiliser reading-flow CSS pour la navigation séquentielle logique de la sélection.

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 vraie. Si aucune des conditions n'est évaluée comme vraie, 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 de la promesse 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 d'une promesse et d'interagir avec les API porteuses de promesses.

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

Et bien plus !

Bien sûr, il y a bien d'autres avantages:

  • 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 pixel à virgule flottante du canevas sont désormais implémentés.
  • offset-path: shape() est compatible. Vous pouvez donc utiliser des formes responsives pour définir le chemin d'animation.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens suivants pour en savoir plus sur les modifications apportées à Chrome 137.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons 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.