La API de CSS Anchor Positioning cambia las reglas del desarrollo web porque te permite posicionar elementos de forma nativa en relación con otros, conocidos como anclas. Esta API simplifica los requisitos de diseño complejos para muchas funciones de interfaz, como menús y submenús, información sobre herramientas, selecciones, etiquetas, tarjetas, diálogos de configuración y mucho más. Con el posicionamiento de anuncios fijos 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 mediante ancla está disponible a partir de Chrome 125.
Conceptos principales: Anclas y elementos posicionados
En el centro de esta API, se encuentra la relación entre las anclas y los elementos posicionados. Un ancla es un elemento designado como punto de referencia mediante la propiedad anchor-name. Un elemento posicionado es un elemento que se coloca en relación con un ancla mediante la propiedad position-anchor o explícitamente mediante 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 le asigna un nombre de ancla, .anchor-button funciona como un ancla, listo para guiar la posición de otros elementos. Puedes conectar esta ancla a otros elementos de dos maneras:
Anclas implícitas
La primera forma de conectar un ancla a otro elemento es con un anclaje implícito, como en el siguiente ejemplo de código. Se agrega la propiedad position-anchor al elemento que deseas conectar a tu ancla y tiene el nombre del ancla (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 anclaje explícito y puede ser útil si deseas anclarlo a varios elementos (consulta un ejemplo).
.positioned-notice {
top: anchor(--anchor-el bottom);
}
Posiciona los elementos en relación con las 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 anclado 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 un posicionamiento lógico para estos valores, los equivalentes son los siguientes:
top=inset-block-startleft=inset-inline-startbottom=inset-block-endright=inset-inline-end
Centra un elemento posicionado con anchor-center
Para facilitar el centro del elemento posicionado del ancla en relación con su ancla, hay un valor nuevo 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 con 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;
}
justify-center.
Varias anclas
Los elementos se pueden anclar a más de un ancla. Esto significa que es posible que debas establecer valores de posición que se posicionan respecto de 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 a partir 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 anclaje 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: topoinset-area: block-start - Centro a la izquierda:
inset-area: leftoinset-area: inline-start - Parte inferior central:
inset-area: bottomoinset-area: block-end - Centro a la derecha:
inset-area: rightoinset-area: inline-end
Para explorar más a fondo estas posiciones, 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 anclas, se puede usar para ajustar o posicionar un elemento posicionado de un ancla en función del tamaño de su ancla (ancho, altura o tamaños intercalados 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 la altura máxima de la información sobre la herramienta de modo que sea el doble de la altura del ancla.
.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);
}
anchor-size
Usa ancla con elementos de la capa superior, como ventana emergente y diálogo
El posicionamiento de anclaje funciona increíblemente bien con los elementos de la capa superior, como popover. y <dialog>. Mientras que 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 elementos que no estén en la capa superior. Esta es una gran ventaja para las interfaces en capas.
En el siguiente ejemplo, un conjunto de ventanas emergentes con información sobre la herramienta se activa 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 lo harías con cualquier otro elemento fijo. Para este ejemplo específico, anchor-name y position-anchor son estilos intercalados en el botón y en la información sobre la herramienta. Debido a que cada ancla necesita un nombre de ancla único, cuando se genera contenido dinámico, la intercalación es la forma más fácil de hacerlo.
popover
Ajuste las posiciones de los anclas con @position-try
Una vez que hayas obtenido la posición inicial del ancla, es posible que desees ajustar la posición si el ancla alcanza los bordes del bloque que lo contiene. Para crear posiciones de ancla 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 submenús son muy útiles para usar la API de anclaje de posición junto con el atributo de ventana emergente, ya que estos menús tienden a estar anclados a un botón de activación.
Si no hay suficiente espacio horizontal para este submenú, puedes moverlo debajo del menú. Para ello, primero configura 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 ancladas 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. En conjunto, 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;
}
popoverPalabras clave de cambio automático de posición fija
Si tienes un ajuste básico, como un cambio de arriba a abajo o de izquierda a derecha (o ambos), incluso puedes omitir el paso de crear declaraciones @position-try personalizadas y usar las palabras clave de Flip integradas que son compatibles con el navegador, como flip-block y flip-inline. Funcionan como reemplazos de declaraciones @position-try personalizadas y se pueden usar en combinación:
position-try-options: flip-block, flip-inline, flip-block flip-inline;
Las palabras clave de cambio de posición pueden simplificar considerablemente tu código de anclaje. 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-try-options: flip-blockposition-visibility para los anuncios fijos en los subdesplazamientos
En algunos casos, es posible que desees anclar un elemento dentro de un subdesplazador de la página. En estas instancias, puedes controlar la visibilidad del ancla con position-visibility. ¿Cuándo permanece el ancla a la vista? ¿Cuándo desaparece? Con esta función, tú tienes el control de esas opciones. Usa position-visibility: anchors-visible cuando deseas que el elemento posicionado permanezca a la vista hasta que el ancla esté fuera de la vista:
#tooltip {
position: fixed;
position-anchor: --anchor-top-anchor;
position-visibility: anchors-visible;
bottom: anchor(top);
}
position-visibility: anchors-visibleComo alternativa, puedes usar position-visibility: no-overflow para evitar que el ancla desborde su contenedor.
#tooltip {
position: absolute;
position-anchor: --anchor-top-anchor;
position-visibility: no-overflow;
bottom: anchor(top);
}
position-visibility: no-overflowDetección de atributos y polyfill
Dado 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 mediante la consulta de funciones @supports. La forma de hacerlo es unir los estilos de anclaje de la siguiente manera:
@supports (anchor-name: --myanchor) {
/* Anchor styles here */
}
Además, puedes polyfill con el polyfill de Oddbird, que funciona desde Firefox 54, Chrome 51, Edge 79 y Safari 10. Este polyfill admite la mayoría de las funciones básicas de posición de anclaje, aunque la implementación actual no está completa y contiene una sintaxis desactualizada. Puedes usar el vínculo de unpkg o importarlo directamente en un administrador de paquetes.
Nota sobre accesibilidad
Si bien la API de posicionamiento de anclas permite que un elemento se ubique en relación con otros, no crea de forma inherente ninguna relación semántica significativa entre ellos. Si en realidad hay una relación semántica entre el elemento de anclaje y el elemento posicionado (por ejemplo, el elemento posicionado es un comentario de la barra lateral sobre el texto de anclaje), una forma de hacerlo es usar aria-details para apuntar del elemento de anclaje a los elementos posicionados. El software de lector de pantalla aún está aprendiendo a manejar los detalles aria, 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 manejará las correcciones de navegación del enfoque para una accesibilidad adecuada, por lo que no necesitas tener las ventanas emergentes ni los diálogos en el orden del DOM. Obtén más información en la nota sobre accesibilidad en la especificación.
Conclusión
Esta es una función nueva y nos entusiasma ver tus creaciones con ella. Hasta ahora, hemos visto algunos casos de uso muy interesantes de la comunidad, como las etiquetas dinámicas en gráficos, las líneas conectoras, las notas al pie y las referencias visuales cruzadas. A medida que experimentas con el posicionamiento de las anclas, nos encantaría recibir tus comentarios. Si detectas algún error, comunícate con nosotros.