Presentamos la API de popover

Una Kravets

Los pop-ups están en todas partes de la Web. Puedes verlas en menús, sugerencias de activación y diálogos, que podrían manifestarse como parámetros de configuración de la cuenta, widgets de divulgación y vistas previas de tarjetas de productos. A pesar de la prevalencia de 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, estará disponible un nuevo conjunto de APIs de HTML declarativas para compilar ventanas emergentes en los navegadores, comenzando con la API de popover en Chromium 114.

El atributo emergente

En lugar de administrar toda la complejidad por tu cuenta, puedes dejar que el navegador la controle con el atributo popover y el conjunto de funciones posterior. Compatibilidad con ventanas emergentes HTML:

• Promoción a la capa superior. Las ventanas emergentes aparecerán en una capa independiente sobre el resto de la página, de modo que no tengas que preocuparte por el índice z.
• Funcionalidad de descarte con luz. Si haces clic fuera del área del cuadro emergente, este se cerrará y se restablecerá el enfoque.
• Administración de enfoque predeterminada. Al abrir la ventana emergente, la pestaña siguiente se detiene dentro de ella.
• Vinculaciones de teclas accesibles. Si presionas la tecla esc, se cerrará la ventana emergente y se devolverá 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. Una ventana emergente básica requiere tres cosas:

• Un atributo popover en el elemento que contiene la ventana emergente.
• Un id en el elemento que contiene el popover.
• Un popovertarget con el valor del id de la ventana emergente en el elemento que abre la ventana emergente

<button popovertarget="my-popover"> Open Popover </button>

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

Ahora tienes una ventana emergente básica que funciona correctamente.

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 una ventana emergente con un popovertarget significa que el botón o elemento que abre la ventana emergente la abrirá y cerrará. Sin embargo, también puedes crear ventanas emergentes explícitas con popovertargetaction. Esto anula la acción de activación predeterminada. Entre las opciones de popovertargetaction, se incluyen las siguientes:

popovertargetaction="show": Muestra la ventana emergente. popovertargetaction="hide": Oculta la ventana emergente.

Con popovertargetaction="hide", puedes crear un botón "Cerrar" dentro de una ventana emergente, 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 ventana emergente: una ventana emergente manual. No fuerzan el cierre de ningún otro tipo de elemento ni se cierran con la función Light-Dismiss. Debes cerrarlos mediante un temporizador o una acción de cierre explícita. Los tipos de ventanas emergentes adecuados para popover=manual son elementos que aparecen y desaparecen, pero que no deben afectar al resto de la página, como una notificación de tostada.

Si exploras la demostración anterior, puedes ver que, si haces clic fuera del área de la ventana emergente, no se descartará la ventana emergente. Además, si hubiera otros popovers abiertos, no se cerrarían.

Para revisar las diferencias, sigue estos pasos:

Notificaciones emergentes con popover=auto:

• Cuando se abran, fuerza el cierre de otras ventanas emergentes.
• Se puede descartar con la luz.

Notificaciones emergentes con popover=manual:

• No fuerces el cierre de 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.

Estilos emergentes

Hasta ahora, aprendiste sobre ventanas emergentes básicas 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 las ventanas emergentes auto, es una capa que se encuentra directamente debajo de la capa superior (donde se encuentra la ventana emergente), que se ubica por encima del 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. Y si bien ahora puedes crear experiencias similares a las de diálogos modales con popover="auto", existen algunas diferencias clave entre los dos:

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 el descarte de luz. Una 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, está planificado para una próxima versión de Chromium, muy después de esta.

Con la capacidad de animar propiedades discretas y el uso de :popover-open y @starting-style, podrás configurar estilos previos y posteriores a los cambios para permitir transiciones fluidas al abrir y cerrar ventanas emergentes. Tomemos el ejemplo anterior. Animación de entrada y salida se ve mucho más fluida 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, las ventanas emergentes también son útiles para menús, información sobre herramientas 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 del menú radial, se usa la API de ventana emergente junto con el posicionamiento del ancla de CSS para garantizar que la ventana emergente #menu-items siempre esté anclada a su activador, el botón #menu-toggle.

La configuración de anclas es similar a la de ventanas emergentes:

<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 a la línea de base del botón de activación de anclaje podría tener el siguiente estilo:

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

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

Conclusión

La API de popover es el primer paso de 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

• Los diálogos y las ventanas emergentes parecen similares. ¿En qué se diferencian?
• Semántica y el atributo emergente
• Documentación de MDN sobre los popovers
• Explicación de la ventana emergente de OpenUI