Nouveautés de Chrome 66

Pete LePage

Et ce n'est pas tout : il y a encore beaucoup d'autres fonctionnalités !

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

Vous souhaitez consulter 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à modifié une propriété CSS via JavaScript, vous avez utilisé le modèle d'objet CSS. Mais il 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 convertir la chaîne en nombre, puis incrémenter la valeur et appliquer mes modifications. Ce n'est 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 d'objet typé CSS, les valeurs CSS sont exposées en tant qu'objets JavaScript typés, ce qui élimine une grande partie de la manipulation de type et offre un moyen plus judicieux de travailler avec CSS.

Au lieu d'utiliser element.style, vous accédez aux styles via la propriété .attributeStyleMap ou .styleMap. Elles renvoient un objet semblable à une 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 montrent 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

Il permet également d'éliminer les bugs causés par l'oubli de caster la valeur d'une chaîne en nombre, et gère automatiquement l'arrondi et le forçage des valeurs. De plus, il existe de nouvelles méthodes très pratiques 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 article avec plusieurs démonstrations et exemples dans sa présentation.

API Async Clipboard

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

Le copier-coller synchrone à l'aide de document.execCommand peut être acceptable pour de petits extraits de texte, mais pour tout autre élément, il est probable que sa nature synchrone bloque la page, ce qui entraîne une mauvaise expérience pour l'utilisateur. De plus, le modèle d'autorisation entre les navigateurs est incohérent.

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

Vous pouvez copier du texte dans le presse-papiers en appelant writeText().

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

Étant donné que cette API est asynchrone, la fonction writeText() renvoie une promesse qui sera résolue ou refusée selon que le texte que nous avons transmis a bien été copié.

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

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

Consultez le post et les démonstrations de Jason dans la présentation. Il propose également des exemples qui utilisent des fonctions async.

Nouveau contexte de canevas BitmapRenderer

L'élément canvas vous permet de manipuler des graphiques au niveau des pixels. Vous pouvez dessiner des graphiques, manipuler des photos ou même effectuer un traitement vidéo en temps réel. Toutefois, sauf si vous commencez avec un canvas vide, vous devez trouver un moyen de générer une image sur le canvas.

Historiquement, cela signifiait créer une balise image, puis afficher son contenu sur le 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 de rendu asynchrone a été introduit pour simplifier l'affichage des objets ImageBitmap. Ils s'affichent désormais plus efficacement et avec moins de saccades 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.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

C'est fait, j'ai généré l'image.

AudioWorklet

Les worklets sont disponibles ! PaintWorklet a été publié dans Chrome 65. 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é, remplaçant l'ancien ScriptProcessorNode qui s'exécutait sur le thread principal. Chaque AudioWorklet s'exécute dans son propre portée globale, ce qui réduit la latence et augmente la stabilité du débit.

Vous trouverez des exemples intéressants d'AudioWorklet sur Google Chrome Labs.

Et bien plus !

Il ne s'agit là que de quelques-unes des modifications apportées à Chrome 66 pour les développeurs.

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

Consultez Nouveautés dans Chrome DevTools pour découvrir les nouveautés de DevTools dans Chrome 66. Si vous êtes intéressé par les applications Web progressives, regardez la nouvelle série de vidéos du PWA Roadshow. Cliquez ensuite sur le bouton S'abonner sur notre chaîne YouTube. 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 67 sera disponible, je vous présenterai les nouveautés de Chrome.