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

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

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

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

Метод ClipboardItem.supports() — это современный способ проверить, поддерживает ли браузер запись данных определённого типа в буфер обмена.

Он появился совсем недавно: доступен в Baseline в статусе «Newly Available» с 31 марта 2025 года. Это значит, что пока его можно использовать только в современных браузерах, и нужно внимательно проверять совместимость.

Функция находится в статусе ограниченной доступности в Baseline.

Объекты ClipboardItem позволяют писать и читать данные в буфер обмена в различных форматах, в том числе и SVG (image/svg+xml). Это удобно, если нужно скопировать или вставить графику в веб-приложения, сохраняя векторное качество изображения.

Пример использования — создание ClipboardItem для SVG и его копирование в буфер:

const svgData = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>`;

const blob = new Blob([svgData], { type: 'image/svg+xml' });
const item = new ClipboardItem({ 'image/svg+xml': blob });

navigator.clipboard.write([item])
  .then(() => console.log('SVG скопирован в буфер'))
  .catch(err => console.error('Ошибка копирования', err));

Чтобы считать SVG из буфера:

navigator.clipboard.read().then(data => {
  for (const item of data) {
    if (item.types.includes('image/svg+xml')) {
      item.getType('image/svg+xml').then(blob => {
        const reader = new FileReader();
        reader.onload = () => console.log('SVG из буфера:', reader.result);
        reader.readAsText(blob);
      });
    }
  }
});

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

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

Функция находится в статусе ограниченной доступности в Baseline.

При вызове navigator.clipboard.read() в браузере можно получить доступ к содержимому буфера обмена. Добавление параметра formats.unsanitized позволяет извлечь необработанные HTML или текстовые данные без их очистки или фильтрации. Это полезно, если нужно получить исходный контент, как он скопирован, без модификаций со стороны браузера.

Пример:

const items = await navigator.clipboard.read({ formats: { unsanitized: true } });
for (const item of items) {
  const types = item.types;
  if (types.includes('text/html')) {
    const blob = await item.getType('text/html');
    const htmlContent = await blob.text();
    console.log(htmlContent);
  }
}

Обратите внимание, что использование formats.unsanitized — экспериментальная фича, и поддержки в разных браузерах может не быть.

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

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

Функция находится в статусе ограниченной доступности в Baseline.

API CloseWatcher позволяет отслеживать запросы на закрытие элементов интерфейса, таких как модальные окна, поповеры или боковые панели. Он помогает создавать более реактивные интерфейсы, реагируя на действия пользователя или системные события.

Пример использования:

const watcher = new CloseWatcher(document.querySelector('.modal'));

watcher.onClose(() => {
  console.log('Модальное окно закрыто');
  // Можно выполнить дополнительные действия, например, скрыть или удалить элемент
});

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

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

Функция находится в статусе ограниченной доступности в Baseline.

Цветовой шорткод color-adjust в CSS позволяет одновременно устанавливать несколько настроек, связанных с отображением цветов. Он особенно полезен для обеспечения согласованности цветов при печати и на экранах, позволяя управлять тем, как браузер или устройство применяет цветовые коррекции.

Пример использования:

.element {
  color-adjust: economy print-color-adjust: economy;
}

Обратите внимание, что свойство print-color-adjust предпочтительнее использовать напрямую, так как оно точно указывает, что именно вы хотите настроить — цветовые корректировки при печати.

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

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

Функция находится в статусе ограниченной доступности в Baseline.

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

Пример использования:

.element {
  background-color: color-contrast(red, green, blue);
}

Если задать несколько цветов, color-contrast() выберет тот, что лучше выделится на фоне или по отношению к заданному цвету — отлично подходит для улучшения видимости элементов или текста.

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

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

Доступно в Baseline в статусе «Newly Available» c 2023-05-09.

Функция color() в CSS позволяет выбрать цвет из определённого цветового пространства, например, display-p3 или rec2020. Это даёт возможность создавать более насыщенные и яркие цвета, чем при использовании стандартной srgb. Bitmask color() помогает повысить качество и реалистичность графики на дисплее, особенно с современными экранами, или при оформлении элементов с акцентом на яркость.

Пример:

.element {
  background-color: color(display-p3 1 0 0);
}

Здесь указывается ярко-красный цвет из цветового пространства display-p3, который на современных дисплеях будет более насыщенным, чем обычный красный. В общем, эта функция полезна, когда нужно сделать цвета более живыми без сложных настроек и математических вычислений.

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

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

Доступно в Baseline в статусе «Newly Available» c 2023-02-14.

Медиа-запрос @media (color-gamut) позволяет применять стили в зависимости от широкой или узкой палитры цветов, которую способен показать дисплей. Это помогает оптимально подгонять дизайн: например, делать ярче или снизу насыщеннее для устройств с расширенной цветовой палитрой. Такой подход важен для современных экранов — OLED, Retina и подобных.

Пример использования:

@media (color-gamut: p3) {
  body {
    background-color: rgb(255, 0, 0);
  }
}

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

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

Доступно в Baseline в статусе «Newly Available» c 2023-05-09.

Функция color-mix() позволяет смешивать два цвета в выбранной цветовой модели, задавая долю каждого из них. Это удобно для создания градиентов, оттенков или уточнения цвета в дизайне — например, чтобы сделать чуть светлее или темнее. Работает она быстро и гибко с любыми цветами — будь то названия, HEX или RGB.

Пример использования:

/* Смешает красный и синий в пропорции 50/50 */
.output {
  background-color: color-mix(in srgb, red 50%, blue);
}

Функция color-mix() идеально подходит для динамических стилей и адаптивных дизайн-систем, делая переходы и оттенки плавными и точными.

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

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

Доступно в Baseline в статусе «Widely Available» с 2024-08-03

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

Пример использования:

.element {
  color-scheme: light dark;
}

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

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

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

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

Цвет CSS — это свойство, которое устанавливает основной цвет для текста, границ и линий украшения. Оно влияет на визуальную сторону элементов и помогает сделать интерфейс более приятным и читаемым. Можно задавать цвет через названия, HEX, RGB или HSL, выбирая подходящий способ в зависимости от задачи.

Пример установки цвета текста:

<p style="color: #ff5733;">Этот текст будет оранжево-красным</p>

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

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

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

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

Чтобы включить использование многоцветных шрифтов с COLRv0, нужно подключить соответствующий шрифт через CSS, например:

@font-face {
  font-family: 'ColorFont';
  src: url('your-color-font.otf') format('opentype');
}

Затем — применить его к тексту:

<p style="font-family: 'ColorFont'">Текст с цветным шрифтом COLRv0</p>

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

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

Функция находится в статусе ограниченной доступности в Baseline.

COLRv1 — это формат шрифтов, который позволяет вставлять в шрифты многоцветные глифы. Он расширяет предыдущую версию COLRv0, добавляя поддержку градиентов, трансформаций и режимов смешивания.

Пример использования: создавая шрифт с цветовыми глифами, можно указать в CSS или через API, как отображать разные части символов с разными цветами или эффектами, например:

<svg width="200" height="200">
  <text y="50" font-family="MyColorFont" font-size="40" fill="url(#grad)">
    А
  </text>
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="blue"/>
    </linearGradient>
  </defs>
</svg>

или в JavaScript — управлять цветами глифов через API шрифтов, поддерживающих COLRv1. Это позволяет делать яркие, современные и насыщенные шрифты для веб-страниц.

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

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

Функция находится в статусе ограниченной доступности в Baseline.

Колонные макеты с помощью свойств <columns> или column-countпозволяют раскладывать контент в несколько колонок. Свойстваbreak-after, break-beforeиbreak-inside` управляют тем, где происходит разрыв колонок — чтобы убрать нежелательные переносы или задать точку начала или конца колонок.

