New in Chrome 118

Adriana Jara

Esto es lo que necesitas saber:

La API CloseWatcher permite una experiencia consistente al manejar solicitudes de cierre.
Implemente fácilmente un patrón de acordeón usando el <details> elemento.
Los informes de infracción de la política de permisos ya están disponibles.
Y hay mucho más.

Yo soy Adriana Jara. Profundicemos y veamos las novedades para los desarrolladores en Chrome 120.

API CloseWatcher.

Una característica importante de los componentes modal o popover es que son fáciles de cerrar, con un mecanismo consistente para hacerlo. Esos mecanismos se denominan solicitudes de cierre y suelen ser los ESC en plataformas de escritorio y el gesto o botón atrás en Android.

Los desarrolladores web no tenían una buena manera de manejar solicitudes cercanas de sus propios componentes. Esto es especialmente problemático en dispositivos Android, donde proporcionar un comportamiento de cierre simple para el gesto hacia atrás es bastante complejo.

Chrome 120 trae la solución con CloseWatcher, una nueva API para escuchar y responder directamente a solicitudes de cierre. También incluye actualizaciones de <dialog> y popover="" para utilizar la nueva funcionalidad de solicitud de cierre, para que respondan al botón Atrás de Android.

Consulta la demostración de la API CloseWatcher para probar la API.

Atributo name para `<details>`

El atributo name para <details> facilita la implementación del patrón de acordeón utilizando una secuencia de elementos HTML <details>.

Múltiples elementos <details> que tienen el mismo atributo name forman un grupo. Con esta configuración se puede abrir como máximo un elemento de ese grupo a la vez.

A continuación se muestra un ejemplo con un grupo que comparte el nombre "cookies":

<details name="cookies">
  <summary>Chispas de chocolate</summary>
  Yum yum chispas de chocolate.
</details>
<details name="cookies">
  <summary>Snickerdoodle</summary>
   Yum yum snickerdoodle.
</details>
<details name="cookies">
  <summary>Maicenitas</summary>
   Yum yum Maicenitas
</details>
<details name="cookies">
  <summary>Galletas de azúcar</summary>
   Yum yum galletas de azúcar
</details>

Informes de violación de la política de permisos

Los informes de infracción de políticas de permisos ahora están disponibles; estos informes integran el API de política de permisos que permite a los desarrolladores controlar las funciones del navegador disponibles para una página, sus iframes,y subrecursos, declarando un conjunto de políticas para que el navegador las aplique con el API de informes. La API de informes proporciona un mecanismo de generación de informes genérico que las aplicaciones web pueden utilizar para hacer que los informes estén disponibles en función de varias características de la plataforma.

Esta integración de la API de política de permisos y la API de informes permite a los desarrolladores web configurar endpoints a los que se enviarán informes de violación de la política de permisos, lo que permite a los propietarios de sitios ver cuándo se solicitan funciones no permitidas para sus páginas en vivo.

Controlar las funciones del navegador con la Política de permisos incluye más detalles de implementación.

¡Y más!

Por supuesto que hay mucho más.

El implementación relajada de anidamiento de CSS permite que las reglas de estilo anidadas comiencen con un elemento, en lugar de estar envueltas con is() o requerir un signo & delante.
Con la acción enterpictureinpicture en la API de sesión de medios, los sitios web pueden registrar un controlador de acciones que se puede utilizar para abrir una ventana Imagen en imagen o Imagen en imagen de documento.
Y un recordatorio de que Chrome está trabajando para desaprobar las cookies de terceros. En enero comienza un experimento que podría afectar su sitio web,por lo que es importante que consultes Preparación para el fin de las cookies de terceros para conocer los pasos de auditoría y mitigación.

Otras lecturas

Esto cubre sólo algunos aspectos destacados clave. Consulte los enlaces a continuación para Cambios adicionales en Chrome 120.