Las notificaciones de aviso son mensajes de estado transitorios. A diferencia de los menús, no deben cerrarse cuando un usuario interactúa con otras partes de la página. El estado popover="manual" es ideal porque carece del comportamiento de "cierre rápido" y permite que coexistan varias notificaciones.
Lineamientos de implementación
- OBLIGATORIO: Usa popover="manual" para que la notificación permanezca visible hasta que se cierre de forma explícita o se agote el tiempo de espera de una secuencia de comandos.
- SÍ usa un contenedor para administrar el apilamiento de varios mensajes de aviso. Como los popovers de la capa superior ignoran el índice z superior, debes posicionarlos de forma individual o dentro de un grupo de diseño común.
- SÍ usa sibling-index() para agregar margen entre las notificaciones de aviso para que los elementos que se encuentran más abajo en la pila sean visibles.
- SÍ proporciona un botón "Cerrar" explícito dentro del mensaje de aviso con popovertargetaction="hide".
- SÍ uses JavaScript para los temporizadores de cierre automático (p.ej., llamar a hidePopover() después de 3,000 ms).
- SÍ utiliza transition-behavior: allow-discrete para animar la entrada y salida de la capa superior.
Estrategias de resguardo
Resguardos y compatibilidad de navegadores para Popover
La API de Popover es, en su mayor parte, una mejora progresiva, pero sus comportamientos definitorios (promoción de la capa superior, cierre rápido y la invocación de popovertarget) no tienen un equivalente solo de CSS. Los navegadores más antiguos necesitan un polyfill o un resguardo manual si prefieres no enviar uno.
Polyfill: Para admitir el atributo popover en navegadores más antiguos, carga @oddbird/popover-polyfill de forma condicional. OBLIGATORIO: Detecta la función verificando la propiedad popover en HTMLElement.prototype y carga el polyfill solo cuando no haya compatibilidad nativa. NO lo cargues de forma incondicional.
Con un empaquetador o un mapa de importación:
// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
import("@oddbird/popover-polyfill");
}
Sin un empaquetador, importa desde una CDN dentro de un <script type="module">:
<script type="module">
if (!("popover" in HTMLElement.prototype)) {
import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
}
</script>
Advertencia de diseño: El polyfill no puede definir la pseudoclase :popover-open real, por lo que aplica una clase .\:popover-open en su lugar. OBLIGATORIO: Combina las dos con :is() o :where(); de lo contrario, los navegadores que no tengan :popover-open descartarán toda la regla:
[popover]:is(:popover-open, .\:popover-open) {
display: block;
}
Como alternativa, para un resguardo heredado sin un polyfill, usa position: fixed y calcula manualmente las coordenadas a través de getBoundingClientRect() o confía en el posicionamiento predeterminado con inset: auto si eso es aceptable para el caso de uso.
sibling-index()
- Orientación: Si no se admite sibling-index(), usa el operador
+para agregar margen de forma manual. Es decir,popover + popover { margin-top: 1rem }
anchor-positioning
- Orientación: Usa el polyfill de posicionamiento de anclaje de CSS. Para un resguardo que no sea un polyfill, establece la información sobre la herramienta en una posición fija en la parte inferior del viewport con
@supports not (anchor-name: --foo).
transition-behavior
- Orientación: Si no se admite transition-behavior, usa JavaScript para agregar animación a través de clases a medida que el elemento de aviso de notificación entra y sale.