Откройте для себя некоторые интересные функции, которые появились в стабильных и бета-версиях веб-браузеров в марте 2022 года.
Стабильные версии браузера
В марте 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 в настоящее время невозможно» .
Поддержка браузера
- 100
- 100
- 99
- 9.1
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.
}
Эти бета-функции скоро появятся в стабильных браузерах.
Часть новой веб-серии.