Кратко

  • Первый публичный проект W3C за июнь 2023 года описал, как плавающий элемент размещается и подбирает размер относительно элемента-опоры в другом месте страницы, с запасными позициями при переполнении.
  • Редакции 2024 года уточнили выбор стандартной опоры и правила position-try: сайт задаёт допустимые места, браузер проверяет, какое помещается в доступное пространство.

Форма просит ввести непонятное значение. Возле поля стоит кнопка помощи. Читатель нажимает её и ждёт объяснения рядом с этим полем. На большом мониторе справа от кнопки хватает воздуха. На телефоне кнопка может стоять у самого края, и подсказка упрямо отправляет последнюю половину предложения в невидимую часть мира. Связь с кнопкой в замысле дизайнера есть, прочитать ответ нельзя. Разработчик снова достаёт top, left и набор поправок, похожий на блокнот землемера.

Первый публичный проект CSS Anchor Positioning от 29 июня 2023 года предложил описывать связь непосредственно. Позиционированный элемент может определять размер и положение относительно одного или нескольких элементов-опор в другой части страницы. anchor-name даёт опоре имя, anchor() и anchor-size() позволяют использовать её положение и размеры. Подсказка остаётся отдельной коробкой, но знает, за какой кнопкой идти. Длинный текст выше перенёс кнопку вниз — положение опоры изменилось вместе с ним.

Браузер уже знает геометрию обеих коробок, иначе не смог бы их нарисовать. Издатель выбирает, какое поле получает подсказку, что в ней написано и с какой стороны она должна появиться прежде всего. Измерение расстояний можно поручить системе вёрстки. У каждого сайта тогда отпадает нужда вести собственную картотеку случайных пиксельных поправок. Но вопрос выбора остаётся: справа, слева, сверху или снизу читатель легче поймёт, к чему относится пояснение?

Край экрана отвечает на этот вопрос очень решительно. Текст июня 2023 года описывал position-fallback и набор правил @position-fallback. Если предпочитаемое положение выходит за границы содержащего блока, браузер проверяет указанные варианты по очереди и берёт подходящий. Меню составляет сайт; наличие свободного места проверяет браузер. Подсказка, которая сначала примеряет место справа, а затем слева, исполняет заранее записанный план рассадки.

Проект от 14 марта 2024 года сделал назначение стандартной опоры более явным через position-anchor. Список запасных мест перешёл к семейству position-try, в том числе position-try-options и position-try-order. Проблема не сменилась: подсказка должна остаться у кнопки и на экране. Менялись слова, которыми автор CSS задавал второй и третий выбор. Спецификация тоже примеряла варианты названия, пока её собственная табличка не нашла место.

Редакция от 26 марта 2024 года продолжила описывать поиск опоры и подбор размещения при переполнении. Та же задача встречается в длинной статье с плавающей сноской. Сноска относится к определённому предложению. Если предложение подошло к правому краю, сноска может перейти на другую сторону и сохранить понятную связь с ним. Редактор предлагает приемлемые места, браузер проверяет их размеры. Одна сторона отвечает за смысл, другая — за пространство.

К проекту от 4 октября 2024 года для списка альтернатив появилось имя position-try-fallbacks. В 2023 году использовали position-fallback, в марте 2024-го — position-try-options. У каждого названия свой датированный текст. Их смена рассказывает, как рабочая группа подбирала способ записать вполне бытовую мысль: «Попробуй другое место, пока весь текст не поместится». Кнопка может оказаться где угодно; запасной план можно составить заранее.

История публикаций W3C ставит рядом первый текст 2023 года и правки 2024-го. Браузер измеряет опору, плавающую коробку и доступную область. Сайт пишет помощь, называет её кнопку и упорядочивает допустимые места. Читателю нужен целый ответ рядом с правильным полем. Если справа стенка, пусть подсказка перейдёт налево.

Рулетку можно убрать. Подсказке пора объяснять.