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

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

Рэйчел Эндрю

Опубликовано: 28 февраля 2025 г.

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

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

Проверьте возможности WebAuthn

В Firefox 135 и Chrome 133 добавлена ​​поддержка статического метода PublicKeyCredential.getClientCapabilities() . Это позволяет вам проверить, поддерживает ли браузер функции API веб-аутентификации, без необходимости прибегать к анализу браузера.

Browser Support

  • Хром: 133.
  • Край: 133.
  • Фаерфокс: 135.
  • Сафари: 17.4.

Source

Firefox 135 также включает в себя функции анализа JSON с предложением источника — аргумент context параметра reviver JSON.parse , JSON.isRawJSON() и JSON.rawJSON() .

Browser Support

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

Source

Значение подсказки атрибута popover

В Chrome 133 добавлено третье значение атрибута popover — popover="hint" . Подсказки, которые чаще всего связаны с поведением типа «подсказка», ведут себя несколько иначе. Теперь можно открыть несвязанную всплывающую подсказку, в то время как существующий стек автоматических всплывающих окон остается открытым.

Канонический пример: окно выбора <select> открыто ( popover="auto" ) и отображается всплывающая подсказка, активируемая при наведении курсора мыши ( popover="hint" ). Это действие не закрывает средство выбора <select> .

Browser Support

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

Подробнее читайте в Popover=hint .

Расширенная функция CSS attr()

В Chrome 133 есть хорошая коллекция дополнений CSS. Этот выпуск Chrome включает расширение attr() указанное в CSS Level 5, которое позволяет использовать типы, кроме <string> , во всех свойствах CSS (в дополнение к существующей поддержке содержимого псевдоэлементов).

Browser Support

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

Узнайте больше об обновлении CSS attr() .

Запросы контейнера состояния прокрутки CSS

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

Контейнер запроса — это либо контейнер прокрутки, либо элемент, на который влияет положение прокрутки контейнера прокрутки. Могут быть запрошены следующие состояния:

  • stuck : контейнер с липким расположением приклеен к одному из краев ползунка прокрутки.
  • snapped : Контейнер, выровненный по привязке к прокрутке, в настоящее время привязан горизонтально или вертикально.
  • scrollable : можно ли прокручивать контейнер прокрутки в запрошенном направлении.

Также появилось новое значение для container-type : scroll-state , которое позволяет запрашивать контейнеры.

Browser Support

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

Прочтите CSS scroll-state() чтобы узнать больше.

CSS text-box , text-box-trim и text-box-edge

Также в CSS для Chrome 133 есть свойства text-box-trim и text-box-edge , а также свойство text-box shorthand, которые позволяют более точно контролировать вертикальное выравнивание текста.

Browser Support

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

Узнайте больше о том, как это полезное свойство работает в CSS text-box-trim .

Шаг по сохранению состояния DOM

В Chrome 133 добавлен примитив DOM ( Node.prototype.moveBefore ), который позволяет перемещать элементы по дереву DOM без сброса состояния элемента.

При перемещении вместо удаления и вставки сохраняется следующее состояние:

  • Элементы <iframe> остаются загруженными.
  • Активным элементом остается фокус.
  • Поповеры, полноэкранные и модальные диалоговые окна остаются открытыми.
  • CSS-переходы и анимация продолжаются.

Browser Support

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

Интерфейс FileSystemObserver

Интерфейс FileSystemObserver , добавленный в Chrome 133, уведомляет веб-сайты об изменениях в файловой системе. Сайты наблюдают за изменениями в файлах и каталогах, на которые пользователь ранее предоставил разрешение, на локальном устройстве пользователя или в файловой системе сегмента (также известной как исходная частная файловая система) и уведомляются об основной информации об изменении, например о типе изменения.

Browser Support

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

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

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

Последняя бета-версия Safari содержит огромный список дополнений и улучшений, включая некоторые функции, которые, как мы ожидаем, станут доступными в качестве базовой версии, как только этот браузер станет стабильным. Например, writing-mode: sideways-rl и writing-mode: sideways-lr , статический метод supports() для ClipboardItem и целый список вещей из предложения Iterator Helpers.

Бета-версия Safari 18.4 и Firefox 136 включают в себя API хранилища файлов cookie, который должен стать базовой версией после выхода обоих браузеров.

Firefox 136 включает псевдоклассы :open и :has-slotted , последний также присутствует в Chrome 134. Он также включает Intl.DurationFormat , который затем должен быть доступен в качестве Baseline Newly.

Chrome 134 включает настраиваемые элементы <select> , свойство CSS dynamic-range-limit и функцию легкого отклонения для элементов <dialog> .