Эта статья — перевод оригинальной статьи «New in Chrome 130».

Также я веду телеграм канал «Frontend по‑флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

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

• Document "picture-in-picture" дает вам больше возможностей для управления окнами "picture-in-picture".

• Вложенные объявления в CSS - исправление некоторых сложных ситуаций.

• Вы можете задать поведение декораций для элементов, которые разделяются на несколько строк.

• И многое другое.

Я Пит ЛеПейдж. Давайте узнаем, что нового ждет разработчиков в Chrome 130.

Document Picture-in-Picture

Picture-in-picture API отлично подходит, когда нужно вывести видео на вкладку браузера, чтобы можно было следить за ним, взаимодействуя с другими сайтами или приложениями. Но он работает только с видео.

Document picture-in-picture API устраняет это ограничение, позволяя создавать окна, в которых вы можете управлять содержимым. Он отлично подходит для таких вещей, как пользовательские видеоплееры, видеоконференции и приложения для повышения производительности. Мне нравится, как Spotify использует его в своем веб-плеере. Я получаю окно с иллюстрацией к текущей песне, элементы управления воспроизведением и могу легко добавить песню в избранное.

Чтобы использовать его, запросите новый документ. Возвращаемый promise резолвится JavaScript-объектом окна picture-in-picture. Затем используйте его для добавления содержимого в окно.

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

С помощью нового свойства preferInitialWindowPlacement вы можете указать Chrome всегда открывать окно "картинка в картинке" в положении и размере по умолчанию, а не использовать положение или размер предыдущего окна.

// Откройте окно "картинка в картинке" в стандартном положении / размере.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

Посмотрите пост Франсуа "Picture-in-picture для любого элемента", чтобы узнать больше подробностей!

Вложенные объявления в CSS

Вложенность CSS позволяет сократить селекторы, облегчить чтение и повысить модульность за счет вложенности правил в другие. CSS Nesting - это baseline новинка, которая доступна уже почти год. Было несколько случаев, когда она работала не так, как ожидалось. Например, в следующем блоке CSS вы ожидаете, что цвет фона будет зеленым, так как он идет последним, но он красный!

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

Чтобы исправить подобные ситуации, рабочая группа CSS ввела правило вложенных объявлений, которое реализовано в Chrome 130. Теперь тот же блок CSS выдает зеленый фон, как и ожидалось. Если вы чередовали голые декларации с вложенными правилами, вам следует перепроверить свой код. Ознакомьтесь со статьей Bramus "Вложенность 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 получает двойное микширование источников.

• А web serial получает атрибут connected.