Tenga en cuenta lo siguiente:
- Usa
ScrollTimeline
yViewTimeline
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:
Las animaciones impulsadas por el desplazamiento también pueden crear elementos que se atenúan 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:
- La API de Protected Audience: Permite la publicación de anuncios basados en intereses de una manera que preserva la privacidad.
- Almacenamiento compartido: Permite el acceso a datos sin particionar entre sitios en un entorno seguro.
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 | Sí | Sí |
El contenido incorporado puede acceder al DOM del contexto de incorporación | Sí | No |
El contexto de incorporación puede acceder al DOM del contenido incorporado | Sí | No |
Atributos observables, como name |
Sí | No |
URLs (http://example.com ) |
Sí | Sí (depende del caso de uso) |
Fuente opaca administrada por el navegador (urn:uuid ) |
No | Sí |
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
.
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.
- Novedades de las Herramientas para desarrolladores de Chrome (115)
- Baja y eliminación de funciones en Chrome 115
- Actualizaciones de ChromeStatus.com para Chrome 115
- Lista de cambios del repositorio de código fuente de Chromium
- Calendario de lanzamientos de Chrome
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.