Enunciado y alcance
Un botón abre un menú, una sugerencia o un panel de comandos. El popover debe permanecer cerca del botón, voltearse cuando no haya espacio disponible, evitar ser recortado por el viewport o un contenedor con scroll, y admitir el enfoque y cierre mediante el teclado. Compara los cálculos de coordenadas en JavaScript con CSS Anchor Positioning y propone una mejora progresiva.
MDN describe el posicionamiento por anclaje como colocar un elemento relativo a otro con mecanismos de respaldo como position-try. La guía de Chrome muestra la relación a través de anchor-name y position-anchor. Una respuesta sólida cubre el diseño, el scroll, el soporte del navegador y la semántica de interacción en conjunto.
Qué evalúa el entrevistador
- Si separas la colocación visual, la semántica del DOM y la gestión del foco.
- Si comprendes las relaciones de anclaje y los candidatos de respaldo en lugar de memorizar nombres de propiedades.
- Si analizas contenedores con scroll, recortes y contextos de apilamiento.
- Si diseñas una solución de respaldo mínima en JavaScript cuando la característica de CSS no esté disponible.
- Si defines una matriz de pruebas para navegadores, entradas y accesibilidad.
Las entrevistas de frontend suelen evaluar los fundamentos de diseño del navegador, los componentes mantenibles y el manejo de casos límite. Una respuesta sólida sitúa una nueva característica de CSS dentro de restricciones reales de compatibilidad y producto en lugar de asumir un soporte universal.
Preguntas aclaratorias antes de responder
- ¿Es el popover un menú, un tooltip o un diálogo? El rol semántico cambia el comportamiento del foco y de la tecla Escape.
- ¿Es la referencia un botón, un ícono o un elemento de lista? ¿Puede moverse o estar virtualizado?
- ¿Puede salir de un contenedor con scroll? ¿Necesita una capa de renderizado de nivel superior para evitar el recorte?
- ¿Qué navegadores y WebViews son compatibles? ¿Debe la solución de respaldo preservar todo el comportamiento?
- ¿Debe animarse el movimiento, y qué sucede cuando el usuario prefiere movimiento reducido?
Estructura de respuesta de 30 segundos
Primero definiría la semántica del popover y el modelo de foco. Luego nombraría el botón como un ancla y asociaría el popover con él. Lo colocaría debajo por defecto y proporcionaría alternativas de position-try ordenadas arriba y a los lados; no confiaría en un único desplazamiento fijo. Los navegadores no compatibles usarían un pequeño adaptador de posicionamiento o una alternativa en línea, validada con las mismas pruebas de accesibilidad.
Respuesta detallada paso a paso
Paso 1: Manejar la semántica y el foco primero
Un menú necesita elementos de menú enfocables y un estado expandido explícito; un tooltip no debe contener acciones obligatorias; un panel de comandos complejo puede ser similar a un diálogo. Al abrir, registra el desencadenador; al cerrar, restaura el foco. Las reglas de Escape y de clic fuera deben coincidir. CSS controla la colocación, no estas garantías de interacción.
Paso 2: Establecer la relación de anclaje
Nombra el desencadenador como un ancla y apunta el popover a ese ancla de posición. Mantén la relación estable o con alcance a nivel de instancia para que múltiples elementos de lista no compartan un mismo nombre. La destrucción de componentes, la reutilización y el scroll virtual deben limpiar las asociaciones obsoletas.
Paso 3: Definir posiciones predeterminadas y de respaldo
Declara la posición común debajo del desencadenador, luego lista los candidatos arriba, en el lado inicial y en el lado final. El orden de los candidatos expresa la preferencia del producto, como preservar la alineación horizontal antes de reducir el contenido. Usa el mecanismo position-try para permitir que el navegador elija un candidato viable y exponga los candidatos fallidos para depuración.
Paso 4: Manejar límites y desplazamiento
Verifica el recorte por contenedores con scroll, ancestros transformados y nuevos contextos de apilamiento. Si el popover debe cruzar el límite de un contenedor, renderízalo en una capa de nivel superior manteniendo una relación de anclaje a nivel de instancia. Prueba el desplazamiento y el zoom cuando el desencadenador sale del viewport, contenedores anidados y texto de derecha a izquierda.
Paso 5: Mantener la mejora progresiva
Usa la colocación mediante CSS tras la detección de capacidades; activa un adaptador de JavaScript solo cuando sea necesario. El adaptador lee el rectángulo del desencadenador, evalúa los candidatos y observa solo las señales necesarias de scroll, tamaño y diseño. No permitas que ambas implementaciones escriban estilos de posición a la vez, o pueden competir y parpadear.
Paso 6: Restringir tamaño y contenido
Define un ancho y alto máximos, relleno y un área de scroll interna. La selección de candidatos debe considerar el espacio disponible y el tamaño mínimo legible; el contenido largo debe desplazarse dentro del popover en lugar de desbordar la página. Vuelve a evaluar después de que cargue el contenido dinámico porque la medición inicial puede quedar obsoleta.
Paso 7: Manejar movimiento y dispositivos de entrada
Asigna a los cambios de posición una duración explícita y una ruta para movimiento reducido. Las entradas de teclado, táctiles y de puntero deben compartir las reglas de apertura, cierre y foco; un tooltip al pasar el cursor no puede reemplazar la ayuda accesible por teclado. La animación no debe retrasar la restauración del foco ni exponer un estado incorrecto a la tecnología de asistencia.
Paso 8: Construir una matriz de verificación
Prueba la posición predeterminada, cada alternativa, viewports estrechos, scroll anidado, zoom, texto de derecha a izquierda, contenido largo, contenido dinámico y navegadores no compatibles. Valida la ausencia de recortes, la relación correcta entre desencadenador y contenido, el cierre con Escape, la restauración del foco y un estado coherente en el árbol de accesibilidad. Compara las rutas de CSS y de respaldo en lugar de aceptar una captura de pantalla en pantalla ancha.
Respuesta modelo
Distinguiría la semántica de menú, tooltip y diálogo y establecería primero el comportamiento del foco y del cierre. El desencadenador obtiene un nombre de ancla; el popover usa position-anchor, se sitúa por defecto debajo y enumera alternativas de position-try arriba y a los lados. Si un contenedor con scroll lo recorta, lo renderizaría en una capa de nivel superior conservando una relación de instancia. Los navegadores no compatibles usan un adaptador de JavaScript con la misma semántica. Probaría viewports estrechos, scroll anidado, texto de derecha a izquierda, contenido dinámico, teclado y lectores de pantalla, respetando el movimiento reducido.
Errores comunes
- Calcular las coordenadas solo una vez → el scroll y el zoom rompen la colocación → haz que CSS o el adaptador reaccionen a los cambios de diseño.
- Tratar un tooltip como un menú → el teclado y la tecnología de asistencia fallan → define primero la semántica y el foco.
- Proporcionar solo una posición inferior → los bordes del viewport se desbordan → ordena varios candidatos.
- Ignorar
overflow: hidden→ un ancestro recorta el popover → elige el límite de renderizado de nivel superior adecuado. - Dejar que CSS y JavaScript posicionen al mismo tiempo → condiciones de carrera y parpadeos → habilita exactamente una ruta tras la detección de capacidades.
- Probar solo en pantallas anchas con un ratón → fallan los dispositivos móviles y el teclado → cubre dispositivos de entrada, direccionalidad y accesibilidad.
Preguntas de seguimiento y respuestas
¿Puede Anchor Positioning reemplazar a todas las librerías de elementos flotantes?
No. Gestiona las relaciones de diseño y la colocación de respaldo, no el foco, los roles, el cierre, el arrastre o reglas de colisión de negocio complejas. Los componentes aún necesitan capas de interacción y compatibilidad.
¿Qué pasa si un contenedor con scroll recorta el popover?
Decide si es necesario cruzar el límite. Si lo es, usa una capa de renderizado de nivel superior con una relación de instancia; de lo contrario, restringe los candidatos y desplaza el contenido dentro del contenedor.
¿Cómo evitas colisiones de anchor-name en una lista?
Genera una relación estable por instancia o gestiona los nombres con el ciclo de vida del componente. Limpia las asociaciones cuando los nodos virtualizados se reciclen.
¿Cuál es la alternativa cuando CSS no es compatible?
Usa detección de capacidades para habilitar un adaptador de posicionamiento en JavaScript con idéntica semántica, foco y cierre. Para contenido no crítico, un bloque en línea debajo del desencadenador puede ser una alternativa aún más simple.
¿Qué sucede si el contenido dinámico cambia la posición?
Deja que los cambios de tamaño vuelvan a disparar el diseño; en la ruta de respaldo, observa solo las señales necesarias de tamaño y scroll. No ocultes un diseño inestable detrás de un timeout fijo.
¿Cómo demuestras que los candidatos de respaldo funcionan?
Crea viewports reproducibles y estados de scroll en cada borde, luego valida la colocación final, el recorte, el tamaño legible y la distancia al ancla en lugar de revisar un nombre de clase CSS.
¿Cuándo seguirías eligiendo una librería de elementos flotantes en JavaScript?
Elige una cuando el soporte amplio de navegadores, reglas de colisión avanzadas, colocación entre documentos o un comportamiento de accesibilidad maduro superen el valor de una ruta nativa en CSS. CSS puede permanecer como la capa de diseño progresiva.