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

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

Рэйчел Эндрю

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

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

Анимация дорожек сетки

Благодаря работе наших сотрудников из Microsoft, Chrome теперь может интерполировать значения grid-template-columns и grid-template-rows . Это означает, что макеты сетки могут плавно переходить между состояниями вместо привязки в середине анимации или перехода.

Наведите курсор на аватары, чтобы увидеть анимацию. Этот пример взят из статьи CSS анимированные макеты сетки , где вы можете узнать больше.

Поддержка браузера

  • 107
  • 107
  • 66
  • 16

Дополнения к 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, включая изменение размера и привязку к прокрутке.

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