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

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

Rachel Andrew

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

В августе 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 секунд», который поддерживает несколько языков.