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.
  • Establece el comportamiento de inicio de tu app web con launch_handler en el manifiesto.
  • usar el atributo credentialless en iframes para incorporar contenido de terceros que no establezca una política de incorporación multiorigen
  • Además, hay mucho más.

Soy Adriana Jara. Analicémoslas y veamos las novedades para desarrolladores en Chrome 110.

Pseudoclase :pantalla en pantalla

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 continúen 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.

En el siguiente fragmento, se muestra cómo usar la clase 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 el elemento sea transparente y pueda mostrar el mensaje correctamente.

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

miembro del manifiesto launch_handler.

La API de Launch Handler te permite controlar el modo en que se inicia la app web. Por ejemplo, si usa una ventana existente o una nueva, y si la ventana elegida se dirige a la URL de inicio.

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

Ahora, con las apps web de los miembros del manifiesto de launch_handler, puedes personalizar su comportamiento de inicio.

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

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

credentialless iframes.

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 frasco de cookies vacío.

Del mismo modo, las APIs de almacenamiento, como LocalStorage, CacheStorage, etc., cargan y almacenan datos en la nueva partición efímera. Se libera todo este almacenamiento 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 para usar credentialless de forma segura para cargar contenido de terceros en tus iframes.

Y mucho más.

Y, por supuesto, hay mucho más.

Web SQL ahora se quita en contextos no seguros.

La propiedad initial-letter de CSS proporciona una forma de establecer el número de líneas que una letra inicial debe humedecer en las siguientes líneas de texto.

FileSystemHandle ahora incluye un método remove().

Lecturas adicionales

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

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