Новое на веб-платформе в марте

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

Рэйчел Эндрю

Опубликовано: 31 марта 2025 г.

Стабильные версии браузера

В марте 2025 года Firefox 136 , Chrome 134 и Safari 18.4 стали стабильными. В этом посте рассматриваются новые функции, добавленные в веб-платформу.

Новые псевдоклассы :has-slotted и :open

Firefox 136 поддерживает псевдокласс :has-slotted , используемый для стилизации элементов в <template> , контент которых добавляется в элемент <slot> при рендеринге веб-компонента.

Browser Support

  • Хром: 134.
  • Край: 134.
  • Фаерфокс: 136.
  • Сафари: не поддерживается.

Source

Псевдокласс :open позволяет выбрать любой элемент, который в данный момент находится в открытом состоянии. Это относится к элементам <details> , <dialog> , <input> со средством выбора и элементам <select> , когда раскрывающееся поле выбора открыто.

Browser Support

  • Хром: 133.
  • Край: 133.
  • Фаерфокс: 136.
  • Сафари: не поддерживается.

Source

Intl.DurationFormat

Firefox 136 также поддерживает Intl.DurationFormat . Это позволяет форматировать длительность с учетом локали. Эта функция присоединяется к Baseline, и вы можете узнать больше в Intl.DurationFormat теперь доступен Baseline .

Browser Support

  • Хром: 129.
  • Край: 129.
  • Фаерфокс: 136.
  • Сафари: 16.4.

Source

Значение атрибута contenteditable plaintext-only

Еще одна функция, которая становится базовой. Недавно стала доступной в этом выпуске Firefox, это значение глобального атрибута contenteditable plaintext-only . Подробнее об этом значении читайте в разделе Комбинация значений атрибута contenteditable «только для простого текста» теперь является базовой версией .

Browser Support

  • Хром: 51.
  • Край: ≤79.
  • Фаерфокс: 136.
  • Сафари: ≤13,1.

Режимы бокового написания для CSS

Safari 18.4 включает поддержку writing-mode: sideways-rl и writing-mode: sideways-lr . Эти значения используются, когда вы хотите отображать текст вертикально для целей представления. Теперь они должны стать базовыми новыми доступными.

Browser Support

  • Хром: 132.
  • Край: 132.
  • Фаерфокс: 43.
  • Сафари: 18.4.

Функция CSS shape()

Также в Safari 18.4 есть функция CSS shape() , позволяющая создавать адаптивные фигуры произвольной формы в пути обрезки.

Browser Support

  • Хром: не поддерживается.
  • Край: не поддерживается.
  • Предварительная версия технологии Firefox: поддерживается.
  • Сафари: 18.4.

Source

ClipboardItem.support()

Safari 18.4 реализует метод support() для ClipboardItem() . Это позволяет увидеть, какие форматы поддерживаются во время операций с буфером обмена, и теперь доступно в базовой версии.

Browser Support

  • Хром: 121.
  • Край: 121.
  • Фаерфокс: 127.
  • Сафари: 18.4.

Source

Отключить свет для <dialog>

Одной из приятных особенностей Popover API является его легкое закрытие. Это поведение теперь является частью <dialog> , реализованного в Chrome 134, с новым атрибутом closedby , управляющим этим поведением.

Browser Support

  • Хром: 134.
  • Край: 134.
  • Firefox: не поддерживается.
  • Сафари: не поддерживается.

API веб-блокировок теперь поддерживается в общем хранилище.

Chrome 134 интегрирует API веб-блокировок в общее хранилище. Это предотвращает сценарии, например, когда измерение охвата между сайтами может привести к дублированию отчетов из-за потенциальных условий гонки в логике get() и set() .

Бета-версии браузера

Бета-версии браузера дают вам предварительный просмотр того, что будет в следующей стабильной версии браузера. Это прекрасное время для тестирования новых функций или удалений, которые могут повлиять на ваш сайт, прежде чем мир получит эту версию. Новые бета-версии — Firefox 137 и Chrome 135 . Эти выпуски привносят в платформу множество замечательных функций. Ознакомьтесь со всеми подробностями в примечаниях к выпуску. Вот лишь несколько основных моментов.

Firefox 137 включает статический метод Math.sumPrecise , который возвращает сумму итерируемого объекта (например, массива). Этот выпуск также включает Atomics.pause() . Этот метод дает ЦП подсказку о том, что текущий поток находится в спин-блокировке во время ожидания доступа к общему ресурсу.

Chrome 135 включает в себя ряд функций CSS, связанных с созданием каруселей. Он также включает настраиваемые элементы <select> и атрибуты command и commandfor .