Prompt y alcance
Esta pregunta evalúa si "colocarlo junto al botón" se convierte en un contrato de diseño e interacción verificable. Cubre anchor-name, anchor(), posiciones candidatas, desbordamiento, desplazamiento (scroll), detección de características y comportamiento de teclado y foco para un menú o diálogo.
Qué está evaluando el entrevistador
- Una relación de anclaje estable y los roles de
position-area,anchor()y las posiciones de respaldo (fallback). - Visibilidad bajo los bordes del viewport, contenedores de desplazamiento, zoom y contenido dinámico.
- Mejora progresiva en lugar de una dependencia estricta de mediciones con JavaScript.
- Semántica y comportamiento correctos para menús, tooltips y diálogos.
- Verificación con matriz de navegadores, regresión visual, teclado y lectores de pantalla.
Estructura recomendada para la respuesta
Define el tipo de popover, el ancla y el área visible mínima. Proporciona la ruta de CSS con nombrado del ancla, posición preferida, alternativas de respaldo y reglas de ocultamiento. Luego, describe el fallback mediante @supports hacia el componente de posicionamiento existente, seguido de foco, desplazamiento, tamaño dinámico y pruebas.
Análisis en profundidad: posicionamiento utilizable y accesible
Crear un ancla estable
Asigna al activador (trigger) un anchor-name único; usa position-anchor o una referencia explícita en el popover. Para filas repetidas, crea una relación estable por fila y limpia el estado al desmontar en lugar de adivinar a partir de la adyacencia en el DOM.
Definir candidatos y reglas de desbordamiento
Usa position-area o anchor() para el lado preferido, y luego position-try-fallbacks o reglas equivalentes para el lado opuesto, la alineación de bordes y el tamaño reducido. Establece un tamaño de bloque máximo y desplazamiento interno. Si no cabe, ocúltalo o cambia a un panel de pantalla completa en lugar de cortar el contenido.
Manejar desplazamiento y tamaño dinámico
Cuando el ancla se mueve dentro de un contenedor con desplazamiento, verifica el bloque contenedor y el contexto de apilamiento. Vuelve a comprobar la visibilidad tras la carga de contenido asíncrono, fuentes y cambios de zoom. Evita mediciones manuales de scroll en la ruta nativa.
Añadir mejora progresiva
Usa @supports (anchor-name: --trigger). Los navegadores compatibles usan CSS; los demás reutilizan la lógica existente de portal y posicionamiento con mediciones acotadas, limpieza y manejo de inversión (flip). Ambas rutas comparten el estado del menú y las reglas de accesibilidad.
Adaptar la semántica a la tarea
Los menús usan elementos de menú y un modelo documentado de teclas de flecha. Un tooltip no debe contener acciones requeridas. Usa un diálogo solo cuando el fondo esté verdaderamente bloqueado; un modal gestiona el foco de entrada, el comportamiento de Tab, Escape y la restauración del foco.
Respuesta de ejemplo
"Haría que el filtro fuera un menú no modal. El botón obtiene un anchor-name estable; el menú usa position-anchor debajo de él, con fallbacks arriba y a lo largo de los bordes del viewport y una altura máxima para desplazamiento interno. Si @supports falla, el posicionador de portal existente maneja el diseño mientras que el estado y el comportamiento del teclado se mantienen compartidos. Al abrir, el foco se mueve al primer elemento, las flechas se mueven dentro del menú, y Escape o un clic afuera lo cierran y devuelven el foco al botón. Probaría viewports estrechos, contenedores con desplazamiento, zoom, contenido asíncrono y recorte mediante capturas de pantalla, comprobaciones de teclado y revisiones con lectores de pantalla."
Modos comunes de falla y correcciones
- Configurar únicamente
topyleft→ Explica candidatos, desbordamiento, límites de tamaño y posiciones de respaldo. - Hacer que todos los popovers sean modales → Clasifica menús, tooltips y diálogos según la tarea.
- Ignorar navegadores no compatibles → Proporciona
@supportsy el fallback de posicionamiento existente. - Probar solo en una ventana fija de escritorio → Incluye desplazamiento, zoom, pantallas estrechas, contenido dinámico y uso del teclado.
- Tratar el foco como un asunto de CSS → Define los estados de abrir, mover, cerrar y restaurar el foco.
Rúbrica de evaluación y autoevaluación
Las respuestas sólidas incluyen anclas estables, posiciones candidatas, reglas de desbordamiento y ocultamiento, mejora progresiva, límites de desplazamiento y tamaño dinámico, semántica correcta, gestión del foco, una matriz de pruebas y observabilidad.
Pregúntate: ¿Es estable el ancla? ¿Qué pasa si el menú no cabe? ¿Quién lo posiciona en un contenedor con desplazamiento? ¿Qué hace un navegador antiguo? ¿A dónde regresa el foco? ¿Cómo demuestro que no hay recortes, saltos o contenido inaccesible?
Preguntas de seguimiento y extensiones
¿En qué se diferencian anchor() y position-area?
position-area expresa una región relativa al ancla; anchor() expone un borde o tamaño para recuadros (insets), desplazamientos y cálculos. Se pueden combinar, pero aun así requieren fallbacks y límites de tamaño.
¿Qué pasa si el menú es más alto que el viewport?
Limita su tamaño de bloque y permite el desplazamiento de su contenido. En pantallas pequeñas, cambia a un panel de pantalla completa o bottom sheet cuando eso se adapte mejor a la tarea. No dejes contenido fuera del viewport.
¿Cómo se prueban los candidatos de posicionamiento?
Genera capturas de pantalla a través de diferentes tamaños de viewport, posiciones de scroll, zoom, fuentes y longitudes de contenido. Verifica el área visible, el orden del foco y el elemento objetivo del foco tras el cierre.
¿Cuándo sigue siendo apropiado el posicionamiento mediante JavaScript?
Mantén un fallback de JavaScript para navegadores antiguos, límites complejos de portales o datos de colisión de negocio. Deja que CSS se encargue en navegadores compatibles y usa JavaScript solo para cubrir la falta de capacidades y para la sincronización de estado.