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

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

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

В апреле 2023 года Firefox 112 и Chrome 112 стали стабильными. Давайте посмотрим, что это означает для веб-платформы.

Атрибут `inert`

Firefox 112 включает глобальный атрибут inert. Этот атрибут указывает браузеру игнорировать элемент, указывая на содержимое, которое не должно быть интерактивным. Это:

Предотвращает срабатывание событий клика
Предотвращает получение элементом фокуса
Исключает элемент и его содержимое из дерева доступности

Этот атрибут теперь совместим во всех трех движках

Поддержка браузеров 102 112 102 15.5 Источник

Функция замедления linear()

Функция замедления linear() включает линейную интерполяцию между несколькими точками. Это позволяет использовать более сложные анимации, такие как эффекты отскока и эластичности. Эта функция есть в Firefox 112.

Поддержка браузеров 113 112 113 x

CSS nesting

В Chrome 112 добавлена поддержка CSS Nesting — функции, которую очень ждут многие разработчики. Добавляется новый селектор вложенности >, используемый для вложения связанных правил стиля таким образом (будет знакомо разработчикам, которые использовали препроцессоры):

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Поддержка браузеров 112 x 112 Preview Источник

CSS animation-composition

Chrome 112 также включает поддержку animation-composition Узнайте как работает это свойство в разделе Укажите, как несколько анимационных эффектов должны комбинироваться с анимацией-композицией.»

Поддержка браузеров 112 x 112 16 Источник

Новый режим headless

Если вы используете Headless режим Chrome, например, с Puppeteer, то 112 приносит совершенно новый Headless режим. Узнайте об этом в Chrome Headless режим получает обновление.

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

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

Firefox 113 включает функции color(), lab(), lch(), oklab() и oklch(). Также включает функцию из CCS Color 5 — color-mix() и свойство forced-color-adjust.

Firefox также включает синтаксис nth-child , обеспечивающий более точный контроль над тем, какие элементы вы хотите выбрать. Дополнительные сведения см. в разделе Дополнительные возможности управления выбором :nth-child()

Что касается CSS, Chrome 113 включает встроенные функции overflow-inline, overflow-block, и обновления мультимедиа. Также включен в функцию замедления linear() и тип image-set() без префикса.

Chrome 113 также включает WebGPU, преемника графических API WebGL и WebGL 2 для Интернета. Он предоставляет современные функции, такие как вычисления на графическом процессоре, более низкие накладные расходы на доступ к аппаратному обеспечению графического процессора, возможность рендеринга на несколько холстов с одного графического устройства и лучшую, более предсказуемую производительность.

Оригинал статьи на английском — https://web.dev/web-platform-04-2023/