Novedades de Chrome 65

Pete LePage

• La API de CSS Paint te permite generar una imagen de manera programática.
• La API de Server Timing permite que los servidores web proporcionen información de tiempo de rendimiento a través de encabezados HTTP.
• la nueva propiedad display: contents de CSS puede hacer que los cuadros desaparezcan.

Hay mucho más.

Soy Pete LePage. Profundicemos 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 dibujar la imagen, como 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 adicionales del DOM para crear el efecto de ondas en un botón con estilo de material, puedes usar la API de pintura.

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

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

API de Server Timing

Esperamos que uses las APIs de navegación y tiempo de recursos para hacer un seguimiento del rendimiento de tu sitio para usuarios reales. Hasta ahora, no existía una forma sencilla para que el servidor informara el tiempo de rendimiento.

La nueva API de Server Timing permite que tu servidor pase información de sincronización al navegador, lo que te brinda un mejor panorama de tu rendimiento general.

Puedes agregar un encabezado Server-Timing a tu respuesta para realizar un seguimiento de todas las métricas que desees: tiempos de lectura de la base de datos, tiempo de inicio o lo que sea que te resulte importante:

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

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

display: contents

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

Cuando se agrega a un elemento contenedor, cualquier elemento secundario toma 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 y un fondo gris, y configuré un ancho de 200 píxeles. El objeto 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 objeto div interno se encuentra en el objeto div externo.

Cuando se agrega display: contents al elemento div externo, desaparece el objeto div externo, y sus restricciones ya no se aplican al elemento div interno. El objeto div interno ahora tiene un ancho del 100%.

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

Sin embargo, una vez que aplicas display: contents a un elemento secundario, sus elementos secundarios se convierten en elementos flexibles y se presentan con las mismas reglas que se habrían aplicado a su elemento superior.

Consulta la excelente publicación de Rachel Andrew sobre Vanishing cajas with display content para obtener más detalles y otros ejemplos.

Y mucho más

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

• La sintaxis para especificar las coordenadas HSL y HSLA, y RGB y RGBA para la propiedad de color ahora coincide con la especificación de Color 4 de CSS.
• Hay una nueva política de funciones que te permite controlar XHR síncronas a través de un encabezado HTTP o el atributo iframe allow.

Asegúrate de consultar Novedades de las Herramientas para desarrolladores de Chrome para conocer las novedades de Herramientas para desarrolladores en Chrome 65. Además, si te interesan las apps web progresivas, consulta la nueva serie de videos de 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 lanza Chrome 66, estaré aquí para decirte: ¡Novedades de Chrome!