Anchor positioning — это новая технология в CSS, позволяющая размещать один элемент относительно другого, как будто у вас есть «якорь», за который можно привязать блок. Это удобно для всплывающих меню, тултипов, подсказок и любых элементов, которые появляются около другого.

Сейчас эта технология находится в статусе ограниченной доступности в Baseline. Это значит, что она поддерживается не во всех браузерах и её использование требует проверки совместимости или прогрессивного улучшения.

Не путать с href="#id"

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Когда мы пишем:

<a href="#target">Перейти</a>

Это якорная ссылка, которая просто прокручивает страницу к элементу с id="target". Она не управляет расположением элементов на экране.

Anchor positioning — это про другое: про позиционирование одного блока относительно другого, независимо от прокрутки.

Пример: классический подход

Раньше, чтобы расположить элемент рядом с другим, мы использовали position: absolute и вычисляли координаты вручную:

<div id="target" style="position: relative;">
  Тут содержание
  <div style="position: absolute; top: 100%; left: 0;">
    Всплывающее меню
  </div>
</div>

Такой подход работает, но требует ручной настройки и не всегда адаптивен.

Что делает anchor positioning

С anchor positioning в CSS появляется возможность использовать один элемент как якорь для позиционирования другого, причём это делается декларативно.

Пример будущего синтаксиса (поддерживается пока только в некоторых браузерах, например, Chrome с флагами):

.popup {
  position-anchor: --tooltip;
  position: absolute;
  inset-area: anchor(center);
}

И в HTML:

<div id="target" anchor-name="--tooltip">
  Наведи сюда
</div>

<div class="popup">
  Подсказка!
</div>

В этом примере .popup будет размещён относительно элемента с anchor-name="--tooltip" — браузер сам вычислит координаты.

Важно: на сегодняшний день

Поскольку anchor positioning пока в статусе limited, использовать его в боевых проектах можно только с запасным планом. То есть:

  • делайте проверку поддержки через @supports или JavaScript;
  • предлагайте fallback — позиционирование через absolute/fixed и getBoundingClientRect().

Позиционирование якорей — это шаг к более гибкому и семантичному управлению расположением элементов на странице. Вместо ручного высчитывания координат и зависимостей, вы можете описать связь декларативно.

Но пока это работает не везде. Если используете — обязательно обеспечьте резервный способ отображения. А как только поддержка станет широкой — anchor positioning упростит разработку интерактивных и адаптивных компонентов.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Единица измерения cap в CSS

Единица измерения cap в CSS

С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em или rem, но и относительно визуальной высоты заглавных букв.

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

Читать дальше
  • 8 июля 2025
Использование CSS функций pow, sqrt, hypot, log и exp

Использование CSS функций pow, sqrt, hypot, log и exp

С 7 декабря 2023 года (Baseline: Newly Available) в CSS появились нативные математические функции, которые позволяют выполнять вычисления прямо в стилях — без JavaScript, препроцессоров и переменных. Это важный шаг к более гибкому и выразительному управлению размерами, отступами и другими параметрами оформления.

Теперь вы можете применять привычные математические операции, такие как:

  • pow(x, y) — возведение числа x в степень y;
  • sqrt(x) — извлечение квадратного корня;
  • log(x) — натуральный логарифм;
  • exp(x) — экспонента (e в степени x).

Все эти функции используются внутри calc(), так как именно calc() позволяет комбинировать числа и единицы измерения. Это значит, что вы можете не просто считать, а подставлять вычисленные значения в реальные CSS-свойства.

Пример:

.element {
  width: calc(pow(2, 3) * 10px); /* Результат: 8 * 10px = 80px */
}

Такой подход даёт больше свободы в оформлении без использования JavaScript. Например, вы можете рассчитывать ширины, высоты, пропорции или даже динамически адаптировать отступы в зависимости от других значений — прямо в CSS.

Читать дальше
  • 8 июля 2025
Методы окон alert, confirm и prompt в JavaScript

Методы окон alert, confirm и prompt в JavaScript

JavaScript предоставляет три простых метода для взаимодействия с пользователем: alert(), confirm() и prompt(). Эти функции встроены в глобальный объект window и доступны в любом браузере. Они позволяют быстро отобразить сообщение, запросить подтверждение действия или получить текстовый ввод.

С 29 января 2018 года эти методы находятся в статусе «Widely Available» по Baseline, то есть их можно использовать без ограничений на совместимость.

Читать дальше
  • 7 июля 2025
Как использовать классы в JavaScript

Как использовать классы в JavaScript

