Detecta posiciones de resguardo con consultas de contenedores ancladas desde Chrome 143

Una Kravets

Publicado el 29 de octubre de 2025

A partir de Chrome 143, puedes usar consultas de contenedor ancladas para identificar cuándo un elemento anclado usa un posicionamiento de anclaje de resguardo. En esta publicación, se explica el problema que resuelve esta función.

La API de posicionamiento de anclaje de CSS proporciona una forma eficaz de vincular un elemento (como un elemento emergente) a otro (el ancla) y definir un conjunto de alternativas de posición que se usan si el elemento se queda sin espacio. Por ejemplo, si tu elemento anclado se diseñó inicialmente para estar en la parte superior, pero, a medida que te desplazas y llega al borde de la pantalla, el navegador puede controlar el "cambio" para mantenerlo en el viewport.

Sin embargo, el nivel 1 de la especificación de posicionamiento de anclaje dejó una brecha significativa: Si bien CSS podía mover el elemento a una posición de resguardo, no tenía forma de saber qué resguardo se eligió. Esto significaba que no podías aplicar diferentes estilos según esa posición final. Si la información sobre herramientas se invirtiera de abajo hacia arriba, su flecha seguiría apuntando en la dirección incorrecta, a menos que la corrigieras con JavaScript.

Las consultas de contenedor ancladas (definidas en la especificación de CSS Anchor Position Level 2) resuelven este problema, ya que le brindan al posicionamiento de anclaje de CSS la conciencia contextual que le faltaba.

Cómo funciona: Consultas de opciones alternativas

Las consultas de contenedor ancladas te permiten aplicar estilos según cómo el navegador resolvió el posicionamiento del ancla.

Se configura con dos funciones nuevas de CSS:

  • container-type: anchored: Aplica esto al elemento posicionado (por ejemplo, tu sugerencia). Esto lo convierte en un contenedor de consultas que "conoce" su estado de posicionamiento de anclaje.
  • @container anchored(fallback: ...): Esta nueva sintaxis de regla @ te permite consultar qué opción de position-try-fallbacks se usó finalmente.

Imagina que tienes una sugerencia que quieres posicionar en la parte inferior, pero con la posición superior como alternativa. El siguiente código:

  • Inicialmente, intenta colocar el .tooltip en la parte inferior de su elemento de anclaje (--my-anchor).
  • Si no cabe, el resguardo la mueve a la parte superior.
  • La consulta @container detecta esto. Cuando se aplica la alternativa superior, la consulta anchored(fallback: top) se vuelve verdadera.
  • Esto te permite cambiar el contenido del seudoelemento ::before de una flecha hacia arriba (▲) a una flecha hacia abajo (▼) y ajustar su posición.
/* The element our tooltip is anchored to */
.anchor {
  anchor-name: --my-anchor;
}

/* The positioned element (tooltip) */
.tooltip {
  /* Use anchor positioning to set fallbacks */
  position: absolute;
  margin-top: 1rem;
  position-anchor: --my-anchor;
  position-area: bottom;
  position-try-fallbacks: flip-block; /* Reposition in the block direction */
  
  /* Make it an anchored query container */
  container-type: anchored;

  /* Add a default "up" arrow */
  &::before {
    content: '▲';
    position: absolute;
    bottom: 100%; /* Sits on top of the tooltip, pointing up */
  }
}

/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
  .tooltip::before {
    /* The 'top' fallback was used, so flip the arrow */
    content: '▼';
    bottom: auto;
    top: 100%; /* Move the arrow below the tooltip */
  }
}

Todo esto se hace completamente en CSS, sin JavaScript, sin observadores y sin clases adicionales. Nota: Si usas la API de Popover, no necesitarás nombrar tus anclajes de forma explícita, ya que se crea una relación de anclaje implícita.

Consulta la siguiente demostración que usa el truco de borde para crear un triángulo CSS y lo reposiciona con consultas ancladas:

Conclusión

Las consultas ancladas brindan al navegador CSS un conocimiento nativo de la posición actual del anclaje de un elemento posicionado. Esto significa que puedes crear componentes mucho más resilientes y contextuales. La flecha de la sugerencia es solo un ejemplo. También podrías hacer lo siguiente:

  • Cambia el color de fondo de un menú cuando se invierte.
  • Mueve un estilo de borde al borde más cercano a la unión.
  • Ajusta el radio de borde en una ventana emergente para que la esquina "adjunta" sea cuadrada.
  • Anima un elemento de manera diferente según la posición de resorte a la que se ajuste.

Esto es un gran avance para el posicionamiento de anclaje y las bibliotecas de componentes en general, ya que permite crear elementos de IU más sólidos y autónomos con menos código.

Recursos