CSS Anchor Positioning: новый уровень верстки

Основу технологии Anchor Positioning составляют несколько новых CSS-свойств, которые устанавливают связь между позиционируемым элементом и его якорем. Для начала работы необходимо объявить элемент в качестве якоря с помощью свойства anchor-name. Это свойство задает уникальное имя, которое затем может быть использовано другими элементами для привязки.

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

Затем, любой абсолютно (position: absolute) или фиксированно (position: fixed) позиционированный элемент может «подписаться» на этот якорь с помощью свойства position-anchor. После этого становятся доступны функции anchor() и anchor-size() для точного определения координат и размеров.

.positioned-element {
  position: absolute;
  position-anchor: --my-anchor;
  /* Позиционирование левого края элемента относительно правого края якоря */
  left: anchor(right);
  /* Позиционирование нижней границы элемента относительно верха якоря */
  bottom: anchor(top);
}

Процесс можно разбить на три основных шага:

1. Объявление якоря: задание уникального имени элементу, к которому будет происходить привязка.
2. Привязка элемента: указание этого имени в свойстве position-anchor у позиционируемого элемента.
3. Определение позиции: использование функций anchor() и anchor-size() в свойствах top, right, bottom, left, width или height.

Это свойство принимает в качестве значения идентификатор, начинающийся с двух дефисов, по аналогии с CSS-переменными. Имя якоря существует в изолированном пространстве имен и не конфликтует с другими CSS-идентификаторами.

.button {
  anchor-name: --menu-trigger;
}

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

/* Псевдоэлемент тоже может быть якорем */
.highlight::before {
  anchor-name: --highlight-mark;
}

Важно понимать, что якорем может стать практически любой элемент. Нет ограничений по типу тега или классу. Однако стоит учитывать, что сам по себе anchor-name не меняет визуальное представление элемента. Это лишь мета-информация, которую CSS использует для расчета позиции других элементов. Также можно задать несколько якорей разным элементам на странице, используя уникальные имена для каждого.

Это свойство связывает элемент с конкретным якорем, используя заданное ранее имя. Без этой связи функции anchor() не будут работать.

.tooltip {
  position: absolute;
  /* Явная привязка к якорю с именем --my-btn */
  position-anchor: --my-btn;
}

.dropdown {
  position: fixed;
  /* Привязка к другому якорю */
  position-anchor: --nav-trigger;
}

Ключевые моменты использования position-anchor:

• Применяется только к элементам с position: absolute, fixed или, потенциально в будущем, relative.
• Значение должно точно соответствовать одному из объявленных на странице anchor-name.
• Позволяет одному позиционируемому элементу быть привязанным только к одному якорю в каждый момент времени (но один якорь может иметь множество привязанных к нему элементов).

Она используется внутри свойств top, right, bottom, left, inset, width и height. Синтаксис функции позволяет указать, относительно какой стороны якоря и с каким смещением нужно расположить элемент.

Базовый синтаксис: anchor( <anchor-side> <length-percentage>? )

/* Расположить нижний край элемента на 10px выше верхнего края якоря */
.popup {
  bottom: anchor(top 10px);
}

/* Расположить правый край элемента, выровняв его по правому краю якоря со сдвигом -100% (т.е. по левому краю) */
.side-panel {
  right: anchor(right -100%);
}

/* Центрирование элемента по горизонтали относительно якоря */
.modal {
  left: anchor(center);
  transform: translateX(-50%);
}

Доступные ключевые слова для anchor-side:

• Стороны: top, right, bottom, left.
• Центры: center (по умолчанию), self-center.
• Проценты: можно использовать процентное значение, например anchor(30%), что означает точку на 30% расстояния от верхнего края якоря к нижнему.

Эта функция обеспечивает невиданную ранее гибкость, позволяя «приклеивать» элементы к любой точке якоря с пиксельной или процентной точностью.

Она возвращает значение ширины или высоты элемента-якоря, что позволяет позиционируемому элементу масштабироваться соответствующим образом.

Функция принимает одно ключевое слово: width или height.

/* Ширина выпадающего меню равна ширине кнопки-якоря */
.dropdown-menu {
  position-anchor: --menu-btn;
  width: anchor-size(width);
}

/* Высота боковой панели равна 150% от высоты якоря */
.context-panel {
  position-anchor: --selected-item;
  height: calc(anchor-size(height) * 1.5);
}

Это особенно полезно для создания таких компонентов, как:

• Выпадающие списки, ширина которых точно соответствует ширине триггера.
• Всплывающие подсказки, которые растягиваются по ширине контента якоря.
• Контекстные окна, размеры которых динамически подстраиваются под связанный элемент.

