Novedades de Chrome 110

Adriana Jara

Tenga en cuenta lo siguiente:

  • Agrega un estilo personalizado a tus elementos de pantalla en pantalla con la nueva pseudoclase :picture-in-picture.
  • Configura el comportamiento de inicio de tu app web con launch_handler en tu manifiesto.
  • Usa el atributo credentialless en los iframes para incorporar contenido de terceros que no establezca una política de incorporaciones de origen cruzado.
  • Hay mucho más

Soy Adriana Jara. Veamos las novedades para desarrolladores en Chrome 110.

Seudoclase :picture-in-picture

Con la API de Pantalla en pantalla, los sitios web pueden crear una ventana de video flotante, siempre en la parte superior, para que los usuarios sigan consumiendo contenido multimedia mientras interactúan con otro contenido.

Ahora, con la pseudoclase :picture-in-picture de CSS, puedes agregar estilos a los elementos para mejorar la experiencia.

El siguiente fragmento muestra cómo usar la clase de pantalla en pantalla para agregar un mensaje al contenedor de video que le recuerde al usuario que el video se está reproduciendo en otro lugar.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

Vuelve a usar la seudoclase en el elemento de video para que sea transparente y muestre el mensaje correctamente.

Juega con el ejemplo y mejora tus experiencias de video en pantalla en pantalla.

Miembro del manifiesto launch_handler.

La API de Launch Handler te permite controlar cómo se inicia tu app web. Por ejemplo, si usa una ventana existente o una nueva, y si se navega a la URL de inicio desde la ventana elegida.

Veamos un ejemplo: en los entornos de computadoras, si instalas una app y, luego, la visitas en el navegador, hay un botón para ir a la ventana de la app independiente. Anteriormente, el único comportamiento posible era iniciar la app en una ventana nueva.

Ahora, con el miembro del manifiesto launch_handler, las apps web pueden personalizar su comportamiento de inicio.

Por ejemplo, el siguiente fragmento hace que todos los inicios de esta app web se enfoquen en una ventana de app existente y naveguen a ella (si existe) en lugar de iniciar siempre una ventana nueva.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

Iframes de credentialless

Uno de los mayores desafíos del aislamiento de origen cruzado es que todos los iframes de origen cruzado deben implementar COEP y CORP . El navegador no cargará un iframe sin esos encabezados.

El atributo credentialless ayuda a incorporar iframes de terceros que no establecen estos encabezados.

Con credentialless, el iframe se carga desde un contexto diferente y vacío. En particular, se carga sin cookies. El iframe comienza con un almacén de cookies vacío.

Del mismo modo, las APIs de almacenamiento, como LocalStorage, CacheStorage, etcétera, cargan y almacenan datos en la nueva partición efímera. Todo este almacenamiento se borra una vez que se descarga el documento de nivel superior. Esto permite quitar la restricción de COEP.

Obtén más información en este artículo sobre cómo usar credentialless de forma segura para cargar contenido de terceros en tus iframes.

Y mucho más.

Y, por supuesto, hay mucho más.

WebSQL ahora se quita en contextos no seguros.

La propiedad initial-letter de CSS proporciona una forma de establecer la cantidad de líneas en las que una letra inicial debe hundirse en las siguientes líneas de texto.

FileSystemHandle ahora incluye un método remove().

Lecturas adicionales

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

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 111, estaré aquí para contarte las novedades.