Позиционирование якорей в веб-разработке
- 25 июня 2025
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
С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap
. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em
или rem
, но и относительно визуальной высоты заглавных букв.
Эта единица особенно полезна при работе с крупными заголовками, адаптивной типографикой и точным выравниванием текста.
- 8 июля 2025

Использование 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
JavaScript предоставляет три простых метода для взаимодействия с пользователем: alert()
, confirm()
и prompt()
. Эти функции встроены в глобальный объект window
и доступны в любом браузере. Они позволяют быстро отобразить сообщение, запросить подтверждение действия или получить текстовый ввод.
С 29 января 2018 года эти методы находятся в статусе «Widely Available» по Baseline, то есть их можно использовать без ограничений на совместимость.
- 7 июля 2025

Как использовать классы в JavaScript
Классы — это удобный синтаксис, который появился в JavaScript в стандарте ES2015 (ES6) и с 8 сентября 2018 года считается широко поддерживаемым (Baseline: Widely Available). Они позволяют создавать объекты по шаблону — с общими свойствами и методами — и писать более структурированный, понятный код.
За кулисами классы используют ту же прототипную модель, что и раньше. Но теперь вы можете описывать «объектные» структуры так, как это делается в других языках, вроде Java, Python или C# — с конструкторами, методами и наследованием.
- 5 июля 2025

CSS-свойство cursor для управления отображением курсора
Свойство cursor
управляет тем, как выглядит указатель мыши, когда пользователь наводит его на элемент. Оно помогает визуально показать, что элемент интерактивный, требует внимания или, наоборот, недоступен. Это особенно важно для улучшения удобства и предсказуемости интерфейса.
Хотя cursor
— базовое CSS-свойство, оно находится в статусе ограниченной доступности в Baseline, что значит: часть значений может не поддерживаться в старых браузерах или иметь особенности в поведении.
- 2 июля 2025

Управление асинхронными запросами с помощью AbortController
Когда вы отправляете асинхронный запрос — особенно через fetch
— бывает важно иметь возможность его отменить. Например, если пользователь ушёл со страницы, переключил вкладку или выполнил другое действие, которое делает запрос больше неактуальным. Если такие запросы не останавливать, они продолжают работать в фоне, потребляют ресурсы и могут привести к утечкам памяти или ошибкам, особенно если в ответе вы потом обновляете уже несуществующий интерфейс.
Для решения этой задачи в браузере появился AbortController
. Он доступен в статусе «Widely Available» с 25 сентября 2021 года, что означает — поддерживается всеми современными браузерами и безопасен для использования в продакшене.
- 26 июня 2025

Функция `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
🚀 Сегодня вам бесплатно доступен тренажёр по 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()
🚀 Сегодня вам бесплатно доступен тренажёр по 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 для позиционирования элементов
🚀 Сегодня вам бесплатно доступен тренажёр по 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