Вот что важно знать:
- Режим "Картинка в картинке" для документов позволяет управлять окнами "Картинка в картинке".
- Вложенные объявления CSS исправляют некоторые сложные пограничные случаи.
- Вы можете указать, как должны вести себя декорации элементов, которые разделены на несколько строк.
- И это ещё не всё! Подробнее…
Меня зовут Пит Лепейдж. Давайте посмотрим, что нового появилось в Chrome 130 для разработчиков.
Картинка в картинке для документов
API режима "Картинка в картинке" позволяет вынести видео из вкладки браузера, чтобы вы могли следить за ним, работая с другими сайтами или приложениями. но только для видео.
API "Картинка в картинке" для документов снимает это ограничение и позволяет создавать окна с контролируемым контентом. Она отлично подходит для создания пользовательских видеопроигрывателей, приложений для видеоконференций и приложений для эффективной работы. Мне нравится, как Spotify реализовал эту функцию в своем веб-проигрывателе. Я вижу окно с обложкой текущей песни, элементами управления проигрывателем и кнопкой добавления в избранное.
Чтобы использовать эту функцию, запросите новое окно с документом в режиме "Картинка в картинке". Возвращенный объект promise разрешается в объект JavaScript для окна «картинка в картинке».
а затем перетащите контент в окно.
async function openDPiP() {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture
.requestWindow();
pipWindow.document.body.append(player);
}
pipButton.addEventListener('click', openDPiP);
Новое свойство preferInitialWindowPlacement позволяет указать Chrome, чтобы окно режима "Картинка в картинке" всегда открывалось в положении и с размером по умолчанию, а не использовало положение и размер предыдущего окна.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
Подробнее об этом можно прочитать в записи Франсуа.
Вложенные декларации CSS
Вложенность CSS позволяет создавать более короткие селекторы, упрощает чтение кода и повышает его модульность за счет вложения правил друг в друга. Вложенные правила CSS относятся к новым базовым функциям и доступны уже почти год.
В некоторых случаях функция работала не так, как ожидалось. Например, в следующем блоке CSS вы ожидаете, что цвет фона будет зеленым, поскольку он указан последним, но на самом деле он красный!
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
Чтобы устранить такие пограничные случаи, рабочая группа CSS ввела правило вложенных объявлений, которое реализовано в Chrome 130. Теперь тот же блок CSS приводит к появлению зеленого фона, как и ожидалось. Если вы чередовали простые объявления с вложенными правилами, проверьте код.
Подробнее об этом можно прочитать в статье Брэмуса CSS nesting improves with CSSNestedDeclarations.
box-decoration-break
Свойство CSS box-decoration-break позволяет указать, как должны отрисовываться фрагменты элемента, если они разбиты на несколько строк, столбцов или страниц.
Например, этот элемент хорошо выглядит, когда все находится на одной строке.
Если контент переносится на несколько строк, декоративные элементы, такие как фон, тень, рамка и т. д., обрезаются, что выглядит не очень хорошо.
Если добавить box-decoration-break: clone, каждый фрагмент будет отрисовываться отдельно, и изображение будет выглядеть гораздо лучше.
Хотя это ещё не Baseline, он доступен в Chrome и Firefox, а в Safari имеет префикс поставщика.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Подробнее о свойстве box-decoration-break можно узнать на сайте MDN и в статье The box-decoration-break property in Chrome 130.box-decoration-break
и многое другое!
Конечно, это далеко не все возможности.
- После нескольких неудачных попыток контейнеры прокрутки с фокусом клавиатуры наконец-то появились.
- В WebGPU добавлено смешивание двух источников.
- А веб-сериалы получат атрибут "Связанные".
Дополнительные материалы
Это лишь некоторые из основных изменений. Ознакомьтесь с дополнительными изменениями в Chrome 130 по ссылкам ниже.
- Примечания к выпуску Chrome 130.
- Что нового в инструментах разработчика Chrome (версия 130)
- Обновления ChromeStatus.com для Chrome 130
- Список изменений в репозитории исходного кода Chromium
- Календарь выпуска версий Chrome
Подписаться
Чтобы быть в курсе новостей, подпишитесь на канал YouTube "Chrome для разработчиков" и получайте уведомления о новых видео.
Меня зовут Пит Лепейдж, и как только выйдет Chrome 131, мы расскажем вам о его новых возможностях.