Nouveautés de Chrome 66

Pete LePage

Et ce n'est pas tout !

Je m'appelle Pete LePage. Découvrons ensemble les nouveautés de Chrome 66 pour les développeurs.

Vous voulez obtenir la liste complète des modifications ? Consultez la liste des modifications apportées au dépôt source Chromium.

Modèle d'objet typé CSS

Si vous avez déjà mis à jour une propriété CSS via JavaScript, vous avez déjà utilisé le modèle d'objet CSS. Mais elle renvoie tout sous forme de chaîne.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

Pour animer la propriété opacity, je dois caster la chaîne en nombre, puis incrémenter la valeur et appliquer mes modifications. Pas idéal.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

Avec le nouveau modèle CSS Typed Object Model, les valeurs CSS sont exposées en tant qu'objets JavaScript typés, ce qui élimine une grande partie de la manipulation des types et offre une façon plus judicieuse de travailler avec CSS.

Au lieu d'utiliser element.style, vous accédez aux styles via la propriété .attributeStyleMap ou .styleMap. Ils renvoient un objet de type carte qui facilite la lecture ou la mise à jour.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

Par rapport à l'ancien modèle d'objet CSS, les premiers benchmarks indiquent une amélioration d'environ 30 % du nombre d'opérations par seconde, ce qui est particulièrement important pour les animations JavaScript.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

Cela permet également d'éliminer les bugs causés par l'oubli de caster la valeur d'une chaîne en nombre, et il gère automatiquement l'arrondi et la limitation des valeurs. De plus, il existe de nouvelles méthodes astucieuses pour gérer les conversions d'unités, l'arithmétique et l'égalité.

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Eric a publié un excellent post avec plusieurs démonstrations et exemples dans son explication.

API Async Clipboard

const successful = document.execCommand('copy');

Le copier-coller synchrone à l'aide de document.execCommand peut être adapté à de petits caractères de texte. Toutefois, dans tous les autres cas, il est fort probable que la nature synchrone bloque la page, nuisant à l'expérience utilisateur. De plus, le modèle d'autorisations varie selon les navigateurs.

La nouvelle API Async Clipboard est un remplacement qui fonctionne de manière asynchrone et qui s'intègre à l'API d'autorisation pour offrir une meilleure expérience aux utilisateurs.

Le texte peut être copié dans le presse-papiers en appelant writeText().

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

Cette API étant asynchrone, la fonction writeText() renvoie une promesse qui sera résolue ou refusée selon que le texte transmis a bien été copié ou non.

De même, vous pouvez lire du texte dans le presse-papiers en appelant getText() et en attendant que la promesse renvoyée soit résolue avec le texte.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

Consultez le post et les démonstrations de Jason dans l'explication. Il a également accès à des exemples qui utilisent les fonctions async.

Nouveau contexte de canevas BitmapRenderer

L'élément canvas vous permet de manipuler des éléments graphiques au niveau des pixels, de dessiner des graphiques, de manipuler des photos ou même d'effectuer un traitement vidéo en temps réel. Toutefois, à moins que vous ne commenciez avec un élément canvas vide, vous avez besoin d'un moyen d'afficher une image sur l'élément canvas.

Auparavant, cela impliquait de créer une balise image, puis d'afficher son contenu dans canvas. Malheureusement, cela signifie que le navigateur doit stocker plusieurs copies de l'image en mémoire.

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

À partir de Chrome 66, un nouveau contexte d'affichage asynchrone permet de simplifier l'affichage des objets ImageBitmap. Elles s'affichent désormais de manière plus efficace et avec moins d'à-coups en travaillant de manière asynchrone et en évitant la duplication de mémoire.

Pour l'utiliser :

  1. Appelez createImageBitmap et transmettez-lui un blob d'image pour créer l'image.
  2. Récupérez le contexte bitmaprenderer à partir de canvas.
  3. Transférez ensuite l'image vers celui-ci.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Voilà, j'ai rendu l'image !

AudioWorklet

Les Worklets sont arrivés ! PaintWorklet a été expédié dans Chrome 65 et nous activons désormais AudioWorklet par défaut dans Chrome 66. Ce nouveau type de Worklet peut être utilisé pour traiter l'audio dans le thread audio dédié, en remplaçant l'ancien ScriptProcessorNode qui s'exécutait sur le thread principal. Chaque AudioWorklet s'exécute dans son propre champ d'application global, ce qui réduit la latence et améliore la stabilité du débit.

Il existe des exemples intéressants d'AudioWorklet dans les Labos de Google Chrome.

Et bien plus !

Ce ne sont là que quelques-uns des changements apportés à Chrome 66 pour les développeurs. Bien sûr, il y en a bien d'autres.

  • TextArea et Select acceptent désormais l'attribut autocomplete.
  • La définition de autocapitalize sur un élément form s'applique à tous les champs de formulaire enfants, ce qui améliore la compatibilité avec l'implémentation de autocapitalize dans Safari.
  • trimStart() et trimEnd() sont désormais disponibles en tant que méthode standard pour couper les espaces blancs à partir de chaînes.

N'oubliez pas de consulter la page Nouveautés des outils pour les développeurs Chrome pour découvrir les nouveautés de Chrome 66. Si les progressive web apps vous intéressent, regardez notre nouvelle série de vidéos PWA Roadshow. Cliquez ensuite sur le bouton S'abonner sur notre chaîne YouTube. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera mise en ligne.

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