Nouveautés de Chrome 64

Pete LePage

  • La compatibilité avec 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 ! En savoir plus

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 du dépôt de sources 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 fenêtre du navigateur ne changeait pas de taille, 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 accepte désormais 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. Bien entendu, il y en a bien d'autres.

  • 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 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 faire défiler la page jusqu'à celui-ci à 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 d'onglet d'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 alors 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.