Nouveautés de Chrome 129

Pete LePage

Voici les informations à retenir :

Je m'appelle Pete LePage. Voyons ce que Chrome 129 réserve aux développeurs.

Décomposer les tâches longues avec scheduler.yield()

Les tâches longues retardent la capacité du navigateur à répondre aux entrées utilisateur, ce qui donne l'impression que le site est lent et a un impact sur les métriques de performances critiques telles que l'INP. Avec scheduler.yield(), vous pouvez décomposer de longues tâches en fragments plus petits, ce qui améliore la réactivité en restituant explicitement le thread principal.

Il vous permet d'indiquer au navigateur:

"HEY ! La tâche que je vais accomplir peut prendre un certain temps. Si vous devez peindre un cadre, répondre à une requête utilisateur ou effectuer d'autres tâches importantes, ce n'est pas grave, je peux attendre."

Représentation de la façon dont la division d'une tâche peut faciliter une interaction utilisateur. En haut, une tâche longue empêche l'exécution d'un gestionnaire d'événements jusqu'à ce qu'elle soit terminée. En bas, la tâche segmentée permet au gestionnaire d'événements de s'exécuter plus tôt qu'il ne l'aurait fait autrement.

Ajoutez fréquemment la ligne suivante dans votre code JavaScript pour laisser le navigateur respirer et éviter les problèmes INP.

await scheduler.yield();

Il est important de noter que cela permet de donner la priorité à la continuité de votre code afin que vous ne perdiez pas de temps en cédant. Nous vous recommandons d'utiliser scheduler.yield() de manière abondante dans les fonctions entre des blocs de travail plus importants.

Pour en savoir plus, consultez Optimiser les longues tâches.

Animations avec des tailles intrinsèques

Les animations CSS sont très pratiques, mais nécessitent généralement des tailles explicites. Vous ne pouvez pas utiliser les mots clés de dimensionnement intrinsèques tels que auto, min-content ou fit-content.

La propriété CSS interpolate-size ouvre un nouvel ensemble d'animations qui n'étaient pas possibles lorsque vous utilisiez des mots clés de dimensionnement intrinsiques.

Sans interpolate-size, les boutons de la vidéo suivante n'ont aucune transition.

Après avoir ajouté interpolate-size: allow-keywords, les boutons de la vidéo bénéficient d'un bel effet d'animation de transition.

La spécification de interpolate-size: allow-keywords sur l'élément root définit le nouveau comportement pour l'ensemble de la page. Nous vous recommandons de le faire chaque fois que la compatibilité n'est pas un problème.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Pour un contrôle plus précis, la fonction CSS calc-size(), semblable à calc(), accepte également les opérations sur exactement un des mots clés de dimensionnement intrinsèque compatibles. Lorsque vous effectuez des calculs de mise en page, le mot clé size correspond à la taille d'origine de calc-size-basis.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Pour en savoir plus, consultez Animate to height: auto; (et d'autres mots clés de dimensionnement intrinsèques) dans CSS.

Modifications apportées au positionnement de l'ancrage CSS

Le positionnement des ancres CSS est disponible dans Chrome 125, mais après quelques discussions supplémentaires au sein du groupe de travail CSS, la spécification et l'implémentation ont été modifiées. Si vous utilisez déjà la position d'ancrage CSS, vous devez mettre à jour votre code dès que possible.

Tout d'abord, inset-area a été renommé position-area. Cette option a été préférée, car la formulation position- vous rappelle que cette propriété s'applique à l'élément positionné, et non à l'élément d'ancrage.

Deuxièmement, position-try-options est renommé position-try-fallbacks. Cela vous rappelle qu'il ne s'agit que de solutions de remplacement de la position principale, qui est déterminée par les styles de base.

Enfin, la syntaxe fonctionnelle inset-area() est supprimée de position-try. Par conséquent, utilisez position-try-fallbacks: top au lieu de position-try-fallbacks: inset-area(top).

Et bien plus !

Bien sûr, il y a bien d'autres choses.

Une nouvelle méthode Intl permet de mettre en forme les durées, avec la prise en charge de plusieurs paramètres régionaux.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Le canevas de GPU Web peut désormais utiliser toute la plage de l'écran pour les images HDR.

Par ailleurs, quelques abandons et suppressions peuvent avoir un impact sur certains développeurs.

Consultez les notes de version complètes.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens suivants pour découvrir d'autres modifications apportées à Chrome 129.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je suis Pete LePage et je remplace Adriana. Dès que Chrome 130 sera disponible, nous vous présenterons les nouveautés de Chrome.