Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Nouveauté de Chrome 64

Powered by Google Translate

  • La prise en charge de ResizeObservers vous avertira lorsque le rectangle de contenu d'un élément aura changé de taille.
  • Les modules peuvent désormais accéder à des métadonnées spécifiques avec import.meta .
  • Le pop-up blocker devient fort.
  • window.alert() ne change plus le focus.

Et il y a plenty more !

Je suis Pete LePage. Découvrons ce qui est nouveau pour les développeurs dans Chrome 64!

ResizeObserver

Suivre les changements de taille d'un élément peut être un peu pénible. Très probablement, vous attacherez un écouteur à l'événement resize du document, puis appelez getBoundingClientRect ou getComputedStyle . Mais, les deux peuvent causer des problèmes de mise en page.

Et si la fenêtre du navigateur ne changeait pas de taille, mais qu'un nouvel élément était ajouté au document? Ou vous avez ajouté display: none à un élément? Ces deux éléments peuvent modifier la taille des autres éléments de la page.

ResizeObserver vous avertit chaque fois que la taille d'un élément change et fournit les nouvelles hauteur et largeur de l'élément, ce qui réduit le risque d'accident de la mise en page.

Comme d'autres observateurs, son utilisation est assez simple: créez un objet ResizeObserver et transmettez un rappel au constructeur. Le rappel recevra un tableau de ResizeOberverEntries - une entrée par élément observé - qui contient les nouvelles dimensions de l'élément.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Consultez ResizeObserver: It's like document.onresize for Elements pour plus de détails et des exemples concrets.

Je déteste tab-under. Vous les connaissez, c'est quand une page ouvre une fenêtre contextuelle vers une destination ET navigue sur la page. Habituellement, l’un d’eux est une annonce ou quelque chose que vous ne voulez pas.

À partir de Chrome 64, ces types de navigation seront bloqués et Google Chrome affichera une interface utilisateur native à l’utilisateur, lui permettant de suivre la redirection s’il le souhaite.

import.meta

Lors de l'écriture de modules JavaScript, vous souhaitez souvent accéder à des métadonnées spécifiques à l'hôte concernant le module actuel. Chrome 64 prend désormais en charge la propriété import.meta dans les modules et expose l'URL du module en tant que import.meta.url .

Ceci est très utile lorsque vous souhaitez résoudre des ressources relatives au fichier de module par opposition au document HTML actuel.

Et plus encore!

Ce ne sont là que quelques-uns des changements apportés à Chrome 64 par les développeurs. Bien entendu, il y en a beaucoup plus.

  • Chrome prend désormais en charge named captures et Unicode property escapes dans les expressions régulières.
  • La valeur par défaut de preload pour les éléments <audio> et <video> est désormais metadata . Cela met Chrome en ligne avec les autres navigateurs et permet de réduire l'utilisation de la bande passante et des ressources en ne chargeant que les métadonnées et non le support lui-même.
  • Vous pouvez maintenant utiliser Request.prototype.cache pour afficher le mode de cache d'un Request et déterminer si une demande est une demande de rechargement.
  • À l'aide de l'API Focus Management, vous pouvez maintenant focaliser un élément sans y preventScroll avec l'attribut preventScroll .

window.alert()

Oh, et un de plus! Bien que ce ne soit pas vraiment une "fonctionnalité de développeur", cela me rend heureux. window.alert() n'apporte plus d'onglet d'arrière-plan au premier plan! Au lieu de cela, l'alerte sera affichée lorsque l'utilisateur reviendra à cet onglet.

Plus de tabulation aléatoire, car un window.alert a été window.alert sur moi. Je te regarde le vieil agenda de Google.

N'oubliez pas de subscribe dans notre YouTube channel et vous recevrez une notification par courrier électronique chaque fois que nous lançons une nouvelle vidéo ou ajoutez notre RSS feed à votre lecteur de flux.

Je m'appelle Pete LePage et, dès la sortie de Chrome 65, je serai ici pour vous dire ce qu'il y a de neuf dans Chrome!

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!