Presentamos la API de posicionamiento de anclas de CSS

La API de posicionamiento de anclajes de CSS cambia las reglas del desarrollo web, ya que te permite posicionar elementos de forma nativa en relación con otros, conocidos como anclas. Esta API simplifica los requisitos complejos de diseño para muchas funciones de la interfaz, como menús y submenús, información sobre herramientas, selecciones, etiquetas, tarjetas, diálogos de configuración y muchas más. Gracias al posicionamiento de anclaje integrado en el navegador, podrás crear interfaces de usuario en capas sin depender de bibliotecas de terceros, lo que abrirá un mundo de posibilidades creativas.

El posicionamiento de anuncios fijos está disponible a partir de la versión 125 de Chrome.

Conceptos básicos: Anclas y elementos posicionados

La relación entre las anclas y los elementos posicionados es el núcleo de esta API. Un ancla es un elemento designado como punto de referencia mediante la propiedad anchor-name. Un elemento posicionado es aquel que se coloca en relación con un ancla mediante la propiedad position-anchor o explícitamente con anchor-name en su lógica de posicionamiento.

Configura anclas

Crear un ancla es sencillo. Aplica la propiedad del nombre del ancla al elemento seleccionado y asígnale un identificador único. Este identificador único debe estar precedido por un guion doble, al igual que una variable de CSS.

.anchor-button {
    anchor-name: --anchor-el;
}

Una vez que se asigna un nombre de anclaje, .anchor-button sirve como ancla, lista para guiar la posición de otros elementos. Puedes conectar este ancla a otros elementos de dos maneras:

Anclas implícitas

La primera forma de conectar un ancla a otro elemento es con una ancla implícita, como en el siguiente ejemplo de código. La propiedad position-anchor se agrega al elemento que deseas conectar a tu ancla y tiene el nombre de este (en este caso, --anchor-el) como valor.

.positioned-notice {
    position-anchor: --anchor-el;
}

Con una relación de anclaje implícita, puedes posicionar elementos con la función anchor() sin especificar explícitamente el nombre del ancla en su primer argumento.

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

Anclas explícitas

Como alternativa, puedes usar el nombre del ancla directamente en la función correspondiente (por ejemplo, top: anchor(--anchor-el bottom). Esto se denomina ancla explícita y puede resultar útil si deseas anclar a varios elementos (lee para ver un ejemplo).

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

Cómo posicionar elementos en relación con los anclas

El posicionamiento de anclaje se basa en el posicionamiento absoluto de CSS. Para usar valores de posicionamiento, debes agregar position: absolute a tu elemento posicionado. Luego, usa la función anchor() para aplicar valores de posicionamiento. Por ejemplo, para posicionar un elemento fijo en la parte superior izquierda del elemento de anclaje, usa el siguiente posicionamiento:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}

Ahora tienes un elemento anclado a otro de la siguiente manera:

Para usar el posicionamiento lógico para estos valores, los equivalentes son los siguientes:

• top = inset-block-start
• left= inset-inline-start
• bottom = inset-block-end
• right= inset-inline-end

Centra un elemento posicionado con anchor-center

Para que sea más fácil centrar el elemento posicionado del ancla en relación con el ancla, hay un nuevo valor llamado anchor-center que se puede usar con las propiedades justify-self, align-self, justify-items y align-items.

En este ejemplo, se modifica el anterior usando justify-self: anchor-center para centrar el elemento posicionado sobre su ancla.

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

Múltiples anclas

Los elementos se pueden anclar a más de un ancla. Esto significa que es posible que debas establecer valores de posición relativos a más de un ancla. Para ello, usa la función anchor() y especifica de forma explícita a qué ancla a la que haces referencia en el primer argumento. En el siguiente ejemplo, la parte superior izquierda de un elemento posicionado se ancla a la parte inferior derecha de un ancla, y la parte inferior derecha del elemento posicionado se ancla a la parte superior izquierda del segundo ancla:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

Posición con inset-area

Además del posicionamiento direccional predeterminado del posicionamiento absoluto, hay un nuevo mecanismo de diseño incluido en la API de anclaje llamado área de inserción.

El área de inserción facilita la colocación de los elementos de posicionamiento de los anclas en relación con sus respectivas anclas y funciona en una cuadrícula de 9 celdas con el elemento de anclaje en el centro.

Varias opciones posibles de posicionamiento de área de inserción, que se muestran en la cuadrícula de 9 celdas

Para usar el área de inserción en lugar del posicionamiento absoluto, usa la propiedad inset-area, con valores físicos o lógicos. Por ejemplo:

• Parte superior central: inset-area: top o inset-area: block-start
• Parte central izquierda: inset-area: left o inset-area: inline-start
• Parte inferior central: inset-area: bottom o inset-area: block-end
• Parte central derecha: inset-area: right o inset-area: inline-end

Para explorar más a fondo estos puestos, consulta la siguiente herramienta:

Ajusta el tamaño de los elementos con anchor-size()

La función anchor-size(), que también forma parte de la API de posicionamiento de anclajes, se puede usar para ajustar el tamaño o la posición de un elemento posicionado de anclajes según el tamaño de su anclaje (ancho, alto o tamaño intercalado y de bloque).

En el siguiente CSS, se muestra un ejemplo de cómo usar esto para la altura, con anchor-size(height) dentro de una función calc() para establecer que la altura máxima de la información sobre la herramienta sea dos veces la altura del anclaje.

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}

Usa el ancla con elementos de la capa superior, como ventanas emergentes y diálogos.

