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

Nouveautés de Chrome 86

Pete LePage

Twitter GitHub Glitch Mastodon Page d'accueil

Le déploiement de Chrome 86 en version stable commence maintenant.

Voici les informations à retenir :

L'API File System Access est désormais disponible en version stable.
De nouvelles phases d'évaluation sont disponibles pour Web HID et l'API Multi-screen Window Placement.
Découvrez des nouveautés en CSS et bien d'autres encore.

Je m'appelle Pete LePage. Je travaille et je filme depuis chez moi. Plongeons-nous dans le vif du sujet et découvrons les nouveautés pour les développeurs dans Chrome 86.

Accès au système de fichiers

Aujourd'hui, vous pouvez utiliser l'élément <input type="file"> pour lire un fichier à partir du disque. Pour enregistrer les modifications, ajoutez download à une balise d'ancrage. Le sélecteur de fichier s'affiche, puis le fichier est enregistré. Il n'y a aucun moyen d'écrire dans le même fichier que vous avez ouvert. Ce workflow est agaçant.

Avec l'API File System Access (anciennement l'API Native File System), qui a été retirée de la phase d'évaluation et qui est désormais disponible en version stable, vous pouvez appeler showOpenFilePicker(), qui affiche un sélecteur de fichier, puis renvoie un handle que vous pouvez utiliser pour lire le fichier.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

Pour enregistrer un fichier sur le disque, vous pouvez soit utiliser le handle de fichier que vous avez obtenu précédemment, soit appeler showSaveFilePicker() pour obtenir un nouveau handle de fichier.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

capture d'écran de l'invite d'autorisation — Demande à l'utilisateur de l'autorisation d'écrire dans un fichier

Avant d'écrire, Chrome vérifie si l'utilisateur a accordé l'autorisation en écriture. Si ce n'est pas le cas, Chrome enverra d'abord une invite à l'utilisateur.

L'appel de showDirectoryPicker() ouvre un répertoire, ce qui vous permet d'obtenir la liste des fichiers ou d'en créer d'autres dans ce répertoire. C'est la solution idéale pour les IDE ou les lecteurs multimédia qui interagissent avec de nombreux fichiers. Avant de pouvoir écrire quoi que ce soit, l'utilisateur doit bien sûr accorder une autorisation en écriture.

L'API étant riche en autres éléments, consultez l'article sur l'accès au système de fichiers sur web.dev.

Phase d'évaluation: WebHID

Des dispositifs d'interface utilisateur, communément appelés HID, reçoivent des entrées d'êtres humains ou fournissent une sortie à des humains. Il existe une longue traîne d'appareils d'interface utilisateur trop récents, trop anciens ou trop rares pour être accessibles par les pilotes des systèmes.

L'API WebHID, désormais disponible en tant qu'phase d'évaluation, résout ce problème en permettant d'accéder à ces appareils en JavaScript. Avec WebHID, les jeux Web peuvent exploiter tout le potentiel des manettes de jeu, y compris tous les boutons, joysticks, capteurs, déclencheurs, LED, packs Rumble, etc.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

Les applications de chat vidéo Web peuvent utiliser les boutons de téléphonie sur des enceintes spécialisées pour démarrer ou terminer des appels, couper le son, etc.

Bien sûr, les API puissantes de ce type ne peuvent interagir avec les appareils que lorsque l'utilisateur choisit explicitement de les autoriser.

Consultez la section Se connecter à des appareils HID peu courants pour obtenir plus de détails, des exemples, des conseils de démarrage et une démonstration sympa.

Phase d'évaluation: API Multi-Screen Window Placement

Aujourd'hui, vous pouvez obtenir les propriétés de l'écran sur lequel la fenêtre du navigateur se trouve en appelant window.screen(). Mais que se passe-t-il si votre installation est multi-écran ? Malheureusement, le navigateur ne vous indiquera que l'écran sur lequel il est actuellement.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

L'API Multi-Screen Window Placement lance une phase d'évaluation dans Chrome 86. Elle vous permet d'énumérer les écrans connectés à votre ordinateur et de placer des fenêtres sur des écrans spécifiques. Être capable de placer des fenêtres sur des écrans spécifiques est essentiel pour des applications de présentation, de services financiers, etc.

Avant de pouvoir utiliser l'API, vous devez demander l'autorisation. Si vous ne le faites pas, le navigateur affichera une invite lorsque vous tenterez de l'utiliser pour la première fois.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Une fois que l'utilisateur a accordé l'autorisation, l'appel de window.getScreens() renvoie une promesse qui se résout avec un tableau d'objets Screen.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Je peux ensuite utiliser ces informations pour appeler requestFullScreen() ou placer de nouvelles fenêtres. Pour plus d'informations, consultez l'article Gérer plusieurs écrans avec l'API Multi-Screen Window Placement sur web.dev.

Et plus encore

Le nouveau sélecteur CSS, :focus-visible, vous permet d'activer la même heuristique que le navigateur utilise pour décider d'afficher ou non l'indicateur de sélection par défaut.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Vous pouvez personnaliser la couleur, la taille ou le type de numéro ou de puce pour les listes avec le pseudo-élément CSS ::marker.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Le Chrome Dev Summit s'affichera sur un écran près de chez vous. Consultez régulièrement notre chaîne YouTube pour en savoir plus.

Complément d'informations

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

Pour suivre l'actualité de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome afin de recevoir une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo ou si vous ajoutez notre flux RSS à votre lecteur de flux.

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