Nouveautés de Chrome 85

Pete LePage

Le déploiement de Chrome 85 en version stable commence maintenant.

Voici les informations à retenir :

Je m'appelle Pete LePage. Je travaille et je filme depuis chez moi. Plongeons-nous dans le vif du sujet et découvrons les nouveautés pour les développeurs dans Chrome 85.

Visibilité du contenu

Processus d'affichage des navigateurs

Pour que votre code HTML soit visible par l'utilisateur, le navigateur doit suivre un certain nombre d'étapes avant de pouvoir peindre le premier pixel. De plus, il le fait pour l'ensemble de la page, même pour le contenu qui n'est pas visible dans la fenêtre d'affichage.

Appliquer content-visibility: auto à un élément indique au navigateur qu'il peut ignorer le rendu de cet élément jusqu'à ce qu'il défile dans la fenêtre d'affichage, ce qui accélère le rendu initial.


.my-class {
  content-visibility: auto;
}

Pour tirer le meilleur parti de content-visibility, appliquez-le aux sections parentes utilisant des algorithmes de mise en page plus complexes, tels que flexbox et grid, ou aux sections dont les enfants disposent de mises en page autonomes.

En segmentant le contenu et en ajoutant content-visibility: auto;, cette page est passée d'un délai d'affichage de 232 ms à 30 ms seulement.

Consultez la visibilité du contenu pour découvrir comment l'utiliser afin d'améliorer vos performances d'affichage.

Variables @property et CSS

Les variables CSS, techniquement appelées "propriétés personnalisées", sont géniales. Avec l'API Houdini CSS Properties and Values, vous pouvez définir un type et une valeur de remplacement par défaut pour vos propriétés personnalisées. Je les ai précédemment présentées dans la section Nouveautés de Chrome 78, où nous avons ajouté la possibilité de les définir en JavaScript.

À partir de Chrome 85, vous pouvez également définir et définir des propriétés CSS directement dans votre CSS. Ce que j'apprécie dans les propriétés CSS, c'est qu'elles donnent la signification sémantique des propriétés, des valeurs de remplacement et même qu'elles permettent de tester les CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una a un excellent article @property: donner des superpouvoirs aux variables CSS qui vous montre comment les utiliser.

Télécharger les applications associées

L'API getInstalledRelatedApps() vous permet de vérifier si votre application est installée, puis de personnaliser l'expérience utilisateur.

Par exemple, vous pouvez présenter un contenu différent à l'utilisateur sur une page de destination si votre application est déjà installée. Centralisez les fonctionnalités qui se chevauchent dans une seule application pour éviter toute confusion. Si votre application native est déjà installée, ne promouvez pas l'installation de votre PWA.

À son lancement dans Chrome 80, elle ne fonctionnait que pour les applications Android. Désormais, sur Android, il peut également vérifier si votre PWA est installée. Et sous Windows, il peut vérifier si votre application Windows UWP est installée.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Consultez mon article Votre application est-elle installée ? getInstalledRelatedApps() vous dira ! sur web.dev pour découvrir son fonctionnement et comment signer vos applications pour prouver qu'elles vous appartiennent.

Raccourcis de l'icône de l'application

Raccourci vers l'icône de l'application sous Windows

Dans Chrome 84, nous avons ajouté la compatibilité avec les raccourcis d'icône d'application. J'ai dit par erreur qu'ils étaient disponibles partout, mais qu'ils ne l'étaient que sur Android. Elles sont désormais disponibles dans Chrome 85 sur Android et Windows, ainsi que dans Chrome et Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Pour en savoir plus, consultez l'article sur les raccourcis d'icône d'application sur web.dev. Nous vous prions de nous excuser pour la confusion occasionnée.

Phase d'évaluation: requêtes de streaming avec fetch()

À partir de Chrome 85, le streaming d'importation fetch est disponible en phase d'évaluation. Elle vous permet de lancer une extraction avant que le corps de la requête ne soit prêt. Auparavant, vous ne pouviez lancer une requête qu'une fois que l'ensemble du corps était prêt à l'emploi. Toutefois, vous pouvez désormais commencer à envoyer du contenu, même si vous êtes toujours en train de le générer.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Vous pouvez par exemple l'utiliser pour chauffer le serveur, ou pour diffuser des contenus audio ou vidéo à partir du micro ou de la caméra.

Jake examine en détail les requêtes en streaming à l'aide de l'API fetch sur web.dev et l'a abordée dans sa dernière vidéo HTTP203 - Requêtes en streaming avec extraction.

Et plus encore

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

Promise.any renvoie une promesse qui est remplie par la première promesse donnée à exécuter ou à refuser.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Le remplacement de toutes les instances d'une chaîne est plus facile avec .replaceAll() : il n'y a plus d'expressions régulières.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 prend en charge le décodage pour AVIF, un format d'image encodé avec AV1 et standardisé par Alliance for Open Media. AVIF offre des gains de compression importants par rapport à JPEG et WebP. Une récente étude Netflix montre des économies de 50% par rapport au format JPEG standard, et plus de 60% d'économies sur le contenu 4:4:4.

La suppression d'AppCache a commencé.

Complément d'informations

Nous n'abordons ici que certains des points forts. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 85.

S'abonner

Pour suivre l'actualité de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome afin de recevoir une notification par e-mail chaque fois qu'une nouvelle vidéo est mise en ligne.

Je m'appelle Pete LePage, et je me suis enfin coupé les cheveux !

Je vous informerai des nouveautés de Chrome dès la sortie de Chrome 86.