Novedades de Chrome 65

Pete LePage

Además, hay mucho más.

Soy Pete LePage. Comencemos y veamos las novedades para desarrolladores en Chrome 65.

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

API de CSS Paint

La API de CSS Paint te permite generar de manera programática una imagen para propiedades de CSS como background-image o border-image.

En lugar de hacer referencia a una imagen, puedes usar la nueva función de pintura para dibujarla, al igual que un elemento de lienzo.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

Por ejemplo, en lugar de agregar elementos del DOM adicionales para crear el efecto de ondas en un botón con estilo de Material, podrías usar la API de Paint.

También es un método potente para polyfills de las funciones de CSS que aún no son compatibles con los navegadores.

Surma tiene una excelente publicación con varias demostraciones en su explicación.

API de Server Timing

Se espera que uses las APIs de navegación y sincronización de recursos a fin de realizar un seguimiento del rendimiento de tu sitio para usuarios reales. Hasta ahora, no había una manera fácil para que el servidor informara los tiempos de su rendimiento.

La nueva API de Server Timing permite que tu servidor transmita información de sincronización al navegador, lo que te brinda un panorama más preciso de tu rendimiento general.

Puedes hacer un seguimiento de todas las métricas que desees: los tiempos de lectura de la base de datos, el tiempo de inicio o lo que sea importante para ti. Para ello, agrega un encabezado Server-Timing a tu respuesta:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

Se muestran en las Herramientas para desarrolladores de Chrome, pero puedes quitarlos del encabezado de la respuesta y guardarlas con tus otras estadísticas de rendimiento.


display: contents

La nueva propiedad display: contents de CSS es bastante elegante.

Cuando se agrega a un elemento contenedor, cualquier elemento secundario ocupa su lugar en el DOM y básicamente desaparece. Supongamos que tengo dos div, uno dentro del otro. Mi div externo tiene un borde rojo, un fondo gris y establecí un ancho de 200 píxeles. El div interno tiene un borde azul y un fondo celeste.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

De forma predeterminada, el div interno está contenido en el div externo.

Soy el <div> interior

Si agregas display: contents al div externo, desaparecerá el div externo, y sus restricciones ya no se aplicarán al div interno. El div interno ahora tiene el 100% del ancho.

Usa las Herramientas para desarrolladores para inspeccionar el DOM y observa que aún existe la div externa.

Hay muchos casos en los que esto puede ser útil, pero el más común es sobre flexbox. Con Flexbox, solo los elementos secundarios inmediatos de un contenedor flexible se convierten en elementos flexibles.

Sin embargo, una vez que apliques display: contents a un elemento secundario, sus elementos secundarios se convertirán en elementos flexibles y se presentarán con las mismas reglas que se habrían aplicado a su elemento superior.

Consulta la excelente publicación de Rachel Andrew: Derribando cajas con contenido en pantalla para obtener más detalles y otros ejemplos.

Y mucho más.

Estos son solo algunos de los cambios en Chrome 65 para desarrolladores; por supuesto, hay mucho más.

Asegúrate de consultar las novedades de las Herramientas para desarrolladores de Chrome para conocer las novedades de las Herramientas para desarrolladores de Chrome 65. Y, si te interesan las apps web progresivas, consulta la nueva serie de videos AWP Roadshow. Luego, haz clic en el botón Suscribirse de nuestro canal de YouTube y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y apenas se lance Chrome 66, estaré aquí para contarte las novedades de Chrome.