popover

<< Details

El atributo popover, y sus APIs vinculadas (comandos nativos y anclaje CSS) siguen la filosofía de delegar tareas interactivas al motor de renderizado nativo del navegador para eliminar la dependencia de JavaScript, mejorando drásticamente el rendimiento, la fluidez en móviles y la accesibilidad.

El atributo global popover

Convierte cualquier etiqueta estructural (como un <div> o <nav>) en un elemento flotante ligero, como un menú contextual o una notificación.

  • Top Layer nativo: El navegador extrae el elemento del flujo normal del documento y lo renderiza en una capa superior exclusiva. Esto garantiza que siempre se muestre por encima del resto de la interfaz sin generar conflictos con la propiedad z-index de CSS.
  • Cierre ligero (Light Dismiss): Al definir popover="auto", el motor asume el comportamiento de cierre sin programar eventos. El menú desaparecerá automáticamente si el usuario pulsa la tecla Escape o hace clic en cualquier zona exterior al contenedor.

Invokers commands (commandFor y command)

Esta API experimental sustituye los clásicos detectores de eventos (onclick o addEventListener en JS) por atributos semánticos puramente HTML.

  • commandfor="id-destino": Se coloca en un y lo vincula lógicamente con el identificador único (id) del popover que debe controlar.
  • command="acción": Especifica la instrucción nativa que ejecutará el botón. Los valores orientados a esta herramienta son show-popover (solo abrir), hide-popover (solo cerrar) y toggle-popover (alternar entre abrir y cerrar).

CSS Anchor positioning (anchor-name position-anchor)

Tradicionalmente, pegar un menú desplegable justo debajo de un botón requería funciones JavaScript complejas (getBoundingClientRect) para calcular coordenadas exactas en tiempo real. Esta API traslada ese cálculo a CSS puro.

  • anchor-name: --mi-boton;: Se aplica al elemento disparador (el botón) para registrarlo en el sistema como un punto físico de referencia.
  • position-anchor: --mi-boton;: Se aplica al popover para indicarle que debe rastrear y seguir las coordenadas de ese elemento ancla específico, ignorando el centrado predeterminado en la pantalla.
  • position-area (o inset-area en sintaxis previa): Permite colocar el popover con valores declarativos directos (como bottom, top, left). El motor del navegador calcula automáticamente colisiones; por ejemplo, si indicas bottom pero el usuario hace scroll y el botón llega al borde inferior de la pantalla, el popover se redibujará inteligentemente en la parte superior.

Al unificar estas tecnologías, consigues componentes interactivos completos de forma nativa. De esta forma, se reduce significativamente el peso de descarga al ahorrar archivos JavaScript externos de la web.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Ponemos un poco de CSS porque sino es muy cutre -->
    <link rel="stylesheet" href="style.css">
    <title>Popover rules!</title>
</head>

<body>
    <button commandFor="account-menu" command="toggle-popover">
        <span class="avatar">HTML y CSS</span>
        <span>Rosa Medina</span>
    </button>

    <div id="account-menu" popover>
        <p>Plantas</p>
        <p>Bicicletas</p>
        <p>Jamones</p>
    </div>
</body>

</html>

<< Details