Nouveautés de Chrome 100

Pete LePage

Voici les informations à retenir :

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, quelques problèmes sont apparus, car le numéro de version majeure est passé d'un à deux chiffres. Nous espérons avoir appris quelques éléments qui faciliteront la transition de deux à trois chiffres.

Logo Chrome et Firefox

Chrome 100 est disponible dès maintenant, et Firefox 100 sera disponible très bientôt. 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 réelle.

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-le 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 faire un retour en arrière et de célébrer les 100 moments Web sympas qui se sont produits au cours des 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. Bonne lecture !

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 User Agent Reduction Origin Trial and Dates (Phase d'évaluation de la réduction user-agent et dates) sur le [blog Chromium][crblog] pour en savoir plus sur ce qui sera supprimé et quand.

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 mettre 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);
}

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.

Une nouvelle méthode forget() pour les appareils HID 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.

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