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

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

В сентябре 2024 года Firefox 130 , Safari 18 и Chrome 129 стали стабильными. В этом посте рассматриваются новые функции, добавленные в веб-платформу.

Эксклюзивные аккордеоны с атрибутом name для <details>

Firefox 130 поддерживает атрибут name элемента <details> . Это группирует элементы <details> , при этом одновременно может быть открыт только один элемент в группе. Это позволяет вам создать эксклюзивный аккордеон без использования JavaScript.

Поддержка браузера

  • Хром: 120.
  • Край: 120.
  • Фаерфокс: 130.
  • Сафари: 17.2.

Анимация в автоматическом режиме (и многое другое)

В Chrome 129 добавлено свойство CSS interpolate-size и функция calc-size() .

Свойство CSS interpolate-size позволяет странице выбирать анимацию и переходы внутренних ключевых слов CSS, таких как auto , min-content и fit-content , в тех случаях, когда эти ключевые слова могут быть анимированы.

Поддержка браузера

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

Источник

Функция CSS calc-size() — это функция CSS, похожая на calc() , однако она также поддерживает операции только с одним поддерживаемым ключевым словом размера. Поддерживаемые ключевые слова для определения размера: auto , min-content , max-content и fit-content .

Поддержка браузера

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

Источник

Узнайте больше в разделе Анимация по высоте: авто; (и другие ключевые слова внутреннего размера) в CSS .

Форматирование длительности в JavaScript

Также в Chrome 129 есть Intl.DurationFormat , предоставляющий метод форматирования длительности, например «1 час 40 минут 30 секунд», который поддерживает несколько языков.

Поддержка браузера

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

Источник

API веб-кодеков

API веб-кодеков теперь поддерживается на настольных компьютерах в Firefox 130, предоставляя веб-разработчикам низкоуровневый доступ к отдельным кадрам видеопотока и фрагментам аудио. Новые интерфейсы включают: VideoEncoder , VideoDecoder , EncodedVideoChunk , VideoFrame и VideoColorSpace . Этот API не делает Baseline Newly доступным, поскольку он еще не поддерживается в Firefox Android, однако существует поддержка Firefox Nightly для Android.

Поддержка браузера

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

Источник

Запросы стиля CSS для пользовательских свойств

Safari 18 обеспечивает поддержку нескольких новых функций, включая запросы стилей CSS. Запросы к стилю позволяют создавать повторно используемые стили и применять их как группу. Например, если у вас есть многоразовый компонент с несколькими вариантами.

Поддержка браузера

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

Источник

Узнайте больше о запросах в стиле CSS .

Те же переходы между видами документа

Safari 18 также поддерживает одни и те же переходы между представлениями документов для SPA, позволяя создавать визуальные переходы между различными состояниями приложения.

Поддержка браузера

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

Источник

Узнайте больше о переходах между видами одного и того же документа.

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

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

Firefox 131 включает в себя новые помощники итераторов JavaScript и теперь включены файлы cookie с независимым разделенным состоянием (CHIPS) .

Chrome 130 включает поддержку box-decoration-break: clone как для встроенной фрагментации (строчная компоновка), так и для блочной фрагментации (фрагменты, созданные для печати и многостолбцов). В IndexedDB также улучшены отчеты об ошибках и появился новый атрибут connected для интерфейса Web Serial SerialPort .

Safari 18.1 — это выпуск исправлений существующих функций.