Nouveautés de Chrome 64

Pete LePage

  • La prise en charge de ResizeObservers vous avertit lorsque le rectangle de contenu d'un élément a changé de taille.
  • Les modules peuvent désormais accéder aux métadonnées spécifiques à l'hôte avec import.meta.
  • Le bloqueur de pop-up est renforcé.
  • window.alert() ne modifie plus la sélection.

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

Je m'appelle Pete LePage. Voyons ce que Chrome 64 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.

ResizeObserver

Suivre les changements de taille d'un élément peut s'avérer un peu pénible. Vous allez probablement associer un écouteur à l'événement resize du document, puis appeler getBoundingClientRect ou getComputedStyle. Toutefois, ces deux éléments peuvent entraîner un gaspillage de mise en page.

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

ResizeObserver vous avertit chaque fois que la taille d'un élément change et fournit la nouvelle hauteur et la nouvelle largeur de l'élément, ce qui réduit le risque de réorganisation 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 recevra un tableau de ResizeOberverEntries (une entrée par élément observé) contenant 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);

Pour en savoir plus et obtenir des exemples concrets, consultez ResizeObserver: comme document.onresize pour les éléments.

Je déteste les tabulations. Vous les connaissez : il s'agit d'une page qui ouvre un pop-up vers une destination ET qui navigue sur la page. En général, l'un d'eux est une annonce ou un élément que vous ne souhaitiez pas.

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

import.meta

Lorsque vous écrivez des modules JavaScript, vous souhaitez souvent accéder à des métadonnées spécifiques de 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 est très utile lorsque vous souhaitez résoudre les ressources liées au fichier de module, par opposition au document HTML actuel.

Et bien plus !

Ce ne sont là que quelques-unes des modifications apportées à Chrome 64 pour les développeurs.

  • Chrome accepte désormais les captures nommées et les échappements de propriété Unicode dans les expressions régulières.
  • La valeur preload par défaut pour les éléments <audio> et <video> est désormais metadata. Chrome se rapproche ainsi des autres navigateurs et permet de réduire la bande passante et l'utilisation des ressources en ne chargeant que les métadonnées et non le contenu multimédia lui-même.
  • Vous pouvez désormais utiliser Request.prototype.cache pour afficher le mode de cache d'un Request et déterminer si une requête est une requête de rechargement.
  • Grâce à l'API Focus Management, vous pouvez désormais mettre en surbrillance un élément sans y accéder à l'aide de l'attribut preventScroll.

window.alert()

Ah, et une dernière chose ! Bien que ce ne soit pas vraiment une "fonctionnalité pour les développeurs", cela me fait plaisir. window.alert() ne met plus un onglet en arrière-plan au premier plan. Au lieu de cela, l'alerte s'affichera lorsque l'utilisateur reviendra à cet onglet.

Plus de changement d'onglets aléatoire, car un élément a déclenché un window.alert sur moi. Je pense à l'ancien Google Agenda.

N'oubliez pas de vous abonner à notre chaîne YouTube. Vous recevrez ainsi une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès que Chrome 65 sera disponible, je vous présenterai les nouveautés de Chrome.