Например, чтобы вставить разрыв после блока внутри колонок, используйте:

.block {
  break-after: always;
}

Если нужно запретить разрыв внутри элемента или между определёнными сегментами, задайте:

.element {
  break-inside: avoid;
}

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

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

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

Свойство column-fill управляет тем, как контент распределяется по колонкам при использовании многостолбцового макета. Обычно оно используется, чтобы задать, заполняется ли каждая колонка полностью или контент равномерно распределяется между ними.

Можно установить column-fill в auto — тогда колонкам присваивается равное количество контента по мере его загрузки, или в balance — чтобы все колонки заполнялись равномерно. Для многостолбцовых контейнеров это особенно полезно при создании аккуратных газета-подобных блоков.

Пример:

.multicolumn {
  column-width: 200px;
  column-fill: balance;
}

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

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

Функция находится в статусе ограниченной доступности в Baseline.

Псевдоэлемент: column позволяет задавать стили для отдельных колонок внутри многостолбцового контейнера. Он применяется только для оформления и взаимодействует с CSS-свойствами, связанными с прокруткой — например, с scroll-snap-align. Также есть псевдоэлемент: scroll-marker, который помогает автоматическими средствами позиционировать скролл при активации.

Пример использования:

.multicolumn {
  column-count: 3;
  scroll-snap-type: x mandatory;
}

.multicolumn ::column {
  background-color: lightyellow;
  padding: 10px;
  border: 1px solid #ccc;
}

.multicolumn ::scroll-marker {
  background-color: red;
  height: 2px;
  display: block;
}

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

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

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

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

column-span — CSS-свойство, которое позволяет управлять тем, как элемент переносится в многоколоночных макетах. Оно говорит браузеру, должен ли элемент занимать всю ширину колонок (перекрыв все их), или оставаться внутри одной колонки. Обычно используется для заголовков и разделителей, чтобы добиться более аккуратного оформления.

Пример:

h2 {
  column-span: all;
}

Если задать <h2> с column-span: all, он растянется на всю ширину многоколонной области, делая разрыв между колонками более аккуратным и читаемым. Важно: свойство работает только в контексте с column-count или column-width, а также поддерживается не во всех браузерах.

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

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

Функция находится в статусе ограниченной доступности в Baseline.

Метод window.getSelection().getComposedRanges() позволяет получить диапазоны выделения пользователя, которые могут пересекать границы теневых деревьев. Такой вызов подходит для сложных случаев, когда выделение выходит за рамки обычного DOM и затрагивает элементы внутри Shadow DOM.

Пример использования:

const selection = window.getSelection();
const ranges = selection.getComposedRanges(); // Получает диапазоны выделения с учетом теневых деревьев
ranges.forEach(range => {
  console.log(range.toString()); // Выводит выделенный текст
});

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

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