Novedades de Chrome 69

Pete LePage

Pasaron diez años desde que se lanzó Chrome por primera vez. Mucho cambió desde entonces, pero nuestro objetivo de crear una base sólida para las aplicaciones web modernas no.

En Chrome 69, agregamos compatibilidad con lo siguiente:

• CSS Scroll Snap te permite crear experiencias de desplazamiento fluidas y elegantes.
• Los cortes de pantalla te permiten usar el área completa de la pantalla, incluido cualquier espacio detrás del corte de pantalla, que a veces se denomina muesca.
• La API de Web Locks te permite adquirir un bloqueo de forma asíncrona, mantenerlo mientras se realiza el trabajo y, luego, liberarlo.

¡Y hay mucho más!

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

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

CSS Scroll Snap

CSS Scroll Snap te permite crear experiencias de desplazamiento fluidas y elegantes mediante la declaración de posiciones de detención del desplazamiento que le indican al navegador dónde detenerse después de cada operación de desplazamiento. Esto es muy útil para carruseles de imágenes o secciones paginadas en las que deseas que el usuario se desplace a un punto específico.

Para un carrusel de imágenes, agregaría scroll-snap-type: x mandatory; al contenedor de desplazamiento y scroll-snap-align: center; a cada imagen. Luego, a medida que el usuario se desplaza por el carrusel, cada imagen se desplazará suavemente hasta la posición perfecta.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

El ajuste del desplazamiento de CSS funciona bien, incluso cuando los objetivos de ajuste tienen diferentes tamaños o cuando son más grandes que el desplazamiento. Consulta la publicación Desplazamiento bien controlado con CSS Scroll Snap para obtener más detalles y ejemplos que puedes probar.

Cortes de pantalla (también conocidos como muescas)

Cada vez hay una mayor cantidad de dispositivos móviles que se lanzan con un corte de pantalla, a veces llamado muesca. Para solucionar este problema, los navegadores agregan un poco de margen adicional a tu página para que la muesca no oculte el contenido.

Pero ¿qué pasa si quieres usar ese espacio?

Con las variables de entorno de CSS y la etiqueta meta viewport-fit, ahora puedes hacerlo. Por ejemplo, para indicarle al navegador que se expanda al área de recorte de la pantalla, establece la propiedad viewport-fit en la etiqueta meta viewport como cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Luego, puedes usar las variables de entorno de CSS safe-area-inset-* para diseñar tu contenido.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

Hay una excelente entrada en el blog de WebKit sobre cómo diseñar sitios web para el iPhone X. También puedes consultar la explicación para obtener más detalles.

API de Web Locks

La API de Web Locks te permite adquirir un bloqueo de forma asíncrona, mantenerlo mientras se realiza el trabajo y, luego, liberarlo. Mientras se mantiene el bloqueo, ninguna otra secuencia de comandos del origen puede adquirir el mismo bloqueo, lo que ayuda a coordinar el uso de los recursos compartidos.

Por ejemplo, si una app web que se ejecuta en varias pestañas quiere asegurarse de que solo una pestaña se sincronice con la red, el código de sincronización intentará adquirir un bloqueo llamado network_sync_lock.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

La primera pestaña que adquiera el bloqueo sincronizará los datos con la red. Si otra pestaña intenta adquirir el mismo bloqueo, se pondrá en cola. Una vez que se libere el bloqueo, se le otorgará el bloqueo a la siguiente solicitud en cola y se ejecutará.

MDN tiene un excelente instructivo sobre bloqueos web que incluye una explicación más detallada y muchos ejemplos. También puedes profundizar y consultar las especificaciones.

Y mucho más.

Estos son solo algunos de los cambios implementados en Chrome 69 para desarrolladores, pero hay muchos más.

• A partir de la especificación CSS4, ahora puedes crear transiciones de color alrededor de la circunferencia de un círculo con gradientes cónicos. Lea Verou tiene un polyfill de conic-gradient() de CSS que puedes usar, y la página incluye muchos ejemplos geniales enviados por la comunidad.
• Hay un nuevo método toggleAttribute() en los elementos que activa o desactiva la existencia de un atributo, similar a classList.toggle().
• Los arrays de JavaScript obtendrán dos métodos nuevos: flat() y flatMap(). Muestran un array nuevo con todos los elementos de subarrays integrados.
• Además, OffscreenCanvas quita el trabajo del subproceso principal y lo coloca en un trabajador, lo que ayuda a eliminar los cuellos de botella de rendimiento.

Sorpresas

¿Encontraste todos los huevos de Pascua en el video?

• El cómic de Chrome
• Bandas de Chromercise
• Cañón de papas
• Pete Monstruo
• Dinosaurio de madera de CDS 2017

Un agradecimiento especial a todas las personas que ayudaron a producir los 28 episodios de Novedades de Chrome. Todas estas personas son increíbles.

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

¿Quieres ver qué tan lejos llegó Novedades de Chrome desde nuestro primer episodio? Mira este divertido video de progreso de 30 segundos que muestra nuestra historia desde el primer video hasta la actualidad.

Y, por supuesto, gracias por mirar el video y enviarnos tus comentarios. Las leí todas y me tomé tus sugerencias muy en serio. Estos videos mejoraron gracias a ti.

Gracias por mirar este video.

Errores de Novedades de Chrome

Armamos un compilado de compilaciones de errores para que las disfrutes. Después de mirarlo, aprendí lo siguiente:

• Cuando me tropiezo con mis palabras, hago ruidos extraños.
• Hago rostros y saco la lengua.
• Me muevo mucho.

Suscribirse

Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Desarrolladores de Chrome y 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 70, estaré aquí para contarte las novedades.