El posicionamiento de anclajes funciona increíblemente bien con elementos de la capa superior, como popover. y <dialog>. Mientras estos elementos se colocan en una capa separada del resto del subárbol del DOM, el posicionamiento de los anclajes te permite volver a conectarlos y desplazarte junto con los elementos que no están en la capa superior. Esta es una gran ventaja para las interfaces en capas.

En el siguiente ejemplo, se activa un conjunto de ventanas emergentes con información sobre la herramienta con un botón. El botón es el ancla y la información sobre la herramienta es el elemento posicionado. Puedes aplicar diseño al elemento posicionado como a cualquier otro elemento anclado. Para este ejemplo específico, anchor-name y position-anchor son estilos intercalados en el botón y la información sobre la herramienta. Debido a que cada ancla necesita un nombre de anclaje único, cuando se genera contenido dinámico, la incorporación es la forma más fácil de hacerlo.

Ajusta las posiciones de los anclas con @position-try

Una vez que tengas la posición inicial del ancla, puedes ajustarla si el ancla alcanza los bordes del bloque que contiene. Para crear posiciones de anclaje alternativas, puedes usar la directiva @position-try junto con la propiedad position-try-options.

En el siguiente ejemplo, aparece un submenú a la derecha de un menú. Los menús y los submenús son una excelente manera de usar la API de posicionamiento de anclajes junto con el atributo emergente, ya que estos menús tienden a anclarse a un botón de activación.

En este submenú, si no hay suficiente espacio horizontalmente, puedes moverlo debajo del menú. Para ello, establece primero la posición inicial:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

Luego, configura tus posiciones fijas de resguardo con @position-try:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Por último, conecta los dos con position-try-options. Todo junto se ve así:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
  */ connect with position-try options */
  position-try-options: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

Palabras clave de rotación automática de posición de anclaje

Si tienes un ajuste básico, como cambiar de arriba hacia abajo o de izquierda a derecha (o ambos), puedes omitir el paso de crear declaraciones @position-try personalizadas y usar palabras clave de cambio integradas compatibles con el navegador, como flip-block y flip-inline. Funcionan como sustitutos de las declaraciones @position-try personalizadas y se pueden usar en combinación entre sí:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

Cambiar las palabras clave puede simplificar significativamente tu código fijo. Con solo unas pocas líneas, puedes crear un ancla completamente funcional con posiciones alternativas:

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}

position-visibility para los anuncios fijos en subdesplazamientos

Existen algunos casos en los que es posible que desees anclar un elemento dentro de un subdesplazador de la página. En estos casos, puedes controlar la visibilidad del ancla con position-visibility. ¿Cuándo permanece a la vista el ancla? ¿Cuándo desaparece? Con esta función, puedes controlar estas opciones. Usa position-visibility: anchors-visible cuando quieras que el elemento posicionado permanezca a la vista hasta que el ancla quede fuera de la vista:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

Como alternativa, puedes usar position-visibility: no-overflow para evitar que el ancla desborde de su contenedor.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

Detección de funciones y polyfill

Debido a que la compatibilidad con navegadores es limitada en este momento, te recomendamos que uses esta API con algunas precauciones. Primero, puedes verificar la compatibilidad directamente en CSS usando la consulta de función @supports. La manera de hacerlo es unir los estilos de los anuncios fijos de la siguiente manera:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

Además, puedes aplicar polyfills en la función de posicionamiento de los anclajes de CSS con el polyfill de Oddbird, que funciona en Firefox 54, Chrome 51, Edge 79 y Safari 10. Este polyfill admite la mayoría de las funciones básicas de posición de anclajes, aunque la implementación actual no está completa y contiene una sintaxis desactualizada. Puedes usar el vínculo sin empaquetar o importarlo directamente en un administrador de paquetes.

Nota sobre la accesibilidad

Si bien la API de posicionamiento de anclajes permite posicionar un elemento relativo a otros, no crea intrínsecamente ninguna relación semántica significativa entre ellos. Si en realidad existe una relación semántica entre el elemento de anclaje y el elemento posicionado (por ejemplo, el elemento posicionado es un comentario en la barra lateral sobre el texto de anclaje), una forma de hacerlo es usar aria-details para señalar desde el elemento de anclaje a los elementos posicionados. El software de lector de pantalla aún está aprendiendo a manejar los aria-details, pero la compatibilidad está mejorando.

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

.anchor {
  anchor-name: --anchor;
}

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

Si usas el posicionamiento de anclaje con el atributo popover o con un elemento <dialog>, el navegador se encargará de las correcciones de navegación de enfoque para lograr una accesibilidad adecuada, por lo que no es necesario que tus ventanas emergentes o diálogos estén en orden DOM. Obtén más información sobre la nota sobre la accesibilidad de la especificación.

Conclusión

Esta es una función completamente nueva y estamos ansiosos por ver lo que crearás con ella. Hasta ahora, hemos visto algunos casos de uso muy interesantes de la comunidad, como etiquetas dinámicas en gráficos, líneas conectoras, notas al pie y referencias cruzadas visuales. Mientras experimentas con el posicionamiento de anclaje, nos encantaría recibir tus comentarios. Si encuentras errores, comunícate con nosotros.

Lecturas adicionales

• Cómo dibujar una línea para conectar elementos con el posicionamiento de anclaje de CSS
• Future CSS: Posicionamiento del ancla por Roman Komarov
• Colección de demostraciones de anclas de Una's Codepen
• Herramienta de posicionamiento de anclaje