Nouveautés de Chrome 64

Pete LePage

Et ce n'est pas tout !

Je m'appelle Pete LePage. Découvrons ensemble les nouveautés de Chrome 64 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.

ResizeObserver

Le suivi du changement de taille d'un élément peut s'avérer pénible. Vous allez très probablement associer un écouteur à l'événement resize du document, puis appeler getBoundingClientRect ou getComputedStyle. Cependant, ces deux méthodes peuvent entraîner un thrashing de la mise en page.

Que se passe-t-il si la taille de la fenêtre du navigateur n'a pas changé, mais qu'un nouvel élément a été ajouté au document ? Ou avez-vous 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 de thrashing de la mise en page.

Comme les autres observateurs, son utilisation est assez simple. Créez un objet ResizeObserver et transmettez un rappel au constructeur. Le rappel reçoit 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, qui ressemble à document.onresize pour les éléments pour en savoir plus et obtenir des exemples concrets.

Je déteste les tab-unders. Vous les connaissez, c'est lorsqu'une page ouvre un pop-up vers une destination ET parcourt la page. Habituellement, l’une d’elles est une annonce ou quelque chose que vous ne vouliez pas.

À partir de Chrome 64, ce type de navigation sera bloqué et Chrome affichera une interface utilisateur native, ce qui lui permettra de suivre la redirection s'il le souhaite.

import.meta

Lorsque vous écrivez des modules JavaScript, vous avez souvent besoin d'accéder à des métadonnées spécifiques à l'hôte concernant le module actuel. Chrome 64 est désormais compatible avec la propriété import.meta dans les modules et expose l'URL du module en tant que import.meta.url.

Cela s'avère très utile lorsque vous souhaitez résoudre des ressources relatives au fichier du module plutôt qu'au document HTML actuel.

Et bien plus !

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

  • Chrome accepte désormais les captures nommées et les échappements de propriétés Unicode dans les expressions régulières.
  • La valeur preload par défaut pour les éléments <audio> et <video> est désormais metadata. Cela permet à Chrome de s'aligner sur 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 contenu multimédia lui-même.
  • Vous pouvez maintenant utiliser Request.prototype.cache pour afficher le mode cache d'un Request et déterminer s'il s'agit d'une requête d'actualisation.
  • À l'aide de l'API Focus Management, vous pouvez désormais sélectionner un élément sans y accéder à l'aide de l'attribut preventScroll.

window.alert()

Oh, et encore un ! Bien qu'il ne s'agisse pas vraiment d'une "fonctionnalité pour les développeurs", cela me rend heureux. window.alert() n'affiche plus d'onglet en arrière-plan au premier plan. À la place, l'alerte s'affiche lorsque l'utilisateur revient à cet onglet.

Je n'ai plus besoin de passer d'un onglet à l'autre de façon aléatoire, car un événement m'a déclenché une window.alert. Je regarde votre ancienne version de Google Agenda.

Assurez-vous de vous abonner à 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 65, je serai là pour vous dire quelles sont les nouveautés de Chrome !