CSS Anchor Positioning: Menos hacks en dashboards

Si todavía estás cargando 15kb de JavaScript solo para que un tooltip no se corte al borde de la pantalla, probablemente tu dashboard esté resolviendo en JavaScript algo que el navegador ya puede hacer mejor. En mi experiencia trabajando en el desarrollo de soluciones Agrotech para Itapúa, en entornos donde cada milisegundo cuenta bajo redes 4G inestables, reducir este “slop” de ingeniería no es opcional.

Esta es una decisión de arquitectura clave y la evolución natural de la estrategia 0kb JS que venimos impulsando: con la adopción progresiva de CSS Anchor Positioning (en proceso de adopción como estándar en navegadores modernos), el posicionamiento dinámico empieza a ser una tarea nativa. Hoy ya es usable en entornos modernos, pero requiere una estrategia de fallback si tu audiencia incluye entornos legacy. Aún así, reduce la necesidad de cálculos manuales de getBoundingClientRect y en la mayoría de los casos resuelve de forma elegante el histórico caos de apilamiento, mejorando la mantenibilidad.

Hacia el fin del Z-Index Soup#

Históricamente, posicionar un menú desplegable dentro de un contenedor con overflow: hidden era una pesadilla que terminábamos resolviendo con portales en React o moviendo el DOM al final del body. En entornos compatibles con Anchor Positioning, declarás un nombre para el ancla y el popover lo sigue.

/* Definimos el elemento ancla (el botón) */
.filter-button {
  anchor-name: --status-anchor;
}

/* El popover que se posicionará relativo al ancla */
.filter-dropdown {
  position: fixed; /* O absolute, según el caso */
  position-anchor: --status-anchor;

  /* Anclamos el borde superior del dropdown al inferior del botón */
  top: anchor(bottom);
  left: anchor(left);

  margin-top: 0.5rem;
}

Manejo de colisiones inteligente#

Lo más costoso de usar librerías externas era el “smart positioning”: que el tooltip salte arriba si abajo no hay espacio. Ahora, podés definir una estrategia de reintento. Esto depende de cómo quieras manejar el layout, pero en pruebas internas, el cálculo de posicionamiento deja de competir por el Main Thread.

/* Requiere JS para calcular espacio y aplicar clases */
.tooltip.is-flipped {
bottom: 100%;
top: auto;
}

/* Resolución puramente declarativa */
.filter-dropdown {
position-try-options: flip-block, flip-inline;
}

Hace unos meses me tocó auditar el panel de logística de un cliente Agrotech en Itapúa, y tuve que lidiar con un cuello de botella brutal. Aprendí a los golpes que delegar layout a JS en móviles gama baja es un error. Al migrar a la API nativa de anclaje, el resultado es que el rendimiento percibido mejora. La diferencia no es técnica: es quién controla el layout — tu código o el motor del navegador.

Expectativa vs Realidad (Trade-offs)#

Como todo arquitecto senior sabe, ninguna herramienta nueva es “el fin de todos los males”. Descartar Floating UI hoy mismo implica asumir ciertos riesgos de plataforma:

Si necesitás JavaScript para posicionar UI, no tenés un problema de código. Tenés un problema de modelo mental. Anchor Positioning cambia eso. Si querés explorar más aprendizajes atómicos sobre performance, revisá nuestra sección de TIL (Today I Learned).