La API de Popover llega a Baseline

Una Kravets

¡Falta muy poco! Una de las funciones que más me entusiasman se lanzó en todos los navegadores modernos y es oficialmente parte de Baseline 2024. Y esta función es la API de Popover. La ventana emergente ofrece muchísimas primitivas y posibilidades de desarrolladores increíbles para crear interfaces en capas, como información sobre herramientas, menús, IUs de enseñanza y mucho más.

Navegadores compatibles

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

Origen

Estos son algunos puntos destacados sobre las capacidades de las ventanas emergentes:

  • Asciende a la capa superior. Las ventanas emergentes aparecerán en la capa superior, encima del resto de la página, para que no tengas que jugar con z-index.
  • 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 o actívalas dos veces, se cerrará la ventana emergente y se volverá a enfocar.
  • Vinculaciones de componentes accesibles. La conexión de un elemento emergente con un activador emergente se activa de manera semántica.

Cómo crear ventanas emergentes

Crear ventanas emergentes es bastante sencillo. Si deseas usar valores predeterminados, solo necesitas un button para activar la ventana emergente y un elemento.

  • Primero, establece un atributo popover en el elemento que será la ventana emergente.
  • Luego, agrega un id único en el elemento emergente.
  • Por último, para conectar el botón al elemento emergente, configura el popovertarget del botón en el valor del id del elemento emergente.

Este proceso se muestra en el siguiente código:

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

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
Un ejemplo básico del uso del atributo emergente.

Para tener un control más detallado sobre la ventana emergente, puedes establecer explícitamente los tipos de ventanas emergentes. Por ejemplo, usar un atributo popover simple sin valor equivale a popover="auto". El valor auto habilita el comportamiento de descartar la luz y cierra automáticamente otras ventanas emergentes. Usa popover="manual" y tendrás que agregar un botón de cierre. Las ventanas emergentes manuales no cerrarán otras ventanas emergentes ni permitirán que los usuarios descarten la ventana emergente haciendo clic fuera de la IU. Para crear una ventana emergente manual, usa lo siguiente:

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

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
Un ejemplo de una ventana emergente manual.

Diálogo emergente versus modal

Puede que te preguntes si necesitas una ventana emergente cuando existe un diálogo, y la respuesta es: es posible que no.

Es importante tener en cuenta que el atributo emergente no proporciona semántica por sí solo. Y si bien ahora puedes crear experiencias similares a las de diálogos modales con elementos emergentes, existen algunas diferencias clave entre los dos:

El elemento modal <dialog>

  • Se abrió con dialog.showModal().
  • Cerró con dialog.close().
  • Hace que el resto de la página se vuelva inerte.
  • No es compatible con el comportamiento de descartar la luz.
  • Puedes definir el diseño del estado abierto con el atributo [open].
  • Representa semánticamente un componente interactivo que bloquea la interacción con el resto de la página.

El atributo [popover]

  • Se puede abrir con un invocador declarativo (popovertarget).
  • Se cerró con popovertarget (ventana emergente automática) o popovertargetaction=hide (ventana emergente manual).
  • No hace que el resto de la página esté inerte.
  • Admite el comportamiento de descartar la luz.
  • Puedes definir el diseño del estado abierto con la seudoclase :popover-open.
  • Sin semántica inherente

Conclusión y lectura adicional

popover aporta a la plataforma muchas funciones interesantes. Para obtener más información sobre esta API, incluidos más datos sobre la accesibilidad de la función y la documentación relacionada con el conjunto de atributos, aquí hay algunas lecturas recomendadas para obtener más información: