Nouveautés de Chrome 93

Pete LePage

Voici les informations à retenir :

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

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. De plus, contrairement à d'autres façons d'appliquer du code CSS à partir de JavaScript, il n'est pas nécessaire de créer d'éléments ni de manipuler des chaînes de texte JavaScript en JavaScript.

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];

Toutefois, soyez prudent si vous ignorez assert, le fichier sera traité comme JavaScript et ne fonctionnera pas.

Pour plus d'informations, consultez la section Utiliser des scripts de module CSS pour importer des feuilles de style sur web.dev.

API Multi-Screen Window Placement

Pour certaines applications, il est important d'ouvrir de nouvelles fenêtres et de les placer à des endroits spécifiques ou sur des écrans spécifiques. Par exemple, lorsque j'utilise Slides pour une présentation, je veux 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 sa deuxième phase d'évaluation, et nous avons apporté un certain nombre de modifications en tenant compte de vos commentaires.

Pour vérifier rapidement si plusieurs écrans sont connectés à l'appareil, procédez comme suit:

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

Cependant, 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);
}

De plus, il permet d'écouter les modifications, par exemple si un nouvel écran est branché ou retiré.

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 lancer une nouvelle version de Chrome toutes les quatre semaines.

Le moment est venu, et nous expédierons Chrome 94 le 21 septembre. Vous pouvez consulter les dates de lancement prévues pour chaque version dans l'agenda Chrome.

Nouvelles fonctionnalités de PWA

Si vous créez une progressive web app, deux nouvelles phases d'évaluation méritent d'être prises en compte.

Gestionnaires d'URL pour les PWA

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

En spécifiant url_handlers dans le 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, celle-ci 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 vérification supplémentaire, vous pouvez même faire en sorte que votre PWA gère les liens provenant d'autres origines dont vous êtes propriétaire.

Tous les détails sur la phase d'évaluation se trouvent dans 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 du client pour couvrir l'intégralité de la fenêtre, y compris la barre de titre, et les boutons de commande de fenêtre, comme les boutons "Fermer", "Agrandir" et "Réduire".

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

Pour en savoir plus sur la phase d'évaluation, consultez Personnaliser la superposition des commandes de fenêtre de la barre de titre de votre PWA.

PWA Summit

Le PWA Summit a lieu en octobre. Il s'agit d'une conférence en ligne sans frais visant à aider les utilisateurs à réussir avec les progressive web apps. Le PWA Summit est le fruit d'une collaboration entre des personnes de différentes entreprises participant à la création de technologies PWA: Google, Intel, Microsoft et Samsung.

Il y a un grand nombre de conférences et de contenus passionnants. Pour en savoir plus et vous inscrire, rendez-vous sur PWASummit.org.

Et bien plus !

Bien sûr, ce n’est pas tout.

  • Les éléments Flexbox et Flexbox sont désormais compatibles avec les mots clés d'alignement : 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é lorsque vous définissez meta theme-color, ce qui vous permet de spécifier différentes couleurs de thème pour le mode clair et le mode sombre.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

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

Complément d'informations

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

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Je m'appelle Pete LePage. Dès la sortie de Chrome 94, je serai là pour vous informer des nouveautés de Chrome !