Откройте для себя некоторые интересные функции, которые появились в стабильных и бета-версиях веб-браузеров в октябре 2022 года.
Стабильные версии браузера
В октябре Firefox 106 , Chrome 107 и Safari 16.1 стали стабильными. Давайте посмотрим, что это значит для веб-платформы.
Анимация дорожек сетки
Благодаря работе наших сотрудников из Microsoft, Chrome теперь может интерполировать значения grid-template-columns
и grid-template-rows
. Это означает, что макеты сетки могут плавно переходить между состояниями вместо привязки в середине анимации или перехода.
Поддержка браузера
Дополнения к getDisplayMedia()
Также в Chrome есть некоторые дополнения к getDisplayMedia()
, целью которых является предотвращение случайного совместного использования при совместном использовании экрана .
- Параметр
displaySurface
может указывать, что веб-приложение предпочитает предлагать определенный тип поверхности отображения (вкладки, окна или экраны). - Параметр
surfaceSwitching
указывает, должен ли Chrome разрешать пользователю динамически переключаться между общими вкладками. - Опцию
selfBrowserSurface
можно использовать, чтобы запретить пользователю делиться текущей вкладкой. Это позволяет избежать эффекта «зеркального зала». - Параметр
systemAudio
гарантирует, что Chrome предлагает пользователю только соответствующий аудиозапись.
Safari 16.1 также включает поддержку getDisplayMedia
, добавляя поддержку захвата определенного окна Safari.
Тестирование поддержки шрифтовой технологии и функций CSS.
Firefox добавил функции font-tech()
и font-format()
для поддержки запросов с помощью @supports
. В следующем примере проверяется поддержка шрифтов COLRv1 .
@supports font-tech(color-COLRv1) {
}
Больше примеров вы можете найти на MDN .
Прокрутить до фрагмента текста
Safari 16.1 включает поддержку прокрутки к фрагменту текста , что добавляет поддержку перехода к URL-адресу с указанным определенным фрагментом текста.
Поддержка AVIF
Safari 16 включает поддержку неподвижных изображений AVIF, Safari 16.1 включает поддержку анимированных изображений AVIF на macOS Ventura, iOS 16 и iPadOS 16.
Веб-пуш для Safari
Safari 16.1 обеспечивает поддержку Web Push в Safari на macOS Ventura. При этом используются Push API и Notifications API, подробнее об этом можно прочитать в статье Знакомство с Web Push . Использование Web Push в Safari означает, что теперь он доступен во всех трех основных движках.
Бета-версии браузера
Бета-версии браузера дают вам предварительный просмотр того, что будет в следующей стабильной версии браузера. Это прекрасное время для тестирования новых функций или удалений, которые могут повлиять на ваш сайт, прежде чем мир получит эту версию. Новые бета-версии этого месяца — Chrome 108 , Firefox 107 и Safari 16.2 .
Chrome 108 включает поддержку значения avoid
свойств фрагментации CSS break-before
, break-after
и break-inside
при печати. Это значение сообщает браузеру, что не следует прерывать работу до, после или внутри элемента, к которому оно применяется. Например, следующий CSS позволяет избежать разрыва фигуры при разрыве страницы.
figure {
break-inside: avoid;
}
В Chrome 108 начинаются изменения в поведении переполнения заменяемых элементов, что в некоторых случаях может привести к визуальным изменениям. Прочтите статью Изменение переполнения замененных элементов в CSS, чтобы получить более подробную информацию и узнать, как решить возникающие проблемы.
Изменилось поведение области просмотра макета в Chrome на Android, когда отображается экранная клавиатура. Прочтите статью «Подготовка к изменениям в поведении изменения размера области просмотра, которые появятся в Chrome на Android», чтобы узнать больше и узнать, как подготовиться к выпуску стабильной версии в следующем месяце.
Также в Chrome появились новые единицы просмотра CSS. К ним относятся малые ( svw
, svh
, svi
, svb
, svmin
, svmax
), большие ( lvw
, lvh
, lvi
, lvb
, lvmin
, lvmax
), динамические ( dvw
, dvh
, dvi
, dvb
, dvmin
, dvmax
). vi
, vb
) ед. Эти модули уже реализованы в Firefox и Safari.
Firefox 107 включает поддержку шрифтов COLRv1, присоединяясь к Chrome в поддержке этой технологии шрифтов. Также в шрифтах Chrome 108 добавлена поддержка функций font-tech()
и font-format()
для выполнения запросов с помощью @supports
.
Firefox также добавляет поддержку contain-intrinsic-size
, присоединившись к Chrome и создав два браузера с поддержкой этой функции.
Бета-версия Safari 16.2 включает в себя ряд исправлений CSS, включая изменение размера и привязку к прокрутке.
Часть новой веб-серии.