Nouveautés de Chrome 123

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Découvrons ensemble les nouveautés pour les développeurs dans Chrome 123.

Fonction CSS light-dark().

La fonction light-dark() en CSS vous permet de créer des couleurs qui s'adaptent aux préférences d'un 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 est disponible pour vous aider à identifier les causes de la congestion du thread principal, qui est souvent à l'origine d'un INP (Interaction to Next Paint), 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 tâches bloquantes. Elle 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 de rendu et le temps consacré à la mise en page et au style forcés, ce que l'on appelle le thrashing de la 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 Service Worker Static Routing.

Grâce aux service workers, vous pouvez faire fonctionner les sites Web hors connexion et élaborer des stratégies de mise en cache susceptibles d'améliorer les performances.

Toutefois, cela peut avoir un impact sur les performances lorsqu'une page se charge pour la première fois dans un certain temps et que le service worker de contrôle n'est pas en cours d'exécution à ce moment-là. Étant donné que toutes les extractions doivent avoir lieu via le service worker, le navigateur doit attendre que le service worker démarre et s'exécute pour savoir quel contenu charger.

Avec l'API Service Worker Static Routing, vous pouvez, lors de l'installation, déclarer les chemins à desservir systématiquement à partir du réseau. Lors du chargement ultérieur d'une URL contrôlée, 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'a pas besoin d'un service worker.

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

Et bien plus !

Bien sûr, ce n’est pas tout.

  • Vous pouvez proposer des pages personnalisées en fonction de l'endroit où l'utilisateur a accédé avec l'interface NavigationActivation.

  • Chrome est désormais compatible avec Zstandard (zstd). Cette Content-Encoding accélère le chargement des pages et utilise moins de bande passante, et consomme moins de temps, d'utilisation du processeur et d'énergie sur les serveurs, ce qui permet de réduire les coûts liés aux serveurs.

  • L'API notRestoredReasons pour le cache amélioré est en cours de déploiement à partir de Chrome 123. Les propriétaires de sites peuvent ainsi recueillir sur le terrain les raisons pour lesquelles le cache amélioré n'a pas pu être utilisé. Les propriétaires de sites peuvent utiliser cette fonctionnalité 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;
  }
}

Complément d'informations

Nous n'aborderons ici que certains points clés. Consultez les liens suivants pour obtenir des modifications supplémentaires dans Chrome 123.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Adriana Jara, soja, et dès la sortie de Chrome 124, je serai là pour vous faire part des nouveautés de Chrome !