Novedades de Chrome 69

Pete LePage

Pasaron diez años desde que se lanzó Chrome por primera vez. Muchas cosas cambiaron desde entonces, pero nuestro objetivo de construir una base sólida para las aplicaciones web modernas no ha hecho.

En Chrome 69, agregamos compatibilidad con lo siguiente:

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

Además, hay mucho 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.

Ajustes de desplazamiento de CSS

Ver demostración | Fuente

CSS Scroll Snap te permite crear experiencias de desplazamiento fluidas y fluidas mediante la declaración de posiciones de ajuste de desplazamiento que le indican al navegador dónde debe 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 deseas que el usuario se desplace hasta 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 desplace por el carrusel, se desplazará cada imagen 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 de CSS funciona bien, incluso cuando los objetivos de ajuste tienen diferentes tamaños o son más grandes que la barra de desplazamiento. Consulta la entrada Desplazamiento bien controlado con ajuste de desplazamiento de CSS para obtener más detalles y muestras que puedes probar.

Cortes de pantalla (también conocidos como muescas)

Teléfono celular con recorte de pantalla
Los navegadores agregan un margen adicional en los dispositivos móviles con corte de pantalla para evitar que el corte cubra el contenido.

Se lanzan cada vez más dispositivos móviles con un corte de pantalla, a veces conocido como recorte. Para solucionar esto, los navegadores agregan un poco de margen adicional a tu página para que el contenido no quede oscurecido por el recorte.

¿Pero qué sucede si quieres usar ese espacio?

Con las variables de entorno de CSS y la metaetiqueta 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 de la metaetiqueta 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 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, retenerlo mientras se realiza un trabajo y, luego, liberarlo. Mientras se mantiene el bloqueo, ninguna otra secuencia de comandos en el 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 en la que se 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 Manual de bloqueo de Web e incluye una explicación más detallada y muchos ejemplos. También puedes profundizar y revisar la spec.

Y mucho más.

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

gradiente cónico

  • Desde la especificación CSS4, ahora puedes crear transiciones de color alrededor de la circunferencia de un círculo mediante gradientes cónicos. Lea Verou tiene un polyfill conic-gradient() de CSS que puedes usar, y la página incluye muchas muestras geniales enviadas 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 tienen dos métodos nuevos: flat() y flatMap(). Muestran un array nuevo con todos los elementos de subarrays integrados.
  • Por su parte, OffscreenCanvas traslada el trabajo del subproceso principal a un trabajador, lo que ayuda a eliminar los cuellos de botella de rendimiento.

Sorpresas

¿Encontraste todos los huevos de pascua del video?

Queremos dar un agradecimiento especial a todas las personas que nos ayudaron a publicar los 28 episodios de New in 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 saber cuánto ha avanzado la función Novedades de Chrome desde nuestro primer episodio? Mira este divertido video de progreso de 30 segundos que muestra nuestro historial desde el primer video hasta el día de hoy.

Y, por supuesto, gracias por mirar el video y proporcionarnos tus comentarios. Leí todos los comentarios y me tomo en serio sus sugerencias. ¡Estos videos mejoraron gracias a ti!

Gracias por mirar este video.

Novedades de metidas de pata de Chrome

Armamos una divertida y divertida colección de metidas de pata para que disfrutes. Después de verlo, aprendí algunas cosas:

  • Cuando tropiezo sobre mis palabras, hago algunos ruidos extraños.
  • Hago caras y saco la lengua.
  • Me muevo mucho.

Suscribirse

Si quieres mantenerte al día con nuestros videos, suscríbete a nuestro canal de YouTube para desarrolladores de Chrome. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

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