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

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

Rachel Andrew

Опубликовано: 30 июня 2026 г.

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

В июне в стабильную версию вышли Chrome 149 , Chrome 150 и Firefox 152. В этом месяце стабильного релиза Safari не было. В этой статье мы рассмотрим новые функции, появившиеся в веб-браузерах.

Изменение размера элементов управления формы с помощью field-sizing становится базовым.

В Firefox 152 добавлена ​​поддержка свойства CSS field-sizing , что делает автоматическое изменение размера элементов управления формами доступным во всех основных браузерных движках.

Свойство field-sizing позволяет элементам управления форм, таким как <textarea> , <input> и <select> динамически уменьшаться или увеличиваться в соответствии со своим содержимым ( field-sizing: content ), вместо того, чтобы оставаться фиксированными по умолчанию ( field-sizing: fixed ). Это устраняет необходимость в обходных путях JavaScript при создании текстовых полей ввода или текстовых областей, размер которых изменяется по мере ввода пользователем текста.

textarea {
  field-sizing: content;
}

Основные фигуры rect() и xywh() в shape-outside становятся базовыми линиями.

Благодаря поддержке функций rect() и xywh() в свойстве shape-outside в Chrome версии 149, эти базовые фигуры теперь доступны во всех основных браузерах.

Функции rect() и xywh() позволяют определять прямоугольные области исключения плавающих объектов, используя точные координаты отступа или синтаксис «начало координат и размеры». Это обеспечивает более простой и читаемый синтаксис, чем использование функции polygon() для прямоугольных фигур, охватывающих плавающие объекты.

Автоматическое масштабирование шрифта с помощью CSS text-fit

В Chrome 150 появилось свойство CSS text-fit , позволяющее разработчикам автоматически масштабировать размер шрифта в соответствии с шириной содержащего его блока.

.headline {
  text-fit: grow;
}

CSS-декорации пробелов

В Chrome 149 добавлена ​​поддержка CSS-заполнителей пробелов в макетах на основе сетки и flexbox. Заполнители пробелов позволяют добавлять линии и стили непосредственно к расстоянию между элементами сетки и flexbox, аналогично символу column-rule в многоколоночных макетах.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Узнайте больше в разделе «Декоративные элементы Gap: теперь в Chromium» .

CSS background-clip: border-area

В Chrome 150 добавлена ​​поддержка свойства background-clip: border-area из CSS Backgrounds Level 4.

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

Программные обещания прокрутки

В Chrome 150 методы программной прокрутки ( scrollTo() , scrollBy() и scrollIntoView() ) теперь возвращают Promise.

Возвращаемое промис-событие разрешается по завершении плавной анимации прокрутки, обеспечивая надежный сигнал для запуска последующих действий после стабилизации прокрутки.

Декларативная навигация с помощью клавиатуры и focusgroup

В Chrome 150 добавлена ​​поддержка атрибута focusgroup .

Атрибут focusgroup позволяет разработчикам декларативно управлять навигацией с помощью клавиш со стрелками по составным элементам пользовательского интерфейса (таким как панели инструментов, списки вкладок и меню) без необходимости вручную писать обработчики событий клавиатуры.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Узнайте больше из пояснительной записки фокус-группы .

Поддержка WebSocket в кэше Back/Forward Cache (bfcache)

В Chrome версии 149 страницы с активными соединениями WebSocket теперь могут попадать в кэш "Назад/Вперед" (bfcache).

Ранее открытое соединение WebSocket делало страницу непригодной для кэширования bfcache. Теперь браузер автоматически закрывает активные соединения WebSocket при обращении к bfcache, позволяя кэшировать страницу и мгновенно восстанавливать её при повторном посещении.

Временные параметры ответа промежуточных и заголовочных данных в Resource Timing

В Firefox 152 добавлена ​​поддержка методов firstInterimResponseStart и finalResponseHeadersStart в интерфейсе PerformanceResourceTiming .

Эти параметры можно использовать для измерения времени, необходимого браузеру для получения промежуточных HTTP-ответов и окончательного HTTP-ответа после отправки запроса, соответственно.

Кнопки действий для уведомлений

В Firefox 152 добавлена ​​поддержка кнопок действий уведомлений с использованием свойства actions объекта Notification и параметров в ServiceWorkerRegistration.showNotification() .

Теперь вы можете добавлять кнопки действий в уведомления операционной системы и отслеживать действия пользователя при нажатии на эти кнопки.

Выпуск бета-версий браузера

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

В Firefox 153 beta добавлена ​​поддержка Error.stackTraceLimit для настройки максимальной глубины трассировки стека, IDBObjectStore.getAllRecords() и IDBIndex.getAllRecords() для получения индексированных записей, а также RTCDtlsTransport.getRemoteCertificates() для проверки безопасности WebRTC. Разработчики дополнений также получают новый API publicSuffix и метод userScripts.execute() для внедрения скриптов по запросу.

В бета-версии Safari 27 появились функции позиционирования привязки с учетом преобразований, псевдокласс :heading для сопоставления элементов заголовка, ключевое слово revert-rule для отмены каскадных слоев, поддержка ключевого слова stretch при изменении размера блока, а также составные селекторы :host:has() .