Откройте для себя некоторые интересные функции, которые появились в стабильных и бета-версиях веб-браузеров в сентябре 2024 года.
Стабильные версии браузера
В сентябре 2024 года Firefox 130 , Safari 18 и Chrome 129 стали стабильными. В этом посте рассматриваются новые функции, добавленные в веб-платформу.
Эксклюзивные аккордеоны с атрибутом name
для <details>
Firefox 130 поддерживает атрибут name
элемента <details>
. Это группирует элементы <details>
, при этом одновременно может быть открыт только один элемент в группе. Это позволяет вам создать эксклюзивный аккордеон без использования JavaScript.
Поддержка браузера
Анимация в автоматическом режиме (и многое другое)
В Chrome 129 добавлено свойство CSS interpolate-size
и функция calc-size()
.
Свойство CSS interpolate-size
позволяет странице выбирать анимацию и переходы внутренних ключевых слов CSS, таких как auto
, min-content
и fit-content
, в тех случаях, когда эти ключевые слова могут быть анимированы.
Функция CSS calc-size()
— это функция CSS, похожая на calc()
, однако она также поддерживает операции только с одним поддерживаемым ключевым словом размера. Поддерживаемые ключевые слова для определения размера: auto
, min-content
, max-content
и fit-content
.
Узнайте больше в разделе Анимация по высоте: авто; (и другие ключевые слова внутреннего размера) в CSS .
Форматирование длительности в JavaScript
Также в Chrome 129 есть Intl.DurationFormat
, предоставляющий метод форматирования длительности, например «1 час 40 минут 30 секунд», который поддерживает несколько языков.
API веб-кодеков
API веб-кодеков теперь поддерживается на настольных компьютерах в Firefox 130, предоставляя веб-разработчикам низкоуровневый доступ к отдельным кадрам видеопотока и фрагментам аудио. Новые интерфейсы включают: VideoEncoder
, VideoDecoder
, EncodedVideoChunk
, VideoFrame
и VideoColorSpace
. Этот API не делает Baseline Newly доступным, поскольку он еще не поддерживается в Firefox Android, однако существует поддержка Firefox Nightly для Android.
Запросы стиля CSS для пользовательских свойств
Safari 18 обеспечивает поддержку нескольких новых функций, включая запросы стилей CSS. Запросы к стилю позволяют создавать повторно используемые стили и применять их как группу. Например, если у вас есть многоразовый компонент с несколькими вариантами.
Узнайте больше о запросах в стиле CSS .
Те же переходы между видами документа
Safari 18 также поддерживает одни и те же переходы между представлениями документов для SPA, позволяя создавать визуальные переходы между различными состояниями приложения.
Узнайте больше о переходах между видами одного и того же документа.
Бета-версии браузера
Бета-версии браузера дают вам предварительный просмотр того, что будет в следующей стабильной версии браузера. Это прекрасное время для тестирования новых функций или удалений, которые могут повлиять на ваш сайт, прежде чем мир получит эту версию. Новые бета-версии — 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 — это выпуск исправлений существующих функций.