Novedades de Chrome 65

Pete LePage

• La API de CSS Paint te permite generar de manera programática una imagen.
• La API de Server Timing permite que los servidores web proporcionen información sobre el tiempo de rendimiento a través de encabezados HTTP.
• la nueva propiedad display: contents de CSS puede hacer las cajas 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 hacer lo siguiente: 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 del DOM adicionales a crear el efecto dominó en un botón con estilo de material, podrías usar la API de pintura.

También es un método potente para aplicar polyfills con funciones de CSS que no son compatibles. en un navegador.

Surma tiene una gran publicación demostraciones en su explicación.

API de Server Timing

Usa las APIs de navegación y de sincronización de recursos el rendimiento del sitio para usuarios reales. Hasta ahora, no había una para que el servidor informe el tiempo de rendimiento.

La nueva API de Server Timing permite que tus el servidor pase la información de sincronización al navegador; una mejor imagen de tu rendimiento general.

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

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

Aparecen en las Herramientas para desarrolladores de Chrome, pero puedes quitarlas de la respuesta y guárdalos con otras estadísticas de rendimiento.

display: contents

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

Cuando se agregan a un elemento contenedor, los elementos secundarios ocupan su lugar en el DOM, y básicamente desaparece. Supongamos que tengo dos div, uno dentro entre sí. Mi div exterior 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.

Soy el <div> interior

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

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

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 convertirse en elementos flexibles.

Sin embargo, una vez que apliques display: contents a un elemento secundario, sus elementos secundarios se volverán flexibles. y se organizan con las mismas reglas que se habrían aplicado a de sus padres.

Mira la excelente publicación de Rachel Andrew. Cajas de barrido con contenido en exhibición para obtener más detalles y otros ejemplos.

Y mucho más.

Estos son solo algunos de los cambios que se implementaron en Chrome 65 para los desarrolladores. hay mucho más.

• La sintaxis para especificar las coordenadas HSL y HSLA, y RGB y RGBA para la propiedad color coinciden con Especificaciones de Color 4 de CSS.
• Hay una nueva política de funciones que permite te permite controlar XHR síncronas a través de un encabezado HTTP o el 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. Y, si te interesa Progressive Web Apps: Descubre la nueva Serie de videos de AWP Roadshow. Luego, haz clic en el botón Suscribirse de la Canal de YouTube Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y no bien se lance Chrome 66, aquí para contarte las novedades de Chrome.