Обзор на браузерные API, которые стали Widely available в октябре 2025. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

Как мы понимаем, что уже можно использовать в проде?

У каждой компании, да что уж там компании, у каждой команды в компании своя методика принятия решения о внедрении той или иной фичи в проекте.

Общий же сценарий выглядит так:

• Посмотрели в пользовательские метрики. Поняли какими браузерами и их версиями в основном пользуются пользователи проекта;

• Заглянули в caniuse и поняли, какие фичи уже поддерживаются большинством браузеров;

• Приняли решение о внедрении той или иной фичи в проект.

Какие-то команды позволяют себе указывать правило последние «три версии браузеров». У других специфика проекта, что проект работает исключительно на iPad с Safari. Сами понимаете, все мы разные и требования разные, и у каждого свой подход.

Baseline - позволяет немного упростить процесс принятия решения о внедрении той или иной фичи в проект. Если фича Widely available значит фича уже как минимум есть во всех основных браузерах как минимум стабильно используются последние 2.5 года.

Какие фичи в вебе стали Widely available в октябре 2025?

• Canvas: createConicGradient()

• Canvas: roundRect()

• HTML: inert

Canvas: createConicGradient()

Метод createConicGradient() интерфейса CanvasRenderingContext2D из HTML Canvas 2D API позволяет создать конический градиент — то есть цветовой переход, который «вращается» вокруг заданной точки-центра, наподобие цветового круга.

Такой градиент может быть назначен свойству fillStyle или strokeStyle и затем применён при отрисовке фигур на элементе <canvas>.

Применяется, например, для визуализаций типа цветовой диаграммы, интерфейсных элементов с круговым градиентом, визуализаций данных, эффектов вращения цвета и т.п.

Синтаксис

const gradient = ctx.createConicGradient(startAngle, x, y);

Где:

• startAngle — угол, с которого начинается градиент, в радианах. Угол отсчитывается от горизонтальной линии вправо, затем по часовой стрелке.

• x, y — координаты центра градиента относительно системы координат текущего canvas контекста.

После создания градиента вы вызываете gradient.addColorStop(offset, color) несколько раз, чтобы задать точки перехода цвета (offset от 0 до 1). Затем назначаете ctx.fillStyle = gradient или ctx.strokeStyle = gradient и рисуете фигуру.

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

Ниже — минимальный пример, как можно использовать createConicGradient():

<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  // создаём конический градиент, начинаем с угла 0 радиан, центр в 150×150
  const gradient = ctx.createConicGradient(0, 150, 150);

  // задаём цветовые переходы
  gradient.addColorStop(0   , "red");
  gradient.addColorStop(0.25, "orange");
  gradient.addColorStop(0.5 , "yellow");
  gradient.addColorStop(0.75, "green");
  gradient.addColorStop(1   , "blue");

  // назначаем стиль заливки и рисуем круг
  ctx.fillStyle = gradient;
  ctx.beginPath();
  ctx.arc(150,150,100,0,Math.PI*2);
  ctx.fill();
</script>

В этом примере получаем круг радиусом 100px, в центре (150,150), залитый цветовым кругом (красный → оранжевый → жёлтый → зелёный → синий).

Canvas: roundRect()

Ещё один удобный метод - это CanvasRenderingContext2D.roundRect(). Он позволяет рисовать прямоугольники с закруглёнными углами без необходимости вручную комбинировать arcTo() или quadraticCurveTo().

Раньше, чтобы нарисовать прямоугольник с закруглёнными углами на <canvas>, разработчикам приходилось писать довольно объёмный код, либо использовать сторонние утилиты. С появлением roundRect() всё стало проще: теперь можно создать такой прямоугольник в один вызов.

Это особенно полезно при построении кастомных UI-компонентов, визуализаций с карточками, кнопками, бейджами и другими элементами с мягкими формами — прямо в canvas без излишней сложности.

Синтаксис

ctx.roundRect(x, y, width, height, radii);

Где:

• x, y — координаты левого верхнего угла прямоугольника.

• width, height — ширина и высота.

• radii — радиус закругления углов. Может быть:

  • Числом (одинаковый радиус для всех углов),

  • Объектом { topLeft, topRight, bottomRight, bottomLeft },

  • Массивом из 1–4 значений (по аналогии с CSS border-radius).

Метод не рисует прямоугольник сам по себе — он лишь добавляет путь в текущий контекст. Чтобы отобразить фигуру, нужно вызвать fill() или stroke().

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

<canvas id="canvas" width="300" height="200"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  // Простой закруглённый прямоугольник
  ctx.fillStyle = '#4CAF50';
  ctx.beginPath();
  ctx.roundRect(20, 20, 200, 100, 20);
  ctx.fill();

  // Прямоугольник с разными радиусами
  ctx.strokeStyle = '#FF5722';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.roundRect(20, 130, 200, 50, [10, 20, 5, 30]);
  ctx.stroke();
</script>

В этом примере:

• Первый прямоугольник закрашен зелёным цветом с равномерным радиусом 20px.

• Второй — обведён оранжевой линией, и каждый угол имеет свой радиус.

HTML: inert

Атрибут inert - одно из самых полезных, но долгое время игнорируемых улучшений для доступности и UX.

Атрибут inert делает элемент и всё его содержимое неинтерактивным и невидимым для вспомогательных технологий (например, скринридеров). Элементы с inert:

• Не получают фокус.

• Не реагируют на клики, нажатия клавиш и другие события.

• Игнорируются при навигации с клавиатуры.

• Исчезают из дерева доступности.

Типичные сценарии использования:

• Затемнение фона при открытии модального окна, чтобы пользователь не мог взаимодействовать с основным контентом.

• Отключение интерактивности у сложных форм во время загрузки.

• Временное скрытие секций интерфейса без их физического удаления из DOM.

Раньше для подобного поведения приходилось:

• Вручную добавлять aria-hidden="true" и tabindex="-1" рекурсивно.

• Отключать обработчики событий.

• Использовать JavaScript-библиотеки или кастомные решения.

Теперь всё это можно сделать с помощью одного HTML-атрибута.

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

<div class="modal modal--show">
  <p>Вы уверены?</p>
  <button id="confirm">Да</button>
  <button id="cancel">Нет</button>
</div>

<main inert>
  <h1>Основной контент</h1>
  <button onclick="openModal()">Удалить профиль</button>
</main>

<script>
  function openModal() {
    document.querySelector('main').setAttribute('inert', '');
  }

  document.getElementById('cancel').onclick = () => {
    document.querySelector('main').removeAttribute('inert');
  };
</script>

Когда модальное окно открыто, основной контент становится «инертным» — пользователь не может случайно нажать на кнопки в <main>, а скринридеры не озвучат его содержимое.

Следующий выпуск — в начале декабря. До встречи!