Novedades de Chrome 64

Pete LePage

Además, hay mucho más.

Soy Pete LePage. ¡Profundicemos y veamos las novedades para desarrolladores en Chrome 64!

¿Quieres ver la lista completa de los cambios? Consulta la lista de cambios del repositorio de código fuente de Chromium.

ResizeObserver

Realizar el seguimiento de cuándo cambia el tamaño de un elemento puede ser un inconveniente. Lo más probable es que adjuntes un objeto de escucha al evento resize del documento y, luego, llames a getBoundingClientRect o getComputedStyle. Sin embargo, ambas pueden causar una hiperpaginación del diseño.

¿Y si la ventana del navegador no cambia de tamaño, pero se agrega un nuevo elemento al documento? ¿O agregaste display: none a un elemento? Ambos pueden cambiar el tamaño de otros elementos dentro de la página.

ResizeObserver te notifica cada vez que cambia el tamaño de un elemento y proporciona la nueva altura y el ancho del elemento, lo que reduce el riesgo de hiperpaginación del diseño.

Al igual que otros Observers, usarlo es bastante simple: crea un objeto ResizeObserver y pasa una devolución de llamada al constructor. La devolución de llamada recibirá un array de ResizeOberverEntries (una entrada por elemento observado) que contendrá las nuevas dimensiones del elemento.

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);

Consulta ResizeObserver: Es como document.onresize para Elements para obtener más detalles y ejemplos del mundo real.

Odio las tabulaciones subyacentes. Ya lo conoces, cuando una página abre una ventana emergente en algún destino Y navega por ella. Por lo general, uno de ellos es un anuncio o algo que no querías.

A partir de Chrome 64, se bloquearán este tipo de navegaciones, y Chrome mostrará alguna IU nativa al usuario, lo que le permitirá seguir el redireccionamiento si lo desea.

import.meta

Cuando escribes módulos de JavaScript, a menudo necesitas acceso a metadatos específicos del host sobre el módulo actual. Chrome 64 ahora admite la propiedad import.meta dentro de los módulos y expone la URL del módulo como import.meta.url.

Esto es muy útil cuando quieres resolver recursos relacionados con el archivo del módulo en lugar del documento HTML actual.

Y mucho más.

Estos son solo algunos de los cambios en Chrome 64 para desarrolladores y, por supuesto, hay muchos más.

  • Chrome ahora admite capturas con nombre y escapadas de propiedades Unicode en expresiones regulares.
  • El valor predeterminado de preload para los elementos <audio> y <video> ahora es metadata. De esta manera, Chrome está en línea con otros navegadores y ayuda a reducir el ancho de banda y el uso de recursos, ya que solo se cargan los metadatos y no el contenido multimedia.
  • Ahora puedes usar Request.prototype.cache para ver el modo de almacenamiento en caché de un Request y determinar si una solicitud es de recarga.
  • Con la API de Focus Management, ahora puedes enfocar un elemento sin tener que desplazarte hacia él con el atributo preventScroll.

window.alert()

¡Ah, y uno más! Si bien esta no es una "función para desarrolladores", me pone contento. window.alert() ya no muestra una pestaña en segundo plano en primer plano. En cambio, la alerta se mostrará cuando el usuario vuelva a esa pestaña.

Ya no hay cambios aleatorios de pestañas porque algo activó un window.alert en mí. Estás mirando tu antiguo Calendario de Google.

Asegúrate de suscribirte a nuestro canal de YouTube; recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y en cuanto se lance Chrome 65, estaré aquí para contarles las novedades de Chrome.