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

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

Rachel Andrew

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

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

Изменение поведения области просмотра макета в Chrome на Android.

По сравнению с Chrome 108 на Android поведение области просмотра макета изменилось, когда отображается экранная клавиатура. Прочтите статью «Подготовьтесь к изменениям в поведении изменения размера области просмотра, которые появятся в Chrome на Android», чтобы узнать больше.

Новые единицы видового экрана

Также в Chrome 108 появились новые единицы просмотра CSS. К ним относятся малые ( svw , svh , svi , svb , svmin , svmax ), большие ( lvw , lvh , lvi , lvb , lvmin , lvmax ), динамические ( dvw , dvh , dvi , dvb , dvmin, dvmax) и логические (dvw, dvh, dvi, dvb, dvmin , dvmax ). vi , vb ) ед. Эти модули уже реализованы в Firefox и Safari, а это означает, что теперь у нас есть возможность взаимодействия с тремя основными браузерными движками для этих модулей.

Прочтите «Большие, маленькие и динамические единицы видового экрана» .

Сокращенное CSS-свойство contain-intrinsic-size поддерживается в Firefox 107, наряду с длинными свойствами contain-intrinsic-width , contain-intrinsic-height и логическими свойствами contain-intrinsic-block-size и contain-intrinsic-inline-size .

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

avoid ключевого слова предотвращения фрагментации CSS.

Chrome 108 включает поддержку значения avoid свойств фрагментации CSS break-before , break-after и break-inside при печати. Это значение сообщает браузеру, что не следует прерывать работу до, после или внутри элемента, к которому оно применяется. Например, следующий CSS позволяет избежать разрыва фигуры при разрыве страницы.

figure {
    break-inside: avoid;
}

Это дополнение связано с включением поддержки печати с использованием LayoutNG, что обеспечивает современный интерфейс с меньшим количеством ошибок. Узнайте больше о LayoutNG .

API федеративного управления учетными данными

API федеративного управления учетными данными (FedCM) предоставляет абстракцию для федеративных потоков удостоверений в Интернете. Он открывает диалоговое окно, опосредованное браузером, которое позволяет пользователям выбирать учетные записи от поставщиков идентификации для входа на веб-сайты. FedCM поставляется в Chrome 108, узнайте больше об этом в сообщении блога, посвященном анонсу FedCM .

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

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

Firefox 108 поддерживает атрибуты height и width для элемента <source> , если он является дочерним элементом элемента <picture> . Эти атрибуты принимают высоту или ширину изображения в пикселях как целое число без единиц измерения.

В Firefox ведется реализация контейнерных запросов. За флагом layout.css.container-queries.enabled в бета-версии Firefox 108 вы найдете единицы длины запроса контейнера — cqw , cqh , cqi , cqb , cqmin , cqmax . Это единицы длины относительно размера контейнера запроса.

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