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

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

Элементы <animate>, <animateMotion> и <animateTransform> позволяют создавать анимацию внутри SVG без использования JavaScript. Вы декларативно задаете параметры движения, вращения, масштабирования и других эффектов, задавая атрибуты прямо в разметке. Это удобно для простых анимаций, которые не требуют сложных сценариев.

Пример использования <animate> для изменения цвета заливки:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red">
    <animate attributeName="fill" values="red;blue;red" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

Для перемещения объекта по траектории используют <animateMotion>:

<svg width="200" height="200">
  <circle cx="0" cy="100" r="10" fill="green">
    <animateMotion dur="4s" repeatCount="indefinite">
      <mpath xlink:href="#path1" />
    </animateMotion>
  </circle>
  <path id="path1" d="M0,100 C50,0 150,200 200,100" fill="none" stroke="gray" />
</svg>

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

Больше обзоров веб-функций — в телеграм-канале 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