Новое в Chrome 110

Адриана Хара

Вот что вам нужно знать:

  • Добавьте собственный стиль к элементам «картинка в картинке» с помощью нового псевдокласса :picture-in-picture .
  • Настройте поведение запуска веб-приложения с помощью launch_handler в манифесте.
  • используйте атрибут credentialless в iframe для встраивания стороннего контента, который не устанавливает политику встраивания между источниками
  • И есть еще много чего .

Я Адриана Хара. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 110.

:псевдокласс «картинка в картинке»

С помощью API «Картинка в картинке» веб-сайты могут создавать плавающее видеоокно, всегда находящееся сверху, чтобы пользователи продолжали использовать мультимедиа, взаимодействуя при этом с другим контентом.

Теперь с помощью CSS-псевдокласса :picture-in-picture вы можете добавлять стили к элементам, чтобы улучшить взаимодействие с ними.

Во фрагменте ниже показано, как использовать класс «картинка в картинке» для добавления сообщения в видеоконтейнер, напоминающего пользователю, что видео сейчас воспроизводится где-то еще.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

Снова используйте псевдокласс для элемента видео, чтобы сделать элемент прозрачным и правильно отображать сообщение.

Поиграйте с примером и улучшите свои впечатления от видео «картинка в картинке».

Член манифеста launch_handler.

API обработчика запуска позволяет вам контролировать способ запуска вашего веб-приложения. Например, использует ли оно существующее или новое окно, а также выполняет ли выбранное окно переход к URL-адресу запуска.

Давайте рассмотрим пример: в среде рабочего стола, если вы устанавливаете приложение, а затем открываете его в браузере, есть кнопка для перехода в отдельное окно приложения. Раньше единственным возможным вариантом поведения был запуск приложения в новом окне.

Теперь с помощью веб-приложений- членов манифеста launch_handler можно настроить поведение запуска.

Например, приведенный ниже фрагмент приводит к тому, что все запуски этого веб-приложения фокусируются на существующем окне приложения и переходят к нему (если оно существует), а не всегда запускают новое окно.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

iframe credentialless .

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

Атрибут credentialless помогает встраивать сторонние iframe, которые не устанавливают эти заголовки.

При использовании credentialless iframe загружается из другого, пустого контекста. В частности, он загружается без файлов cookie. iframe начинается с пустой банки cookie.

Аналогичным образом API-интерфейсы хранилища, такие как LocalStorage, CacheStorage и т. д., загружают и сохраняют данные в новом эфемерном разделе. Все это хранилище очищается после выгрузки документа верхнего уровня. Это позволяет снять ограничение COEP.

В этой статье вы найдете дополнительную информацию о том, как безопасно использовать credentialless для загрузки стороннего контента в ваши iframe.

И многое другое!

И, конечно же, есть еще много чего.

Web SQL теперь удален в незащищенных контекстах.

Свойство CSS initial-letter позволяет установить количество строк, которые начальная буква должна погрузить в следующие строки текста.

FileSystemHandle теперь включает метод remove() .

Дальнейшее чтение

Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по ссылкам ниже, чтобы узнать о дополнительных изменениях в Chrome 110.

Подписаться

Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.

Меня зовут Адриана Хара, и как только выйдет Chrome 111, я буду здесь, чтобы рассказать вам, что нового в Chrome!