Поскольку Anchor Positioning — относительно новая технология, критически важна реализация Fallback-стратегий (стратегий отката) для обеспечения работоспособности в браузерах, которые ее не поддерживают. Хорошей практикой является использование каскада и правил @supports для предоставления альтернативного, обычно JavaScript-решения.

.tooltip {
  /* Стандартное позиционирование, работающее везде */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Усовершенствованное позиционирование только для поддерживающих браузеров */
@supports (anchor-name: --dummy) {
  .tooltip {
    position-anchor: --tooltip-trigger;
    top: anchor(bottom);
    left: anchor(center);
    transform: translateX(-50%); /* Центрирование все еще может понадобиться */
    /* Сброс старых значений */
    top: anchor(bottom);
    left: anchor(center);
    transform: translateX(-50%);
  }
}

Рекомендуемый подход:

• Базовая версия: сначала напишите стили, использующие традиционные методы позиционирования (top, left, transform). Они будут работать во всех браузерах.
• Улучшенная версия: внутри правила @supports (anchor-name: --dummy) переопределите позиционирование, используя свойства Anchor Positioning. Поддерживающие браузеры применят эти более точные правила, игнорируя предыдущие.
• JavaScript-полифилл: для критически важного функционала можно рассмотреть использование (откроется в новой вкладке)полифилла, который эмулирует поведение Anchor Positioning.

Рассмотрим несколько практических примеров создания компонентов с помощью Anchor Positioning, которые наглядно демонстрируют мощь этой технологии. Эти паттерны часто встречаются в современных веб-интерфейсах.

1. Контекстное меню, привязанное к курсору или элементу

.trigger-area {
  anchor-name: --hover-target;
}
.tooltip {
  position: fixed;
  position-anchor: --hover-target;
  /* Появляется рядом с якорем, но не перекрывает его */
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);
}

2. Выпадающий список, идеально выровненный по кнопке

.dropdown-btn {
  anchor-name: --dd-btn;
}
.dropdown-list {
  position: absolute;
  position-anchor: --dd-btn;
  top: anchor(bottom);
  /* Ширина списка равна ширине кнопки */
  width: anchor-size(width);
  /* Выравнивание левого края */
  left: anchor(left);
}

3. Индикатор, позиционируемый относительно угла аватара

.avatar {
  anchor-name: --user-avatar;
}
.status-badge {
  position: absolute;
  position-anchor: --user-avatar;
  /* Размещение в правом нижнем углу аватара */
  bottom: anchor(bottom -5px); /* С небольшим смещением наружу */
  right: anchor(right -5px);
}

Эти примеры показывают, как несколько строк CSS заменяют десятки строк JavaScript, ранее необходимых для расчета позиции, обработки скролла и пересчета при изменении размеров окна.

Внедрение Anchor Positioning в рабочий процесс веб-разработки несет ряд значительных преимуществ, но также имеет и текущие ограничения.

Преимущества

Производительность: расчеты позиции делегированы браузеру и выполняются на уровне рендеринга (нативно), что значительно эффективнее JavaScript.

• Простота кода: сложная логика позиционирования описывается декларативно на CSS, делая код чище и легче для понимания.
• Отзывчивость: позиционирование автоматически реагирует на изменения макета, размеров якоря, скролл и изменения размеров окна без необходимости писать обработчики событий.
• Доступность: улучшается семантика и управление фокусом для вспомогательных технологий, так как связь между элементами четко определена.

Текущие ограничения и нюансы

Поддержка браузеров: на момент написания статьи технология поддерживается в последних версиях Chrome и Edge. За поддержкой в Firefox и Safari необходимо следить на ресурсах вроде (откроется в новой вкладке)caniuse.com.

• Сложность отладки: новые инструменты разработчика для визуализации связей якорь-элемент находятся в стадии разработки.
• Управление переполнением: необходимо внимательно следить за контекстами наложения и свойствами overflow у родителей, которые могут обрезать позиционируемые элементы.
• Динамическое изменение якоря: плавное переключение position-anchor между разными якорями может потребовать дополнительных CSS-переходов или JavaScript.

Хотите не просто следить за новыми технологиями вроде Anchor Positioning, а глубоко понимать их и применять на практике? Запишитесь на наш интенсивный онлайн-курс по современному CSS! Вы освоите продвинутую верстку, научитесь создавать сложные интерфейсы без лишнего JavaScript и сможете применять самые свежие спецификации в своих проектах уже сегодня. Станьте востребованным специалистом — начните обучение!

Если же Вы готовы воплотить современные технологии, такие как обсуждаемую в этой статье, в жизнь Вашего проекта? Закажите сайт в нашей веб-студии — мы создадим для вас уникальный, динамичный и высокотехнологичный веб-продукт, который будет выделяться на фоне конкурентов. Наши разработчики с глубоким пониманием современных стандартов реализуют самые смелые идеи, обеспечив вашему бизнесу мощное и эффективное цифровое присутствие.