Presentamos la API de popover

Una Kravets

Los pop-ups están en todas partes de la Web. Puedes verlos en menús, sugerencias de activación y diálogos, que pueden manifestarse como parámetros de configuración de la cuenta, widgets de divulgación y vistas previas de tarjetas de productos. A pesar de lo comunes que son estos componentes, compilarlos en navegadores sigue siendo sorprendentemente engorroso. Debes agregar secuencias de comandos para administrar el enfoque, los estados de apertura y cierre, los hooks accesibles en los componentes, las vinculaciones de teclado para ingresar y salir de la experiencia, y todo esto incluso antes de comenzar a compilar la funcionalidad principal, útil y única de tu popover.

Para resolver este problema, los navegadores incorporarán un nuevo conjunto de APIs de HTML declarativas para compilar ventanas emergentes, comenzando con la API de popover en Chromium 114.

El atributo popover

Navegadores compatibles

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Origen

En lugar de administrar toda la complejidad por tu cuenta, puedes permitir que el navegador la controle con el atributo popover y el conjunto de funciones subsiguientes. Los pop-overs HTML admiten lo siguiente:

  • Promoción a la capa superior. Las ventanas emergentes aparecerán en una capa independiente sobre el resto de la página, por lo que no tendrás que preocuparte por el índice Z.
  • Función de descarte de luz Si haces clic fuera del área del cuadro emergente, este se cerrará y se restablecerá el enfoque.
  • Administración de enfoque predeterminada. Si abres el cuadro emergente, el siguiente punto de parada de pestaña se ubicará dentro de él.
  • Vinculaciones de teclas accesibles. Si presionas la tecla esc, se cerrará el menú emergente y se restablecerá el enfoque.
  • Vinculaciones de componentes accesibles. Conectar un elemento de popover a un activador de popover semánticamente

Ahora puedes crear ventanas emergentes con todas estas funciones sin usar JavaScript. Un popover básico requiere tres elementos:

  • Un atributo popover en el elemento que contiene el popover
  • Un id en el elemento que contiene el popover.
  • Un popovertarget con el valor del id del popover en el elemento que lo abre.
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Ahora tienes un popover básico completamente funcional.

Este pop-up se puede usar para transmitir información adicional o como un widget de divulgación.

Valores predeterminados y anulaciones

De forma predeterminada, como en el fragmento de código anterior, configurar un cuadro emergente con un popovertarget significa que el botón o elemento que lo abre lo abrirá y cerrará. Sin embargo, también puedes crear ventanas emergentes explícitas con popovertargetaction. Esto anula la acción de activación predeterminada. Estas son algunas opciones de popovertargetaction:

popovertargetaction="show": Muestra el popover. popovertargetaction="hide": Oculta el popover.

Con popovertargetaction="hide", puedes crear un botón “cerrar” dentro de un popover, como en el siguiente fragmento:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Ventanas emergentes automáticas y manuales

El uso del atributo popover por sí solo es un atajo para popover="auto". Cuando se abra, el popover predeterminado forzará el cierre de otros popovers automáticos, excepto los popovers superiores. Se puede descartar con la función de descarte ligero o con un botón de cierre.

Por otro lado, configurar popover=manual crea otro tipo de popover: uno manual. No fuerzan el cierre de ningún otro tipo de elemento ni se cierran con la acción de descartar con la luz. Debes cerrarlos con un temporizador o una acción de cierre explícita. Los tipos de popovers adecuados para popover=manual son elementos que aparecen y desaparecen, pero no deben afectar al resto de la página, como una notificación de tostada.

Si exploras la demostración anterior, verás que hacer clic fuera del área del cuadro emergente no lo oculta. Además, si hubiera otros popovers abiertos, no se cerrarían.

Para revisar las diferencias, haz lo siguiente:

Notificaciones emergentes con popover=auto:

  • Cuando se abra, cierra de manera forzosa otros pop-ups.
  • Se puede descartar con la luz.

Notificaciones emergentes con popover=manual:

  • No cierres de forma forzosa ningún otro tipo de elemento.
  • No descartar con la luz. Ciérralos con un botón de activación o una acción de cierre.

Aplica diseño a los menús flotantes

Hasta ahora, aprendiste sobre los pop-overs básicos en HTML. Sin embargo, también hay algunas funciones de diseño interesantes que se incluyen con popover. Una de ellas es la capacidad de aplicar diseño a ::backdrop.

En los popovers de auto, esta es una capa directamente debajo de la capa superior (donde se encuentra el popover), que se encuentra sobre el resto de la página. En el siguiente ejemplo, se le asigna un color semitransparente a ::backdrop:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

La diferencia entre un popover y un dialog

Es importante tener en cuenta que el atributo popover no proporciona semántica por sí solo. Si bien ahora puedes crear experiencias similares a diálogos modales con popover="auto", existen algunas diferencias clave entre ambos:

Un elemento dialog abierto con dialog.showModal (un diálogo modal) es una experiencia que requiere una interacción explícita del usuario para cerrar el diálogo modal. Un popover admite la eliminación ligera. Un dialog modal no lo hace. Un diálogo modal hace que el resto de la página sea inerte. Un popover no lo hace.

.

La demostración anterior es un diálogo semántico con comportamiento de popover. Esto significa que el resto de la página no es inerte y que el cuadro emergente de diálogo tiene un comportamiento de descarte ligero. Puedes compilar este diálogo con el comportamiento de popover con el siguiente código:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

Próximamente

Entrada y salida interactivas

La capacidad de animar propiedades discretas, incluidas las animaciones hacia y desde display: none, y las animaciones hacia y desde la capa superior aún no están disponibles en los navegadores. Sin embargo, se planean para una versión futura de Chromium, que seguirá de cerca este lanzamiento.

Con la capacidad de animar propiedades discretas y usar :popover-open y @starting-style, podrás configurar estilos antes y después del cambio para habilitar transiciones fluidas cuando abras y cierres los pop-overs. Tomemos el ejemplo anterior. Animarlo hacia adentro y hacia afuera se ve mucho más fluido y admite una experiencia del usuario más fluida:

Posicionamiento de la ancla

Los pop-ups son excelentes cuando deseas posicionar una alerta, un elemento modal o una notificación según el viewport. Sin embargo, los pop-overs también son útiles para los menús, las herramientas de ayuda y otros elementos que deben posicionarse en relación con otros elementos. Aquí es donde entra en juego el anclaje de CSS.

En la siguiente demostración de menú radial, se usa la API de popover junto con el posicionamiento de ancla de CSS para garantizar que el popover #menu-items siempre esté anclado a su activador de activación, el botón #menu-toggle.

La configuración de los anclajes es similar a la de los pop-overs:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

Para configurar un ancla, debes asignarle un id (en este ejemplo, #menu-toggle) y, luego, usar anchor="menu-toggle" para conectar los dos elementos. Ahora, puedes usar anchor() para aplicar diseño al popover. Un menú emergente centrado que está anclado al modelo de referencia del botón de activación de la fijación podría tener el siguiente diseño:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}
.

Ahora tienes un menú flotante completamente funcional que está anclado al botón de activación y tiene todas las funciones integradas del menú flotante, sin necesidad de JavaScript.

Conclusión

La API de popover es el primer paso en una serie de nuevas funciones para facilitar la administración de aplicaciones web y hacerlas más accesibles de forma predeterminada. Me entusiasma ver cómo usas los popovers.

Lecturas adicionales