Novedades de Chrome 115

Tenga en cuenta lo siguiente:

  • Usa ScrollTimeline y ViewTimeline para crear animaciones impulsadas por el desplazamiento que mejoren la experiencia del usuario.
  • Los marcos vallados funcionan junto con otras APIs de Privacy Sandbox para incorporar contenido relevante y, al mismo tiempo, evitar el uso compartido innecesario de contexto.
  • Con la API de Topics, el navegador puede compartir información con terceros sobre los intereses de un usuario y, al mismo tiempo, preservar la privacidad.
  • Y hay mucho más.

Soy Adriana Jara. Entremos de lleno en las novedades para desarrolladores de Chrome 115.

Animaciones impulsadas por el desplazamiento

Las animaciones impulsadas por el desplazamiento son un patrón de UX común en la Web. Una animación basada en desplazamientos está vinculada a la posición de desplazamiento de un contenedor de desplazamiento. Esto significa que, a medida que te desplazas hacia arriba o hacia abajo, la animación vinculada avanza o retrocede en respuesta directa.

En los siguientes ejemplos, se muestran algunos casos de uso. Por ejemplo, puedes crear indicadores de lectura que se muevan a medida que te desplazas:

Es un indicador de lectura en la parte superior de un documento, controlado por el desplazamiento.

Las animaciones impulsadas por el desplazamiento también pueden crear elementos que se atenúan a medida que aparecen:

Las imágenes de esta página se muestran gradualmente a medida que aparecen.

De forma predeterminada, una animación que se adjunta a un elemento se ejecuta en el cronograma del documento. Su hora de origen comienza en 0 cuando se carga la página y comienza a avanzar a medida que avanza el tiempo. En eso consiste el cronograma predeterminado para animaciones y, hasta el día de hoy, era el único al que se podía acceder.

La Especificación de animaciones basadas en desplazamientos define dos tipos nuevos de cronogramas que puedes usar:

  • Cronograma del progreso del desplazamiento: Es un cronograma vinculado a la posición de desplazamiento de un contenedor de desplazamiento a lo largo de un eje en particular.
  • Cronograma del progreso de visualización: Es un cronograma vinculado a la posición relativa de un elemento en particular dentro de su contenedor de desplazamiento.

Este es un ejemplo de código que usa un cronograma anónimo del progreso del desplazamiento para crear un indicador de progreso de lectura fijo en la parte superior del viewport.

<body>
  <div id="progress"></div>
  …
</body>
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Lee Animaciones de desplazamiento para obtener todos los detalles y más ejemplos.

Marcos vallados

Privacy Sandbox es una iniciativa que tiene como objetivo crear tecnologías que protejan la privacidad en línea de las personas y, al mismo tiempo, brindarles a los desarrolladores herramientas para crear negocios digitales prósperos.

Muchas de sus propuestas tienen como objetivo satisfacer los casos de uso entre sitios sin cookies de terceros ni otros mecanismos de seguimiento. Por ejemplo:

Para preservar la privacidad, algunas de estas APIs requieren una nueva forma de incorporar contenido. La solución se denomina marco cercado.

Los marcos delimitados funcionan en combinación con otras propuestas de Privacy Sandbox para mostrar documentos de diferentes particiones de almacenamiento en una sola página.

Un marco vallado es un elemento HTML para contenido incorporado, similar a un iframe. A diferencia de los iframes, un marco vallado limita la comunicación con su contexto de incorporación para permitir que el marco acceda a datos de varios sitios sin compartirlos con el contexto de incorporación.

Del mismo modo, los datos de origen en el contexto de incorporación no se pueden compartir con el marco vallado.

Función iframe fencedframe
Cómo incorporar contenido
El contenido incorporado puede acceder al DOM del contexto de incorporación No
El contexto de incorporación puede acceder al DOM del contenido incorporado No
Atributos observables, como name No
URLs (http://example.com) Sí (depende del caso de uso)
Fuente opaca administrada por el navegador (urn:uuid) No
Acceso a datos de varios sitios No Sí (depende del caso de uso)

Por ejemplo, supongamos que news.example (el contexto de incorporación) incorpora un anuncio de shoes.example en un marco cercado. news.example no puede extraer datos del anuncio de shoes.example, y shoes.example no puede obtener datos de origen de news.example.

Una comparación del estado anterior y posterior de la partición de almacenamiento.

Consulta estos artículos para consultar documentación sobre Fenced Frames, la API de Protected Audience, el almacenamiento compartido y mucho más

API de Topics

En el pasado, se utilizaron cookies de terceros y otros mecanismos para hacer un seguimiento del comportamiento de navegación de los usuarios en diferentes sitios y así inferir temas de interés. Estos mecanismos se están eliminando gradualmente como parte de la iniciativa de Privacy Sandbox.

La API de Topics permite que un navegador comparta información con terceros sobre los intereses de un usuario y, al mismo tiempo, preserve la privacidad.

La API de Topics habilita la publicidad basada en intereses (IBA) sin hacer un seguimiento de los sitios que visita un usuario. El navegador observa y registra los temas que parecen ser de interés para el usuario, según su actividad de navegación. Esta información se registra en el dispositivo del usuario.

Por ejemplo, la API podría sugerir el tema "Fiber & Textile Arts" a un usuario que visita el sitio web knitting.example.

Los temas son un indicador que ayuda a las plataformas de tecnología publicitaria a seleccionar anuncios relevantes. A diferencia de las cookies de terceros, esta información se comparte sin revelar información adicional sobre el usuario ni su actividad de navegación.

Lee la descripción general de Privacy Sandbox para obtener todos los detalles sobre la taxonomía de temas y el uso de la API de Topics.

Y mucho más.

Por supuesto, hay mucho más.

  • El tamaño máximo de un WebAssembly.Module en el subproceso principal aumentó a 8 megabytes.
  • La propiedad display de CSS ahora acepta varias palabras clave como valor, además de las palabras clave heredadas precompuestas.
  • Hay una prueba de origen para la API de Compute Pressure, que ofrece información de alto nivel sobre el estado actual del hardware del dispositivo.

Lecturas adicionales

Esto solo abarca algunos aspectos clave. Consulta los vínculos que aparecen a continuación para ver cambios adicionales en Chrome 115.

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Adriana Jara y, en cuanto se lance Chrome 116, estaré aquí para contarte las novedades.