Новое в Chrome 130

Pete LePage

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

• Функция «картинка в картинке» обеспечивает больший контроль над окнами «картинка в картинке».
• Вложенные объявления 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 с помощью 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 и публикацией Рэйчел Свойство box-decoration-break в Chrome 130 .

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

Конечно, есть еще много чего.

• После нескольких неудачных попыток наконец-то появились контейнеры с прокруткой, фокусируемые на клавиатуре .
• WebGPU получает возможность смешивания двух источников.
• А веб-сериал получает атрибут связанности.

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

Это охватывает только некоторые ключевые моменты. Проверьте следующие ссылки для дополнительных изменений в Chrome 130.

• Заметки о выпуске Chrome 130 .
• Что нового в Chrome DevTools (130)
• Обновления ChromeStatus.com для Chrome 130
• Список изменений в исходном репозитории Chromium
• Календарь релизов Chrome

Подписаться

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

Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 131, мы сразу же расскажем вам, что нового в Chrome!