Novedades de Chrome 64

Pete LePage

Hay mucho más.

Soy Pete LePage. Analicemos las novedades para desarrolladores en Chrome 64.

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

ResizeObserver

Hacer un seguimiento de cuándo cambia el tamaño de un elemento puede ser un poco complicado. Lo más probable es que adjuntas un objeto de escucha al evento resize del documento y, luego, llames a getBoundingClientRect o getComputedStyle. Sin embargo, ambos pueden causar un intercambio de diseño.

¿Qué sucede si la ventana del navegador no cambió de tamaño, pero se agregó un elemento nuevo al documento? ¿O agregaste display: none a un elemento? Ambos pueden cambiar el tamaño de otros elementos de la página.

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

Al igual que con otros observadores, 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 contiene 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 elementos para obtener más detalles y ejemplos del mundo real.

Odio las pestañas inferiores. Ya sabes, ocurre cuando una página abre una ventana emergente en un destino Y navega por la página. Por lo general, uno de ellos es un anuncio o algo que no querías.

A partir de Chrome 64, se bloqueará 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 acceder 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, 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. Esto permite que Chrome se alinee 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 en sí.
  • Ahora puedes usar Request.prototype.cache para ver el modo de caché de un Request y determinar si una solicitud es una solicitud de recarga.
  • Con la API de Focus Management, ahora puedes enfocar un elemento sin desplazarte hasta él con el atributo preventScroll.

window.alert()

Ah, y una más. Si bien en realidad no es una "función para desarrolladores", me pone contenta. window.alert() ya no lleva una pestaña en segundo plano al primer plano. En su lugar, se mostrará la alerta cuando el usuario cambie a esa pestaña.

No más cambios de pestaña aleatorios porque algo activó un window.alert en mí. Te estoy mirando, viejo 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 contarte las novedades.