Откройте для себя некоторые интересные функции, которые появились в стабильных и бета-версиях веб-браузеров в августе 2024 года.
Стабильные версии браузера
В августе 2024 года Firefox 129 и Chrome 128 стали стабильными. В этом посте рассматриваются новые функции, добавленные в веб-платформу.
Обновления форматирования Ruby
Элемент HTML <ruby>
— мощный инструмент для улучшения представления текста, особенно для языков Восточной Азии. Этот элемент позволяет отображать фонетические аннотации или другую дополнительную информацию над основным текстом или рядом с ним. Начиная с Chrome 128, аннотации Ruby разрываются по строкам, и вы можете стилизовать текст Ruby с помощью свойства CSS ruby-align
.
Подробную информацию см. в разделах <ruby>
и CSS-свойстве ruby-align
.
PointerEvent.deviceProperties
для рукописного ввода несколькими перьями
Это изменение, представленное в Chrome 128, обеспечивает безопасный и надежный способ идентификации отдельных перьев (указателей), взаимодействующих с экраном, чтобы установить определенные цвета или формы пера для каждого устройства, взаимодействующего с дигитайзером. Он расширяет интерфейс PointerEvent
, включив в него новый атрибут deviceProperties
. Он содержит атрибут uniqueId
, который представляет постоянный для сеанса изолированный от документа уникальный идентификатор, который можно надежно использовать для идентификации отдельных перьев, взаимодействующих со страницей.
Promise.try
Также в Chrome 128 Promise.try
упрощает обработку ошибок с помощью Promises. Есть шаблон, в котором у вас есть функция f
. Эта функция может быть асинхронной и возвращать обещание, а может и нет. Чтобы использовать семантику промиса для обработки ошибок в обоих случаях, вы помещаете функцию в промис. Обычно это достигается с помощью new Promise(resolve => resolve(f()))
.
Promise.try
— более простой способ добиться того же. Он позволяет запустить цепочку обещаний, которая перехватывает все ошибки в обработчиках .catch
, вместо того, чтобы обрабатывать как синхронные, так и асинхронные потоки исключений.
Анимация эффектов входа
Firefox 129 включает в себя две функции CSS, используемые для анимации эффектов ввода, и эти функции теперь являются базовыми новыми доступными.
Правило @starting-style
определяет исходные стили элемента перед его отображением на странице. Это необходимо для элементов, которые анимируются из дисплея: нет, так как им нужно состояние, из которого можно анимировать.
Эффекты входа также требуют анимации дискретных свойств, тех, которые не могут интерполировать между значениями. Теперь этого можно достичь с помощью transition-behavior: allow-discrete
или значенияallow allow-discrete
в сокращении перехода. Теперь это также поддерживается в Firefox 129.
Дополнительную информацию см. в разделе «Сейчас в базовой версии: анимация эффектов ввода» .
Дополнения к PerformanceResourceTiming
В Firefox 129 добавлены свойства contentType
и responseStatus
интерфейса PerformanceResourceTiming
. Они указывают тип контента полученного ресурса и код состояния ответа HTTP, возвращаемый при получении ресурса, соответственно.
contentType
responseStatus
Методы геолокации toJSON()
Также в Firefox 129 есть GeolocationCoordinates.toJSON()
и GeolocationPosition.toJSON()
.
Веб-драйвер BiDi
Firefox 129 теперь поддерживает WebDriver BiDi. Это означает, что вы можете использовать Puppeteer с Chrome или Firefox для автоматизации. Узнайте больше в WebDriver BiDi, готовом к производству в Firefox, Chrome и Puppeteer , а также об объявлении официальной поддержки Puppeteer для Firefox .
Бета-версии браузера
Бета-версии браузера дают вам предварительный просмотр того, что будет в следующей стабильной версии браузера. Это прекрасное время для тестирования новых функций или удалений, которые могут повлиять на ваш сайт, прежде чем мир получит эту версию. Новые бета-версии — Firefox 130 и Chrome 129 . Бета-версия Safari 18 все еще продолжается. Эти выпуски привносят в платформу множество замечательных функций. Ознакомьтесь со всеми подробностями в примечаниях к выпуску. Вот лишь несколько основных моментов.
Firefox 130 поддерживает атрибут имени элемента <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
.
Также в Chrome 129 есть Intl.DurationFormat
, предоставляющий метод форматирования продолжительности, например «1 час 40 минут 30 секунд», который поддерживает несколько языков.