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

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

Rachel Andrew

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

В марте Chrome 99 , Chrome 100 , Firefox 98 и Safari 15.4 стали стабильными. Это привнесло в платформу целый ряд новых функций, и многие из этих дополнений означали, что эта функция стала доступна во всех трех браузерных движках. В этом посте я сосредоточился на тех дополнениях, которые обеспечивают кросс-браузерную совместимость, но обязательно ознакомьтесь с примечаниями к выпуску, чтобы увидеть все функции, добавленные в каждый движок.

Chrome 99 и Safari 15.4 включали каскадные слои . Правило @layer определяет каскадный уровень, помогая вам контролировать специфичность. Они присоединились к Firefox, и поэтому Cascade Layers теперь доступен во всех трех браузерных движках. Узнайте больше о каскадных слоях в разделе «Каскадные слои» появятся в вашем браузере .

Chrome 100 включает новое значение plus-lighter для свойства Mix-Blend-Mode CSS. Это значение полезно при плавном затухании двух элементов, когда все или часть пикселей имеют одинаковые значения. Подробнее о проблеме, которую это решает, можно прочитать в разделе «Перекрестное затухание любых двух элементов DOM в настоящее время невозможно» .

Safari 15.4 включает свойство contain , позволяющее сдерживать CSS.

Также в Safari 15.4 есть accent-color , который позволяет контролировать цвет акцента, используемый в некоторых элементах управления формой.

В Firefox 98 и Safari 15.4 появился элемент <dialog> , который представляет диалоговое окно.

В Safari 15.4 также реализована поддержка псевдокласса :focus-visible . Работу по реализации этого проекта провела Игалия.

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

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

Новыми бета-версиями в марте стали Chrome 101 и Firefox 99 .

Бета-версия Chrome 101 включает в себя обозначение цвета hwb . Это определяет цвет в соответствии с его оттенком, белизной и чернотой. Как и в случае с другими обозначениями цвета, необязательный альфа-компонент определяет непрозрачность.

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

Firefox 99 включает свойство pdfViewerEnabled интерфейса Navigator. Это свойство указывает, поддерживает ли браузер встроенное отображение PDF-файлов.

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

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

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