CSS логические свойства для размеров и отступов по направлению текста
- 25 июня 2025
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Доступно в Baseline в статусе «Widely Available» с 2024-03-20
CSS логические свойства позволяют управлять отступами, границами, размерами элементов, исходя из направления текста (например, слева направо или сверху вниз). Это удобно, если сайт должен корректно отображаться на языках с разной записью — например, на арабском или японском. Вместо фиксированных margin-left
, padding-top
используют свойства типа margin-start
, padding-end
, которые автоматически меняются при изменении направления письма.
Пример использования:
.element {
margin-block-start: 10px; /* сверху в вертикальной ориентации */
margin-inline-end: 20px; /* справа в горизонтальной ориентации LTR */
border-block-end: 2px solid black; /* нижняя граница в вертикальной ориентации */
}
Больше обзоров веб-функций — в телеграм-канале 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