<divelopers>: “Продолжаю рассказывать про новые API На очереди Anchor Positioning API…”

Продолжаю рассказывать про новые API

На очереди Anchor Positioning API. Это нативная возможность позиционировать один элемент относительно другого без костылей и js. API частично реализован и доступен в Chrome Canary за флагом экспериментальных фич.

<button id="hint">
  Подробнее
</button>
<div class="tooltip" anchor="info">
  Подробная информация
</div>

<style>
  .tooltip {
    top: anchor(--info bottom);
    left: anchor(--info center);
  }
</style>

Например, нужно сделать тултип, который привязан к какому-то элементу. Для этого нужна обертка с position: relative, внутри которой элемент с position: absolute, его нужно спозиционировать, и ещё js для переворачивания и прочих edge-кейсов. Либо использовать библиотеки Popper или Floating UI. Anchor Position API предлагает ряд новых возможностей в CSS и HTML, которые позволят решить эту задачу. Кроме того, при помощи этого API можно будет позиционировать выпадающие меню, списки опций селекта, автокомплит, всплывающие подсказки и другие UI-элементы.

Прежде всего, надо привязать один элемент к другому. Предлагается 2 способа. Первый - указать атрибут anchor, в котором будет id элемента, к которому нужно привязаться. Второй - указать CSS-свойство anchor-name со значением типа dash-indent (как custom properties).

<button id="hint" class="anchor">
  Подробнее
</button>
<div class="tooltip" anchor="info">
  Подробная информация
</div>

<!-- или -->
<style>
  .anchor {
    anchor-name: --hint;
  }
</style>

После создания якоря можно использовать CSS-функцию anchor(), с 3я аргументами:
- имя якоря
- сторона (top, right, bottom, left, center) или процент
- фоллбэк
Имя якоря можно не указывать, если он создан при помощи anchor в HTML или указано свойство anchor-default. Что делает функция anchor()? Она возвращает координату указанной стороны элемента-якоря, которую можно использовать как значение в свойствах top, right, bottom, left и inset, тем самым позиционируя один элемент относительно другого. Функцию также можно использовать внутри calc().

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

.tooltip {
  top: anchor(--hint bottom);
  left: anchor(--hint center);
}

Другая полезная функция - anchor-size(). Она принимает имя якоря и width/height. Таким образом, можно получить размеры элемента-якоря и использовать их для вычисления положения или размера привязанного к якорю элемента.

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

.tooltip {
  width: calc(4 * anchor-size(--info width));
}

Ещё планируется функционал автоматического позиционирования в зависимости от наличия свободного места. Для этого в свойствах top, right, bottom, left и в функции anchor() можно будет указывать значение auto. Переворачивание можно будет реализовать при помощи свойства position-fallback и специального @-правила с одноимённым названием. В try-блоках указываются варианты, которые браузер будет пробовать, чтобы подобрать наиболее подходящее позиционирование.

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

.tooltip {
  anchor-default: --hint;
  position-fallback: --flip;
}

@position-fallback {
  @try {
    bottom: anchor(top);
    left: anchor(center);
  }

  @try {
    top: anchor(bottom);
    left: anchor(center);
  }
}

Пока это экспериментальная возможность, синтаксис может измениться. Также есть баги и не все фичи на данный момент можно потрогать даже за флагами. Однако работа над API идёт, потому что это очень востребованная фича, которая тесно связана с Popover API и <selectlist>.