Las ventanas emergentes 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 enlaces accesibles a los componentes, las vinculaciones de teclado para entrar y salir de la experiencia, y eso es todo incluso antes de que empieces a crear la funcionalidad principal, útil y única de tu ventana emergente.
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:
- Asciende 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.
- Función de descarte ligero Si haces clic fuera del área de la ventana emergente, esta se cerrará y volverá al enfoque.
- Administración predeterminada del enfoque. Al abrir la ventana emergente, la pestaña siguiente se detiene dentro de ella.
- Vinculaciones de teclado accesibles. Si presionas la tecla
esc, se cerrará la ventana emergente y se devolverá el enfoque. - Vinculaciones de componentes accesibles. La conexión de un elemento emergente con un activador emergente se activa de manera semántica.
Ahora puedes crear ventanas emergentes con todas estas funciones sin usar JavaScript. Una ventana emergente básica requiere tres cosas:
- Un atributo
popoveren el elemento que contiene la ventana emergente. - Un
iden el elemento que contiene la ventana emergente. - Un
popovertargetcon el valor delidde 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.
Esta ventana emergente 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 o desactivació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, la popover predeterminada forzará el cierre de otras ventanas emergentes automáticas, excepto las principales. Se puede descartar con la función de descartar luz o 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 mediante 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 no deberían afectar el resto de la página, como un aviso.
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 otras ventanas emergentes abiertas, no se cerrarían.
Para revisar las diferencias, sigue estos pasos:
Ventanas emergentes con popover=auto:
- Cuando se abran, fuerza el cierre de otras ventanas emergentes.
- Puede descartarse con luz.
Ventanas emergentes con popover=manual:
- No fuerces el cierre de ningún otro tipo de elemento.
- No descartes 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, popover también incluye algunas funciones de diseño atractivas. 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, ::backdrop recibe un color semitransparente:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
Diferencia entre una popover y una 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 la interacción explícita del usuario para cerrar la ventana 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 se vuelva inerte. Un popover no lo hace.
La demostración anterior es un diálogo semántico con comportamiento emergente. Esto significa que el resto de la página no está inerte y que la ventana emergente del diálogo tiene un comportamiento que se descarta. Puedes compilar este diálogo con el comportamiento de ventana emergente usando 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 desde y hacia 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 antes y después de 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 del ancla
Las ventanas emergentes son excelentes cuando quieres posicionar una alerta, una ventana modal o una notificación en función del viewport. Pero 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 a la ventana emergente. 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 emergente es el primer paso de una serie de nuevas capacidades para facilitar la creación de aplicaciones web y más accesible de forma predeterminada. ¡Me entusiasma ver cómo utilizas las ventanas emergentes!