Nouveautés de Chrome 85

Pete LePage

Chrome 85 commence à être déployé dans la version stable.

Voici les informations à retenir :

Je m'appelle Pete LePage. Je travaille et filme depuis chez moi. Je vais vous présenter les nouveautés de Chrome 85 pour les développeurs.

Visibilité du contenu

Le processus de rendu des navigateurs

Pour que le navigateur puisse transformer votre code HTML en quelque chose que l'utilisateur peut voir, il doit suivre un certain nombre d'étapes avant même de pouvoir peindre le premier pixel. Et ce 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 travail de rendu de cet élément jusqu'à ce qu'il défile dans le viewport, 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 avec des algorithmes de mise en page plus complexes, comme flexbox et grid, ou qui ont des enfants avec des mises en page propres.

En fractionnant 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 pour améliorer vos performances de rendu.

@property et variables CSS

Les variables CSS, appelées techniquement "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. J'en ai déjà parlé 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 même permettent de tester le CSS.

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

Una a écrit un excellent article sur les @property: donner des super-pouvoirs aux variables CSS qui vous explique 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, n'encouragez pas l'installation de votre PWA.

Lors de son lancement dans Chrome 80, il ne fonctionnait que pour les applications Android. Désormais, sur Android, il peut également vérifier si votre PWA est installée. De plus, sous 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 le dira ! Consultez web.dev pour découvrir comment cela fonctionne et comment signer vos applications pour prouver qu'elles sont les vôtres.

Raccourcis d'icône d'application

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

Dans Chrome 84, nous avons ajouté la prise en charge des raccourcis d'icône 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, ils sont disponibles sur Android et Windows, et 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 Raccourcis d'icône d'application sur web.dev. Je vous prie de m'excuser pour la confusion que j'ai causée.

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

À partir de Chrome 85, le streaming d'importation fetch est disponible en tant que test d'origine. Il vous permet de démarrer une récupération avant que le corps de la requête ne soit prêt. Auparavant, vous ne pouviez démarrer une requête qu'une fois que l'intégralité du corps était prête. Mais maintenant, vous pouvez commencer à envoyer du contenu, même pendant que vous le générez.

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

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

Par exemple, utilisez-la pour préparer le serveur ou diffuser du contenu audio ou vidéo tel qu'il est capturé par le micro ou la caméra.

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

Et bien plus encore

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

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

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 pour 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 aux formats JPEG et WebP. Une étude Netflix récente a montré une économie de 50% par rapport au format JPEG standard et de plus de 60% sur le contenu 4:4:4.

La suppression d'AppCache a commencé.

Documentation complémentaire

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

S'abonner

Si vous souhaitez rester informé de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons 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 présenterai les nouveautés de Chrome.