Откройте для себя некоторые интересные функции, которые появились в стабильных и бета-версиях веб-браузеров в мае 2022 года.
Стабильные версии браузера
В мае Chrome 102, Safari 15.5 , Firefox 100 и Firefox 101 стали стабильными.
Chrome 102 и Safari 15.5 включают атрибут inert . Это удаляет элементы из порядка табуляции и дерева доступности, если они неинтерактивны. Например, элемент, который в данный момент находится за кадром или скрыт.
Chrome 102 включает новое значение hidden атрибута HTML until-found . Это позволяет выполнять поиск на странице и прокручивать фрагмент текста в тексте, который находится внутри свернутой области страницы, как это может быть в шаблоне аккордеона. Узнайте больше в статье Как сделать свернутый контент доступным с помощью Hidden=Until-Found .
Chrome 102 поставляется с Navigation API — API, который стандартизирует маршрутизацию на стороне клиента в одностраничных приложениях. Этот API ранее назывался API истории приложений.
Firefox 101 поддерживает конструируемые таблицы стилей . Поддержка включает конструктор CSSStyleSheet() , а также методы replace() и replaceSync() . Конструируемые таблицы стилей упрощают создание таблиц стилей для использования с Shadow DOM. В следующем примере таблица стилей создается с помощью конструктора CSSStyleSheet() , правило CSS добавляется с помощью метода replaceSync() , а полученное правило выводится на консоль.
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);
Также в Firefox 101 есть функция prefers-contrast мультимедиа, что делает эту функцию доступной в разных браузерах.
Бета-версии браузера
Бета-версии браузера дают вам предварительный просмотр того, что будет в следующей стабильной версии браузера. Это прекрасное время для тестирования новых функций или удалений, которые могут повлиять на ваш сайт, прежде чем мир получит эту версию.
Новыми бета-версиями в апреле стали Chrome 103 и Firefox 102 .
Firefox 102 включает функцию update мультимедиа. Это используется для запроса, может ли устройство вывода изменить внешний вид контента после его визуализации. Он принимает следующие значения:
-
none - После рендеринга контент не может быть обновлен. Например, распечатанный документ.
-
slow - Устройство может обновлять контент, но слишком медленно для отображения плавной анимации. Например, экраны E-ink.
-
fast - Содержимое может меняться динамически и достаточно быстро для рендеринга анимации. Например, экран компьютера или телефона.
Chrome 103 включает API локального доступа к шрифтам , который обеспечивает доступ к локально установленным шрифтам пользователя.
Эти бета-функции скоро появятся в стабильных браузерах.
Изменить: в предыдущей версии этого сообщения упоминался метод Element.isVisible() , который не поставляется в этом выпуске.
Часть новой веб-серии.