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 à l'aide de la nouvelle fonction light-dark().
Analysez la réactivité de votre site avec l'API Long Animation Frames.
Évitez les problèmes de performances au démarrage des service workers avec l'API Service Worker Static Routing.
Et ce n'est pas tout !

Je m'appelle Adriana Jara. Entrons dans le vif du sujet et découvrons les nouveautés de Chrome 123 pour les développeurs.

Fonction CSS `light-dark()`.

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

Le navigateur choisit automatiquement la couleur appropriée en fonction de la valeur color-scheme calculée pour 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 peut vous aider à identifier les causes de l'encombrement du thread principal, souvent à l'origine d'un INP (Interaction to Next Paint) incorrect, un élément 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 des scripts de longue durée, et le temps consacré à l'application forcée d'une mise en page et d'un style, appelée 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 de longues images à l'aide du 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 worker.

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

Cependant, le chargement d'une page pour la première fois peut avoir un impact sur les performances et pour que le service worker de contrôle ne s'exécute pas à 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 Service Worker Static Routing, vous pouvez déclarer, au moment de l'installation, des chemins d'accès qui doivent toujours être diffusés à partir du réseau. Lorsqu'une URL contrôlée est chargée par la suite, le navigateur peut commencer à récupérer les ressources de ces chemins avant que le service worker ait fini de démarrer. Cette opération supprime le service worker des URL dont vous savez qu'il n'en a pas besoin.

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

Et bien plus !

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

L'interface NavigationActivation vous permet de proposer des pages personnalisées en fonction de l'emplacement de destination de l'utilisateur.
Chrome est désormais compatible avec Zstandard (zstd). Cette Content-Encoding permet de charger les pages plus rapidement et d'utiliser moins de bande passante, tout en utilisant moins de temps, d'utilisation du processeur et d'énergie sur la compression des serveurs, ce qui se traduit par une réduction des coûts liés aux serveurs.
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 des raisons expliquant pourquoi le cache 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

Cela ne couvre que certains points clés. Consultez les liens suivants pour modifications supplémentaires dans Chrome 123.

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

Bonjour Adriana Jara. Dès la sortie de Chrome 124, je serai là pour vous présenter les nouveautés de Chrome.