Voici les informations à retenir :
- Vous pouvez générer des tâches longues pour améliorer les performances.
- Animez des éléments avec des tailles intrinsèques.
- Des modifications ont été apportées à la syntaxe du positionnement des ancres.
- Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.
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."
Ajoutez fréquemment la ligne suivante dans votre code JavaScript pour laisser le navigateur respirer et éviter les problèmes INP.
await scheduler.yield();
Plus important encore, il permet de donner la priorité à la poursuite de votre code afin que vous ne perdiez pas de temps en renonçant. 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 la section Optimiser les tâches longues.
Animations avec des tailles intrinsèques
Les animations CSS sont très pratiques, mais elles nécessitent généralement des tailles explicites. Vous ne pouvez pas utiliser les mots clés de dimensionnement intrinsèque 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 avec les mots clés de dimensionnement intrinsèque.
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.
Spécifier 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. Lors 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; (and other intrinsic sizing keywords) in CSS (Animer vers "height: auto" (et d'autres mots clés de dimensionnement intrinsèque) en CSS).
Modifications apportées au positionnement des ancres CSS
Le positionnement des ancres CSS a été implémenté 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 Web GPU peut désormais utiliser toute la plage de l'écran pour les images HDR.
De plus, certaines fonctionnalités seront abandonnées et d'autres supprimées, ce qui pourra 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.
- Nouveautés des outils pour les développeurs Chrome (129)
- Mises à jour de ChromeStatus.com pour Chrome 129
- Liste des modifications apportées au dépôt source Chromium
- Calendrier des versions de Chrome
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.
Je suis Pete LePage et je remplace Adriana. Dès que Chrome 130 sera disponible, nous vous présenterons les nouveautés de Chrome.