Nouveautés de Chrome 93

Pete LePage

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 93 pour les développeurs.

Scénarios de module CSS

Vous pouvez désormais charger des feuilles de style CSS avec des instructions import, comme pour les modules JavaScript. Les feuilles de style peuvent ensuite être appliquées au document ou aux racines d'ombre de la même manière que les feuilles de style construesibles.

La nouvelle fonctionnalité de scripts de module CSS est idéale pour les éléments personnalisés. Contrairement aux autres méthodes d'application du CSS à partir de JavaScript, il n'est pas nécessaire de créer d'éléments ni de manipuler des chaînes JavaScript de texte CSS.

Pour l'utiliser, importez la feuille de style avec assert {type: 'css'}, puis appliquez-la à document ou shadowRoot en appelant adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Mais attention, si vous omettez assert, le fichier sera traité comme du code JavaScript et ne fonctionnera pas.

Pour en savoir plus, consultez Utiliser des scripts de module CSS pour importer des feuilles de style sur web.dev.

API Multi-Screen Window Placement

Pour certaines applications, l'ouverture de nouvelles fenêtres et leur placement à des emplacements ou à des écrans spécifiques est une fonctionnalité importante. Par exemple, lorsque j'utilise Slides pour présenter un contenu, je souhaite que les diapositives s'affichent en plein écran sur l'écran principal et que mes notes s'affichent sur l'autre écran.

L'API Multi-Screen Window Placement permet d'énumérer les écrans connectés à l'ordinateur de l'utilisateur et de placer des fenêtres sur des écrans spécifiques. Il s'agit de la deuxième phase de test de cette fonctionnalité. Nous avons apporté un certain nombre de modifications en fonction de vos commentaires.

Vous pouvez vérifier rapidement si plusieurs écrans sont connectés à l'appareil:

const isExtended = window.screen.isExtended;
// returns true/false

Toutefois, la fonctionnalité clé se trouve dans window.getScreens(), qui fournit tous les détails sur les écrans connectés.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Par exemple, vous pouvez déterminer l'écran principal, puis utiliser requestFullscreen() pour afficher un élément sur cet écran.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Il permet également d'écouter les modifications, par exemple si un nouvel écran est branché ou supprimé.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Pour en savoir plus, consultez l'article de Tom Gérer plusieurs écrans avec l'API Multi-Screen Window Placement sur web.dev.

Cycle de publication raccourci

En mars, nous avons annoncé notre intention de raccourcir le cycle de publication et de publier une nouvelle version de Chrome toutes les quatre semaines.

Le moment est venu, et nous allons publier Chrome 94 le 21 septembre. Vous trouverez les dates de sortie prévues pour chaque version dans le calendrier Chrome.

Nouvelles fonctionnalités des applications Web progressives

Si vous développez une progressive web app, deux nouveaux essais d'origine sont à découvrir.

Gestionnaires d'URL pour les PWA

Si vous avez installé une PWA et que vous cliquez sur un lien vers cette PWA, vous souhaitez probablement qu'elle s'ouvre dans la PWA, et non dans un onglet de navigateur.

En spécifiant url_handlers dans votre fichier manifeste d'application Web et en ajoutant un fichier web-app-origin-association à votre répertoire .well-known/, vous pouvez indiquer au navigateur que si un utilisateur clique sur un lien vers votre PWA, il doit s'ouvrir dans la PWA installée.

Exemple de url_handlers dans le fichier manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Exemple de fichier web-app-origin-association :

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Avec un peu de validation supplémentaire, vous pouvez même demander à votre PWA de gérer les liens provenant d'autres origines que vous possédez.

Tous les détails sur la phase d'évaluation de l'origine sont disponibles dans la section PWA en tant que gestionnaires d'URL sur web.dev.

Superposition des commandes de fenêtre

La superposition des commandes de fenêtre étend la zone cliente pour couvrir l'ensemble de la fenêtre, y compris la barre de titre et les boutons de commande de fenêtre, tels que les boutons de fermeture, de maximisation et de réduction.

Vous pouvez utiliser cette fonctionnalité pour que votre PWA installée ressemble davantage aux autres applications installées.

Pour en savoir plus sur le test de l'origine, consultez Personnaliser la superposition des commandes de fenêtre de la barre de titre de votre PWA.

Sommet PWA

Le PWA Summit aura lieu en octobre. Il s'agit d'une conférence en ligne sans frais qui vise à aider tout le monde à réussir avec les progressive web apps. Le PWA Summit est une collaboration entre des personnes issues de plusieurs entreprises différentes impliquées dans la création de technologies PWA: Google, Intel, Microsoft et Samsung.

Il y a de nombreuses conférences et de nombreux contenus de qualité. Pour en savoir plus et vous inscrire, consultez PWASummit.org.

Et bien plus !

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

  • Les éléments flexbox et flexbox sont compatibles avec les mots clés d'alignement suivants : start, end, self-start, self-end, left et right.
  • L'API du presse-papiers asynchrone est désormais compatible avec les fichiers SVG.
  • De plus, l'attribut media sera respecté lors de la configuration de meta theme-color. Vous pouvez donc spécifier différentes couleurs de thème pour les modes clair et sombre.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

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 93.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des 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. Dès la sortie de Chrome 94, je serai là pour vous présenter les nouveautés de Chrome.