Nouveautés de Chrome 100

Pete LePage

Voici les informations à retenir :

Je m'appelle Pete LePage. Allons plus loin et découvrons les nouveautés pour les développeurs dans Chrome 100.

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.

Logo Chrome et Firefox

Chrome 100 est disponible dès maintenant et Firefox 100 sera bientôt disponible. Ces numéros de version à trois chiffres peuvent causer des problèmes sur les sites qui reposent 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 indiquait le numéro de version 100, alors que ce n'était pas le cas.

Plusieurs problèmes ont donc été signalés, dont beaucoup ont déjà été corrigés. Mais, nous avons encore besoin de votre aide.

  • Si vous gérez un site Web, testez-le avec Chrome et Firefox 100.
  • Si vous développez une bibliothèque d'analyse user-agent, ajoutez des tests pour analyser les versions supérieures et égales à 100.

Pour en savoir plus, découvrez Chrome et Firefox bientôt pour atteindre la version majeure 100 sur web.dev.

100 moments sympas sur le Web

Image promotionnelle "100 Cool Web Moments"

Ce fut passionnant de voir le Web se développer et de voir tout ce que vous avez créé au cours des 100 dernières versions de Chrome. Nous avons pensé qu'il serait amusant de revivre l'événement #100CoolWebMoments, survenu au cours des 14 dernières années.

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

Chaîne user-agent réduite

En ce qui concerne le user-agent, Chrome 100 est la dernière version à accepter par défaut une chaîne user-agent non réduite. Cela fait partie 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, le user-agent sera progressivement réduit.

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

API de placement des fenêtres multi-écrans

Pour certaines applications, il est important d'ouvrir de nouvelles fenêtres et de les placer à des emplacements spécifiques ou 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.

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

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

Cependant, la principale fonctionnalité se trouve dans window.getScreenDetails(), qui fournit des détails sur les écrans associé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 écran.

try {
  const screens = await window.getScreenDetails();
  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é, 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 Gérer plusieurs écrans avec l'API Multi-Screen Window Placement sur web.dev.

Et bien plus !

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

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();

Et pour WebNFC, la méthode makeReadOnly() vous permet de créer des tags NFC en lecture seule de manière permanente.

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

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

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 que Chrome 101 sera disponible, je serai là pour vous dire quelles sont les nouveautés de Chrome !