Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 100

Pete LePage

Voici les informations à retenir :

Chrome 100 a un numéro de version à trois chiffres
Remontez dans le temps et fêtez le 100CoolWebMoments depuis la première version de Chrome.
Des modifications importantes ont été apportées à la chaîne user-agent.
L'API Multi-Screen Window Placement permet d'énumérer les écrans connectés à l'ordinateur d'un utilisateur et de placer des fenêtres sur des écrans spécifiques.
Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.

Je m'appelle Pete LePage. Voyons ce que Chrome 100 a de nouveau à offrir aux développeurs.

Chrome 100

Lorsque les navigateurs ont atteint la version 10 pour la première fois, il y a eu quelques problèmes, car le numéro de version majeure est passé d'un chiffre à deux. J'espère que nous avons appris quelques choses qui faciliteront la transition de deux chiffres à trois.

Chrome 100 est déjà disponible et Firefox 100 le sera très prochainement. Ces numéros de version à trois chiffres peuvent entraîner des problèmes sur les sites qui s'appuient sur l'identification de la version du navigateur. Au cours des derniers mois, l'équipe Firefox et l'équipe Chrome ont effectué des tests dans lesquels le navigateur affichait le numéro de version 100, même s'il ne s'agissait pas de la version actuelle.

Cela a entraîné quelques problèmes signalés, dont la plupart ont déjà été résolus. Nous avons cependant encore besoin de votre aide.

Si vous gérez un site Web, testez votre site Web avec Chrome et Firefox 100.
Si vous développez une bibliothèque d'analyse de l'User-Agent, ajoutez des tests pour analyser les versions supérieures ou égales à 100.

Pour en savoir plus, consultez Chrome et Firefox atteindront bientôt la version majeure 100 sur web.dev.

100 moments Web inspirants

Image promotionnelle des 100 moments Web cool

C'était passionnant de voir le Web se développer et toutes les choses incroyables que vous avez créées au cours des 100 dernières versions de Chrome. Nous avons pensé qu'il serait amusant de remonter le temps et de célébrer #100CoolWebMoments qui se sont produits ces 14 dernières années.

Dites-nous quels moments vous avez préférés. Si nous avons manqué quelque chose (et nous en sommes sûrs), tweetez-nous @Chromiumdev avec le hashtag #100CoolWebMoments. Profitez-en bien !

Chaîne user-agent réduite

En parlant de l'user-agent, Chrome 100 sera la dernière version à prendre en charge une chaîne user-agent non réduite par défaut. Il s'agit d'une stratégie visant à remplacer l'utilisation de la chaîne User-Agent par la nouvelle API User-Agent Client Hints.

À partir de Chrome 101, l'user-agent sera progressivement réduit.

Consultez la phase d'évaluation et les dates de la réduction user-agent sur le [blog Chromium][crblog] pour en savoir plus sur les éléments qui seront supprimés et leur date de suppression.

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.

Vous pouvez rapidement vérifier si plusieurs écrans sont connectés à l'appareil avec window.screen.isExtended.

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

Toutefois, la fonctionnalité clé se trouve dans window.getScreenDetails(), qui fournit des informations sur les écrans connectés.

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

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

try {
  const screens = await window.getScreenDetails();
  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é, si la résolution change, etc.

const screens = await window.getScreenDetails();
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 mis à jour de Tom sur web.dev intitulé Gérer plusieurs écrans avec l'API Multi-Screen Window Placement.

Et bien plus !

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

Il existe une nouvelle méthode forget() pour les appareils HID qui vous permet de révoquer une autorisation accordée par un utilisateur à un appareil HID.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

Pour WebNFC, la méthode makeReadOnly() vous permet de rendre les tags NFC en lecture seule de manière permanente.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications apportées à Chrome 100.

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 que Chrome 101 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.