Классы — это удобный синтаксис, который появился в JavaScript в стандарте ES2015 (ES6) и с 8 сентября 2018 года считается широко поддерживаемым (Baseline: Widely Available). Они позволяют создавать объекты по шаблону — с общими свойствами и методами — и писать более структурированный, понятный код.

За кулисами классы используют ту же прототипную модель, что и раньше. Но теперь вы можете описывать «объектные» структуры так, как это делается в других языках, вроде Java, Python или C# — с конструкторами, методами и наследованием.

Читать дальше
  • 5 июля 2025
CSS-свойство cursor для управления отображением курсора

CSS-свойство cursor для управления отображением курсора

Свойство cursor управляет тем, как выглядит указатель мыши, когда пользователь наводит его на элемент. Оно помогает визуально показать, что элемент интерактивный, требует внимания или, наоборот, недоступен. Это особенно важно для улучшения удобства и предсказуемости интерфейса.

Хотя cursor — базовое CSS-свойство, оно находится в статусе ограниченной доступности в Baseline, что значит: часть значений может не поддерживаться в старых браузерах или иметь особенности в поведении.

Читать дальше
  • 2 июля 2025
Управление асинхронными запросами с помощью AbortController

Управление асинхронными запросами с помощью AbortController

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

Для решения этой задачи в браузере появился AbortController. Он доступен в статусе «Widely Available» с 25 сентября 2021 года, что означает — поддерживается всеми современными браузерами и безопасен для использования в продакшене.

Читать дальше
  • 26 июня 2025
Функция `cubic-bezier()` в CSS для плавных анимаций

Функция `cubic-bezier()` в CSS для плавных анимаций

Когда вы задаёте анимацию или переход в CSS, свойства изменяются неравномерно: сначала медленно, потом быстрее, в конце снова замедляются. Это поведение называется интерполяцией и определяется так называемой функцией ускорения (или «easing function»). По умолчанию браузеры используют значения вроде ease, ease-in, ease-out и linear. Но если вам нужно больше контроля над тем, как именно свойство изменяется во времени, пригодится функция cubic-bezier().

Эта функция позволяет задать собственную кривую ускорения с помощью четырёх чисел — координат двух управляющих точек Безье. Эти значения описывают, как «разгоняется» и «тормозит» анимация. cubic-bezier() поддерживается всеми современными браузерами с 29 января 2018 года (Baseline: Widely Available), так что её можно спокойно использовать в продакшене.

Читать дальше
  • 26 июня 2025
Остановка fetch-запросов с AbortController

Остановка fetch-запросов с AbortController

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Widely Available» с 2021-09-25

AbortController и его сигнал AbortSignal позволяют отменить активную операцию, например, fetch-запрос. Вы создаёте экземпляр AbortController, получаете связанный с ним сигнал и передаёте его в fetch. Когда нужно прервать запрос, вызываете метод abort() у контроллера. Это удобно, чтобы управлять временем отклика или избегать утечек памяти.

Пример:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Запрос отменён');
    } else {
      console.error('Ошибка', error);
    }
  });

// чтобы отменить запрос
controller.abort();

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

  • 25 июня 2025
Объединение сигналов отмены в AbortSignal.any()

Объединение сигналов отмены в AbortSignal.any()

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Newly Available» c 2024-03-19.

AbortSignal.any () — это статический метод, который объединяет несколько сигналов отмены <AbortSignal>. Он возвращает один новый сигнал, который срабатывает, когда любой из исходных сигналов активируется, причём причина отмены берётся из первого активировавшегося сигнала. Это удобно, когда нужно реагировать сразу на любой из нескольких условий отмены.

const controller1 = new AbortController();
const controller2 = new AbortController();

const combinedSignal = AbortSignal.any([controller1.signal, controller2.signal]);

combinedSignal.addEventListener('abort', () => {
  console.log('Отмена вызвана одним из сигналов');
});

// Пример вызова отмены любого из них
controller1.abort('Причина от первого');

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

  • 25 июня 2025
Использование position absolute для позиционирования элементов

Использование position absolute для позиционирования элементов

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Position: absolute убирает элемент из нормального потока документа и позволяет размещать его точно по координатам относительно ближайшего родителя с установленным position или, если такового нет — относительно окна браузера. Это удобно для создания всплывающих окон, меню и элементов, требующих точного позиционирования.

Пример:

<div style="position: relative; width: 300px; height: 200px; background: #eee;">
  <div style="position: absolute; top: 20px; left: 30px; background: #f00; width: 100px; height: 50px;">
    Вложенный блок
  </div>
</div>

Здесь внутренний <div> с position: absolute позиционируется относительно своего ближайшего родителя с position: relative.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

  • 25 июня 2025