Resumen

  • El primer borrador público del W3C, de junio de 2023, definió el tamaño y la posición de un elemento flotante respecto de un ancla situada en otro lugar de la página, con alternativas cuando la primera colocación desborda.
  • Los textos de 2024 precisaron el ancla predeterminada y las opciones de position-try: el sitio ordena las posiciones aceptables y el navegador comprueba su geometría.

En un formulario hay una casilla que pide un dato poco habitual. Un botón de ayuda promete explicar el asunto. El lector lo pulsa y espera una frase al lado de esa casilla, no una búsqueda del tesoro por la pantalla. En un monitor ancho, colocar el mensaje a la derecha funciona. En un teléfono, el botón puede estar tan cerca del borde que el mensaje se corta justo antes de la palabra importante. El sitio ha puesto la ayuda en marcha y ha dejado al lector con media respuesta. El desarrollador abre otra vez su cajón de reglas, offsets y aritmética de sospechosa precisión.

El primer borrador público de CSS Anchor Positioning, publicado por el W3C el 29 de junio de 2023, convirtió esa relación en una instrucción de diseño. Un elemento posicionado puede calcular su tamaño y ubicación respecto de uno o varios elementos ancla en otra parte de la página. anchor-name nombra el punto de referencia. anchor() y anchor-size() permiten usar su ubicación o dimensiones. La ayuda flotante sigue siendo su propia caja, pero ahora conoce la dirección del botón al que pertenece. Si el botón baja porque el texto superior ocupa otra línea, la referencia se mueve con él.

El texto de junio de 2023 también ofrecía una salida para el borde: position-fallback y un bloque @position-fallback con reglas candidatas. Una ayuda que no cabe a la derecha puede pasar a la izquierda, siempre que esa alternativa haya sido declarada. El navegador conoce las dimensiones de las cajas porque debe dibujarlas; el sitio conserva la decisión editorial de qué control merece la ayuda y qué posiciones mantienen clara la relación. Se acabó tomar medidas a ojo cada vez que un campo aparece junto al margen.

Los nombres de ese plan cambiaron durante los proyectos del 14 de marzo y 26 de marzo de 2024: position-fallback dio paso a position-try-options, mientras position-anchor permitió señalar el ancla predeterminada. El proyecto de octubre llamó position-try-fallbacks a la lista. Son fotografías de fechas distintas, no tres hechizos que haya que escribir juntos. Lo importante del cambio de marzo era poder designar sin rodeos qué botón manda cuando una caja podría referirse a varios elementos.

El documento de octubre ofrece un ejemplo más instructivo que la mera genealogía de nombres. Su ayuda aparece centrada encima del elemento al que pertenece mediante position-area: block-start. Con position-try: flip-block, la misma regla la coloca debajo si arriba se sale de la ventana. Son dos instrucciones legibles donde antes podía crecer una contabilidad de top y left. La pantalla estrecha deja de ser un caso especial inventado después de la queja del primer lector.

Hay otra decisión menos obvia. position-try-order permite respetar el orden escrito o favorecer la opción con más anchura, altura o espacio en uno de los ejes. Una lista emergente de muchas filas puede necesitar el lado que le deja más altura, aunque no sea el primer lado de la lista. La especificación ilustra justamente esa situación con una lista anclada a su botón. Aquí el problema ya no consiste en salvar dos palabras de una infoburbuja: consiste en que el lector pueda recorrer las opciones sin que la lista quede amputada por el borde.

La geometría tampoco hace de secretaria del significado. El apartado de accesibilidad del proyecto de octubre recuerda que colocar visualmente una caja junto a un botón no establece por sí solo una relación para quien usa un lector de pantalla. Describe cómo el Popover API vincula el botón invocador con el panel y le proporciona un ancla implícita; en otros casos, atributos como aria-describedby o aria-details expresan la relación. Una nota que parece pegada a la casilla puede seguir siendo un desconocido en el árbol de accesibilidad. La posición y la relación tienen trabajos distintos.

El mismo proyecto trata el desplazamiento como un problema propio. Un ancla dentro de una zona desplazable puede moverse sin que el motor repita toda la maquetación en cada fotograma. El texto especifica ajustes de desplazamiento y limita cuándo el tamaño de una caja puede depender de un ancla desplazable situada en otro contenedor. Esa precisión importa en una página larga: la ayuda debe acompañar a su botón durante el desplazamiento, sin convertir cada rueda del ratón en una obra de albañilería para todo el documento.

El historial de publicaciones del W3C permite seguir el paso desde el primer proyecto de 2023 hasta esas decisiones de 2024. La gran idea cabe en una escena pequeña: un botón de ayuda al borde, una frase que debe poder leerse entera y una segunda posición preparada antes de que haga falta. El botón no tiene por qué mudarse para que la explicación encuentre sitio.