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

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

Как это работает

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

Когда вы указываете font-size: 10cap, вы просите браузер установить такой размер шрифта, при котором заглавные буквы (например, H, T, A) будут примерно равны 10 условным единицам. В отличие от em или ch, cap опирается именно на высоту букв, которую дизайнер шрифта заложил в метрики гарнитуры.

Пример:

h1 {
  font-size: 10cap;
}

Если шрифт имеет заглавные буквы высотой, скажем, 0.7 от полной высоты строки, браузер пересчитает итоговый font-size, чтобы итоговая высота заглавной буквы была 10 единиц (например, пикселей).

Чем полезна единица cap

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

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

  3. Унификация размеров. Когда важно, чтобы текст в разных блоках (например, в кнопках и заголовках) имел одинаковую оптическую высоту, cap — отличный инструмент.

Когда использовать

  • При работе с динамически загружаемыми шрифтами, где em может вести себя нестабильно.
  • В компонентах, где важна визуальная симметрия текста и иконок.
  • Для выравнивания текста по вертикали — особенно если комбинируете текст с графикой.

Пример с вертикальным выравниванием:

.icon-label {
  padding-top: 1cap;
  padding-bottom: 1cap;
}

cap — это современная и точная единица измерения, которая делает работу с типографикой в CSS более контролируемой и предсказуемой. Она особенно полезна в проектах, где важна визуальная гармония и точность в отрисовке текста. Используйте её, если хотите добиться консистентности и избежать ручной подгонки размеров.

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

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


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

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

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

Использование 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
Горячие клавиши с помощью атрибута accesskey

Горячие клавиши с помощью атрибута accesskey

Атрибут accesskey позволяет назначить клавишу быстрого доступа к элементу на странице. Это может быть ссылка, кнопка или форма — всё, что может быть активировано с клавиатуры.

С 29 января 2018 года accesskey считается широко поддерживаемым (Baseline: «Widely Available»), то есть работает во всех современных браузерах.

Читать дальше
  • 25 июня 2025