Novedades de Chrome 69

Pete LePage

Pasaron diez años desde el lanzamiento de Chrome. Mucho ha cambiado desde entonces, pero nuestro objetivo de crear una base sólida para las aplicaciones web modernas no ha cambiado.

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 toda el área de la pantalla, incluido el espacio detrás del corte, 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 muchas más!

Soy Pete LePage. ¡Veamos 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, ya que declaras posiciones de ajuste de desplazamiento que le indican al navegador dónde detenerse después de cada operación de desplazamiento. Esto es muy útil para los carruseles de imágenes o las secciones paginadas en las que quieres que el usuario se desplace hasta un punto específico.

En el caso de 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 de desplazamiento con CSS funciona bien, incluso cuando los objetivos de ajuste tienen diferentes tamaños o cuando son más grandes que el elemento de desplazamiento. Consulta la publicación Desplazamiento bien controlado con CSS Scroll Snap para obtener más detalles y muestras que puedes probar.

Cortes de pantalla (también conocidos como muescas)

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

¿Pero qué sucede 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 corte de pantalla, configura 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 safe-area-inset-* variables de entorno de CSS para diseñar tu contenido.

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

En el blog de WebKit, hay una excelente publicación sobre el diseño de 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, ningún otro script del origen puede adquirir el mismo bloqueo, lo que ayuda a coordinar el uso de 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ía 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 la cola y se ejecutará.

MDN tiene una excelente introducción a Web Locks que incluye una explicación más detallada y muchos ejemplos. También puedes profundizar y consultar la especificación.

Y mucho más

Por supuesto, estos son solo algunos de los cambios que se incluyen en Chrome 69 para desarrolladores. Hay muchos más.

• Desde la especificación de CSS4, ahora puedes crear transiciones de color alrededor de la circunferencia de un círculo con degradados cónicos. Lea Verou tiene un polyfill de conic-gradient() CSS que puedes usar, y la página incluye una gran cantidad de muestras enviadas por la comunidad muy interesantes.
• Hay un nuevo método toggleAttribute() en los elementos que activa o desactiva la existencia de un atributo, de manera similar a classList.toggle().
• Los arrays de JavaScript tendrán dos métodos nuevos: flat() y flatMap(). Devuelven un array nuevo con todos los elementos de los subarrays incluidos en él.
• Además, OffscreenCanvas mueve el trabajo del subproceso principal a un subproceso de trabajo, lo que ayuda a eliminar los cuellos de botella del rendimiento.

Sorpresas

¿Encontraste todos los huevos de Pascua del video?

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

Agradecemos especialmente a todas las personas que ayudaron a que se realizaran los 28 episodios de Novedades de Chrome. Todas y cada una de 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é tanto ha avanzado New in Chrome desde nuestro primer episodio? Mira este divertido video de progresión de 30 segundos que muestra nuestra historia desde nuestro primer video hasta hoy.

Y, por supuesto, gracias por mirar el video y enviarnos tus comentarios. Leo todas las sugerencias y las tengo en cuenta. Estos videos mejoraron gracias a ti.

Gracias por mirar este video.

Novedades de Chrome: Bloopers

Preparamos un divertido video de errores para que lo disfrutes. Después de verlo, aprendí algunas cosas:

• Cuando me trabo al hablar, hago ruidos extraños.
• Hago caras y saco la lengua.
• Me muevo mucho.

Suscribirse

Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Chrome Developers 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 de Chrome.