Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 123

Adriana Jara

Voici les informations à retenir :

Adaptez votre jeu de couleurs avec la nouvelle fonction light-dark().
Analysez la réactivité de votre site avec l'API Long Animation Frames.
Évitez les pénalités de performances au démarrage des service workers avec l'API de routage statique de service workers.
Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.

Je m'appelle Adriana Jara. Voyons ce que Chrome 123 réserve aux développeurs.

Fonction CSS `light-dark()`.

La fonction light-dark() du CSS vous permet de créer des couleurs qui s'adaptent à la préférence de l'utilisateur pour le mode clair ou sombre. Utilisez la fonction light-dark() pour spécifier deux valeurs de couleur différentes dans une même propriété CSS.

Le navigateur choisit automatiquement la couleur appropriée en fonction de la valeur color-scheme calculée de l'élément. Par exemple, avec le CSS suivant:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

Si l'utilisateur a sélectionné un thème clair, l'élément aura un arrière-plan vert citron.
Si l'utilisateur a sélectionné un thème sombre, l'élément aura un fond vert.

API Long Animation Frames

L'API Long Animation Frames vous permet de trouver les causes de la congestion du thread principal, qui est souvent à l'origine d'un mauvais INP (Interaction to Next Paint), une métrique Core Web Vitals qui mesure la réactivité d'un site Web.

La nouvelle API est une version améliorée de l'API Long Tasks, qui permet de mieux comprendre les mises à jour lentes de l'interface utilisateur. L'API Long Animation Frames vous permet de mesurer les blocages. Il mesure les tâches avec la mise à jour de rendu suivante et ajoute des informations telles que les scripts de longue durée, le temps d'affichage et le temps passé à appliquer une mise en page et un style forcés. On parle alors de thrashing de mise en page.

La collecte et l'analyse de ces informations vous permettent d'identifier et de résoudre les goulots d'étranglement qui affectent les performances. Vous pouvez capturer des images longues avec le code suivant.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

API de routage statique de service workers

Les service workers vous permettent de faire fonctionner des sites Web hors connexion et de créer des stratégies de mise en cache qui peuvent améliorer les performances.

Toutefois, un coût en termes de performances peut être associé à la charge d'une page pour la première fois depuis un certain temps, si le service worker de contrôle n'est pas en cours d'exécution à ce moment-là. Étant donné que toutes les extractions doivent être effectuées via le service worker, le navigateur doit attendre que le service worker démarre et s'exécute pour déterminer le contenu à charger.

Avec l'API de routage statique de service workers, au moment de l'installation, vous pouvez déclarer des chemins à toujours diffuser à partir du réseau. Lorsqu'une URL contrôlée est chargée ultérieurement, le navigateur peut commencer à extraire des ressources à partir de ces chemins avant que le service worker n'ait terminé son démarrage. Cela supprime le service worker des URL que vous savez ne pas avoir besoin d'un service worker.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

Et bien plus !

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

Vous pouvez proposer des pages personnalisées en fonction de l'emplacement à partir duquel l'utilisateur a accédé à l'interface NavigationActivation.
Chrome est désormais compatible avec Zstandard (zstd). Ce Content-Encoding permet de charger les pages plus rapidement, d'utiliser moins de bande passante, et de consacrer moins de temps, de processeur et d'énergie à la compression sur les serveurs, ce qui permet de réduire les coûts de serveur.
L'API notRestoredReasons pour bfcache est en cours de déploiement à partir de Chrome 123. Cela permet aux propriétaires de sites de collecter dans le champ les raisons pour lesquelles le bfcache n'a pas pu être utilisé. Les propriétaires de sites peuvent l'utiliser pour améliorer l'utilisation du cache amélioré, ce qui accélère la navigation dans l'historique.
La valeur picture-in-picture pour display-mode vous permet d'écrire des règles CSS spécifiques qui ne s'appliquent que lorsque l'application Web est affichée en mode Picture-in-picture. Exemple :

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

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 123.

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 m'appelle Adriana Jara. Dès que Chrome 124 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.