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

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

Rachel Andrew

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

В январе Chrome 97 и Firefox 96 стали стабильными.

В Firefox 96 появилась функция цвета hwb() . Эта функция выражает цвет посредством оттенка, белизны и черноты.

Также в Firefox 96 есть свойство color-scheme CSS. Это свойство дает вам возможность указать цветовые схемы, в которых может отображаться элемент. Например, чтобы указать, что .widget может отображаться в светлом или темном режимах операционной системы, используйте следующий CSS.

.widget {
  color-scheme: light dark;
}

Наличие цветовой схемы в Firefox означает, что свойство доступно в Chrome, Firefox и Safari.

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

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

Бета-версиями января были Chrome 98 , Firefox 97 и Safari 15.4 Beta 1.

Chrome 98 поддерживает векторные шрифты цветового градиента COLRv1 в качестве дополнительного нового формата шрифта. Цветной шрифт содержит глифы с несколькими цветами, которые могут быть, например, эмодзи, флагом страны или разноцветной буквой.

Подробнее об этом новом формате шрифта читайте в статье «Векторные шрифты с градиентом цвета COLRv1» в Chrome 98 .

Также включен метод StructuredClone() для создания глубоких копий объектов и медиа-запросы CSS dynamic-range и video-dynamic-range . Дополнительные функции для тестирования можно найти в посте о бета-версии Chrome 98 .

Chrome 98 DevTools предлагает вам целый набор новых функций, включая новое дерево полной доступности .

Бета-версия Firefox 97 поддерживает единицы length cap и ic , а также реализует свойство scrollbar-gutter .

В бета-версию Safari 15.4 включена целая коллекция хороших вещей. Возможности включают реализацию псевдоэлемента ::backdrop , псевдокласса :focus-visible , свойства Accent-Color и CSS-включения со свойством contains . Эта бета-версия также включает элемент HTML <dialog> , атрибут lazy изображений для включения отложенной загрузки , а также поддержку значков манифеста веб-приложения.

Все эти бета-функции скоро появятся в стабильных браузерах.

Часть новой веб-серии.