Tenga en cuenta lo siguiente:
- Usa
ScrollTimelineyViewTimelinepara crear animaciones basadas en desplazamientos 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 compartir contextos innecesarios.
- 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.
- Además, hay mucho más.
Soy Adriana Jara. Analicémoslas y veamos las novedades para desarrolladores en Chrome 115.
Animaciones basadas en desplazamientos
Las animaciones basadas en desplazamientos son un patrón común de UX 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 basadas en desplazamientos también pueden crear elementos que se atenúan a medida que se visualizan:
De forma predeterminada, se ejecuta una animación adjunta a un elemento 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 la hora del reloj. 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 particular.
- Cronograma del progreso de visualización: Es un cronograma vinculado a la posición relativa de un elemento particular dentro de su contenedor de desplazamiento.
A continuación, se incluye una muestra 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 las animaciones de desplazamiento hacia el automóvil para obtener todos los detalles y más ejemplos.
Marcos cercados
Privacy Sandbox es una iniciativa que tiene como objetivo crear tecnologías que protejan la privacidad de las personas en línea y brindar herramientas a los desarrolladores para crear negocios digitales prósperos.
Muchas de sus propuestas tienen como objetivo satisfacer 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 entre sitios no particionados en un entorno seguro.
Para preservar la privacidad, algunas de estas APIs requieren una nueva forma de incorporar contenido. La solución se llama marco vallado.
Los marcos vallados 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 el 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.
| Atributo | iframe |
fencedframe |
|---|---|---|
| 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 de contenido incorporado | Sí | No |
Atributos observables, como name |
Sí | No |
URL (http://example.com) |
Sí | Sí (depende del caso de uso) |
Fuente opaca administrada por el navegador (urn:uuid) |
No | Sí |
| Acceso a datos entre 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 vallado. news.example no puede robar datos del anuncio de shoes.example, y shoes.example no puede aprender datos de origen de news.example.
Consulta estos artículos para obtener documentación sobre los marcos protegidos, la API de Protected Audience, el almacenamiento compartido y mucho más.
API de Topics
En el pasado, se utilizaban cookies de terceros y otros mecanismos para hacer un seguimiento del comportamiento de navegación de los usuarios en distintos sitios y, así, inferir temas de interés. Estos mecanismos se eliminarán 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, preserva 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 temas que parecen ser de interés para el usuario en función de 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 más información sobre el usuario o 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 usar la API de Topics.
Y mucho más.
Por supuesto que hay mucho más.
- El tamaño máximo de un
WebAssembly.Moduleen el subproceso principal aumentó a 8 megabytes - La propiedad
displayde CSS ahora acepta varias palabras clave como valor, además de las palabras clave heredadas precompuestas. - Existe 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 abarca solo algunos aspectos destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 115.
- Novedades de las Herramientas para desarrolladores de Chrome (115)
- Bajas y eliminaciones de 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 día, suscríbete al canal de YouTube de Chrome Developers. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.
Soy Adriana Jara. En cuanto se lance Chrome 116, estaré aquí para contarte las novedades de Chrome.