Nouveautés de Chrome 93

Pete LePage

Voici quelques points à retenir :

Je m'appelle Pete LePage, je travaille et je filme depuis chez moi. Voyons ensemble les nouveautés de Chrome 93 pour les développeurs.

Scripts de module CSS

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

La nouvelle fonctionnalité de scripts de module CSS est idéale pour les éléments personnalisés. Contrairement à d'autres méthodes d'application de CSS à partir de JavaScript, il n'est pas nécessaire de créer des é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 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 endroits ou sur des écrans spécifiques est une fonctionnalité importante. Par exemple, lorsque j'utilise Slides pour une présentation, je souhaite que les diapositives s'affichent en plein écran sur l'écran principal et que mes commentaires du présentateur 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 son deuxième essai Origin Trial, et 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 associé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 débranché.

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 Managing several displays with the Multi-Screen Window Placement API (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 proposer une nouvelle version de Chrome toutes les quatre semaines.

Ce moment est arrivé, et nous lancerons Chrome 94 le 21 septembre. Vous trouverez les dates de sortie prévues pour chaque version dans le calendrier Chrome.

Nouvelles fonctionnalités des PWA

Si vous créez une progressive web app, deux nouveaux essais Origin Trial méritent d'être examinés.

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 du navigateur.

En spécifiant url_handlers dans le fichier manifeste de votre 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, elle 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/*"]
      }
    }
  ]
}

Et avec un peu de validation supplémentaire, vous pouvez même faire en sorte que votre PWA gère les liens d'autres origines que vous possédez.

Pour en savoir plus sur l'essai Origin Trial, consultez PWAs as URL Handlers (Les 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 client pour couvrir l'intégralité de la fenêtre, y compris la barre de titre et les boutons de commande de la fenêtre, tels que les boutons de fermeture, d'agrandissement 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 l'essai Origin Trial, consultez Personnaliser la superposition des commandes de fenêtre de la barre de titre de votre PWA.

PWA Summit

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 différentes entreprises impliquées dans la création de technologies de PWA : Google, Intel, Microsoft et Samsung.

Il y a une tonne de conférences et de contenus intéressants. Pour en savoir plus et vous inscrire, rendez-vous sur PWASummit.org.

Et bien plus !

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

  • Les éléments Flexbox et Flexbox sont désormais compatibles avec les mots clés d'alignement suivants : start, end, self-start, self-end, left et right.
  • L'API asynchrone du presse-papiers est désormais compatible avec les fichiers SVG.
  • De plus, l'attribut media sera respecté lors de la définition de meta theme-color. Vous pourrez ainsi 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 rester informé, abonnez-vous à la 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, dès que Chrome 94 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.