Nouveautés de Chrome 85

Pete LePage

Chrome 85 est en cours de déploiement dans la version stable.

Voici quelques points à retenir :

Je m'appelle Pete LePage. Je travaille et tourne des vidéos depuis chez moi. Découvrons ensemble les nouveautés de Chrome 85 pour les développeurs !

Visibilité du contenu

Processus de rendu des navigateurs

Pour que l'utilisateur puisse voir votre code HTML, le navigateur doit effectuer plusieurs étapes avant de pouvoir afficher le premier pixel. 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.

L'application de 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 permet un rendu initial plus rapide.


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

Pour tirer le meilleur parti de content-visibility, appliquez-le aux sections parentes avec des algorithmes de mise en page plus complexes, comme flexbox et grid, ou qui ont des enfants avec leurs propres mises en page contenues.

En segmentant le contenu et en ajoutant content-visibility: auto;, le temps de rendu de cette page est passé de 232 ms à seulement 30 ms.

Consultez la visibilité du contenu pour découvrir comment l'utiliser afin d'améliorer les performances de rendu.

@property et variables CSS

Les variables CSS, techniquement appelées propriétés personnalisées, sont géniales. L'API Houdini CSS Properties and Values vous permet de définir un type et une valeur de secours par défaut pour vos propriétés personnalisées. Je les ai déjà abordés dans Nouveautés de Chrome 78, lorsque 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'aime dans les propriétés CSS, c'est qu'elles donnent à la propriété une signification sémantique, des valeurs de remplacement et permettent même de tester le CSS.

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

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

Obtenir les applications associées installées

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

Par exemple, affichez 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 faites pas la promotion de l'installation de votre PWA.

Lors de son lancement dans Chrome 80, elle ne fonctionnait que pour les applications Android. Sur Android, il peut désormais également vérifier si votre PWA est installée. Et sur Windows, il peut vérifier si votre application UWP Windows 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 en dit plus ! sur web.dev pour découvrir comment cela fonctionne et comment signer vos applications pour prouver qu'elles vous appartiennent.

Raccourcis d'icône d'application

Raccourci de l'icône d'application sur Windows

Dans Chrome 84, nous avons ajouté la compatibilité avec les raccourcis d'icônes d'application. J'ai dit par erreur qu'elles étaient disponibles partout, mais elles ne l'étaient que sur Android. Désormais, dans Chrome 85, elles sont disponibles 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" }
    ]
  }
]

Consultez l'article Raccourcis d'icônes d'application sur web.dev pour en savoir plus. Je suis désolé pour la confusion que j'ai pu occasionner.

Test d'origine : requêtes de streaming avec fetch()

À partir de Chrome 85, le streaming d'importation fetch est disponible en version d'essai d'origine. Il vous permet de lancer une récupération avant que le corps de la requête ne soit prêt. Auparavant, vous ne pouviez envoyer une demande qu'une fois le corps du message entièrement rédigé. Désormais, vous pouvez commencer à envoyer du contenu, même s'il est encore en cours de génération.

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

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

Par exemple, utilisez-le pour réchauffer le serveur ou diffuser de l'audio ou de la vidéo à mesure qu'ils sont capturés par le micro ou la caméra.

Jake a examiné en détail les requêtes de streaming avec l'API Fetch sur web.dev et en a également parlé dans la dernière vidéo HTTP203 : requêtes de streaming avec Fetch.

Et plus encore

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

Promise.any renvoie une promesse qui est tenue par la première promesse donnée à tenir ou à rejeter.

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

Remplacer toutes les instances d'une chaîne est plus facile avec .replaceAll(). Plus besoin 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 ajoute la prise en charge du décodage AVIF, un format d'image encodé avec AV1 et normalisé par l'Alliance for Open Media. AVIF offre des gains de compression importants par rapport à JPEG et WebP. Une étude Netflix récente montre des économies de 50% par rapport au format JPEG standard et de plus de 60% pour le contenu 4:4:4.

La suppression d'AppCache a commencé.

Documentation complémentaire

Il ne s'agit que de quelques-uns des principaux points à retenir. Consultez les liens ci-dessous pour découvrir les autres modifications apportées à Chrome 85.

S'abonner

Si vous souhaitez rester informé de nos vidéos, abonnez-vous à notre chaîne YouTube Chrome Developers. Vous recevrez une notification par e-mail chaque fois que nous publierons une nouvelle vidéo.

Je m'appelle Pete LePage et je me suis enfin fait couper les cheveux !

Dès que Chrome 86 sera disponible, je vous en informerai et vous présenterai les nouveautés de Chrome.