Определите резервные позиции с помощью запросов закрепленных контейнеров из Chrome 143

Уна Кравец

Опубликовано: 29 октября 2025 г.

Начиная с Chrome 143, вы можете использовать запросы к прикреплённым контейнерам, чтобы определить, использует ли прикреплённый элемент резервное позиционирование прикреплённого элемента. В этой статье объясняется проблема, которую решает эта функция.

API позиционирования якорей CSS предоставляет мощный способ привязать элемент (например, всплывающее окно) к другому элементу (якорю) и определить набор вариантов позиционирования и попыток возврата, которые будут использоваться, если элементу не хватит места. Например, если ваш привязанный элемент изначально стилизован для размещения сверху, но при прокрутке он достигает края экрана, браузер может обработать «переворот», чтобы он оставался в области просмотра.

Однако уровень 1 спецификации позиционирования якорей содержал существенный пробел: хотя CSS мог переместить элемент в резервную позицию, он не мог определить, какая именно резервная позиция была выбрана. Это означало, что нельзя было применять разные стили в зависимости от этой конечной позиции. Если подсказка переворачивалась снизу вверх, её стрелка всё равно указывала в неправильном направлении, пока это не было исправлено с помощью JavaScript.

Закрепленные контейнерные запросы (определенные в спецификации CSS Anchor Position Level 2 ) решают эту проблему, предоставляя позиционированию якоря CSS контекстную осведомленность, которой ему не хватало.

Как это работает: запросы к резервным вариантам

Запросы с закрепленным контейнером позволяют применять стили на основе того, как браузер определил положение якоря.

Это реализовано с помощью двух новых функций CSS:

  • container-type: anchored : Примените это к позиционируемому элементу (например, к подсказке). Это превратит его в контейнер запроса, «знающий» о состоянии своего якорного положения.
  • @container anchored(fallback: ...) : этот новый синтаксис at-rule позволяет вам запрашивать, какой параметр position-try-fallbacks был в конечном итоге использован.

Представьте, что у вас есть подсказка, которую вы хотите разместить внизу, но оставить верхнюю позицию в качестве запасного варианта. Следующий код:

  • Первоначально пытается расположить .tooltip внизу его якоря ( --my-anchor ).
  • Если он не помещается, резервный вариант перемещает его наверх.
  • Запрос @container обнаруживает это. При применении верхнего резервного варианта запрос anchored(fallback: top) становится истинным.
  • Это позволяет изменить содержимое псевдоэлемента ::before со стрелки «вверх» (▲) на стрелку «вниз» (▼) и настроить его положение. 
/* The element our tooltip is anchored to */
.anchor {
  anchor-name: --my-anchor;
}

/* The positioned element (tooltip) */
.tooltip {
  /* Use anchor positioning to set fallbacks */
  position: absolute;
  margin-top: 1rem;
  position-anchor: --my-anchor;
  position-area: bottom;
  position-try-fallbacks: flip-block; /* Reposition in the block direction */
  
  /* Make it an anchored query container */
  container-type: anchored;

  /* Add a default "up" arrow */
  &::before {
    content: '▲';
    position: absolute;
    bottom: 100%; /* Sits on top of the tooltip, pointing up */
  }
}

/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
  .tooltip::before {
    /* The 'top' fallback was used, so flip the arrow */
    content: '▼';
    bottom: auto;
    top: 100%; /* Move the arrow below the tooltip */
  }
}

Всё это реализовано исключительно на CSS — без JavaScript, без наблюдателей и без дополнительных классов. Примечание: если вы используете API всплывающего окна, вам не нужно явно указывать имена якорей, поскольку создаётся неявная связь между ними.

Ознакомьтесь со следующей демонстрацией, в которой используется хак с границами для создания CSS-треугольника и изменение положения треугольника с помощью закрепленных запросов:

Заключение

Закреплённые запросы обеспечивают встроенную в браузер CSS-систему определения текущего положения якоря позиционируемого элемента. Это позволяет создавать гораздо более устойчивые и контекстно-зависимые компоненты. Стрелка-подсказка — лишь один из примеров; вы также можете:

  • Измените цвет фона меню при его переворачивании.
  • Переместите стиль границы к краю, ближайшему к якорю.
  • Отрегулируйте border-radius на всплывающем окне так, чтобы «прикрепленный» угол был квадратным.
  • Анимируйте элемент по-разному в зависимости от того, к какой резервной позиции он привязан.

Это огромное достижение для позиционирования якорей и библиотек компонентов в целом, позволяющее создавать более надежные и самостоятельные элементы пользовательского интерфейса с меньшим объемом кода.

Ресурсы