Новое в Chrome 116

Adriana Jara

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

• Используйте API «Картинка в картинке документа», чтобы повысить производительность пользователей.
• Теперь в DevTools стало проще отлаживать отсутствующие таблицы стилей .
• И есть еще много чего .

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

API «Картинка в картинке» для документов.

API Document Picture-in-Picture позволяет открывать постоянное окно, которое можно заполнить произвольным HTML-содержимым.

Окно «Картинка в картинке», созданное с помощью API «Картинка в картинке» документа ( демо ).

Окно «Картинка в картинке» в API «Картинка в картинке документа» похоже на пустое окно того же происхождения, открытое с помощью window.open() , с некоторыми отличиями:

• Окно «Картинка в картинке» располагается поверх других окон.
• Окно «Картинка в картинке» никогда не переживет открывающееся окно.
• В окне «Картинка в картинке» невозможно перемещаться.
• Положение окна «Картинка в картинке» не может быть установлено на веб-сайте.

Следующий HTML-код устанавливает пользовательский видеопроигрыватель и элемент кнопки для открытия видеопроигрывателя в окне «картинка в картинке».

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

Следующий код JavaScript вызывает documentPictureInPicture.requestWindow() , когда пользователь нажимает кнопку, чтобы открыть пустое окно «Картинка в картинке». Возвращенное обещание разрешается с помощью объекта JavaScript окна «Картинка в картинке». Видеоплеер перемещается в это окно с помощью append() .

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Посмотрите «Картинка в картинке» для любого элемента, чтобы получить более подробную информацию и примеры.

В DevTools отсутствуют улучшения отладки таблиц стилей.

В DevTools внесен ряд улучшений для выявления и устранения проблем, связанных с отсутствующими таблицами стилей.

Во-первых: дерево «Источники > Страницы» теперь показывает только успешно развернутые и загруженные таблицы стилей, чтобы минимизировать путаницу.

Кроме того, в разделе «Источники» > «Редактор» теперь подчеркиваются и отображаются встроенные всплывающие подсказки об ошибках рядом с операторами error, @import , url() и href .

• Консоль , помимо ссылок на неудачные запросы, теперь предоставляет ссылки на точную строку, которая ссылается на таблицу стилей, которую не удалось загрузить.

Панель «Сеть» последовательно заполняет столбец «Инициатор» ссылками на ту строку, которая ссылается на таблицу стилей, которую не удалось загрузить.

На панели «Проблемы» перечислены все проблемы с загрузкой таблиц стилей, включая неработающие URL-адреса, неудачные запросы и неуместные операторы @import .

Узнайте , что нового в DevTools, чтобы получить все подробности и дополнительную информацию о DevTools в Chrome 116.

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

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

• Путь движения позволяет авторам размещать любой графический объект и анимировать его по пути, указанному разработчиком.
• Свойства display и content-visibility теперь поддерживаются в анимации ключевых кадров, что позволяет добавлять анимацию выхода исключительно с помощью CSS.
• API-интерфейс выборки теперь можно использовать с устройствами чтения Bring Your Own Buffer , что снижает накладные расходы на сбор мусора и копирование, а также повышает скорость реагирования для пользователей.

Обновление: в предыдущей версии этого сообщения говорилось, что API notRestoredReasons для обратного/прямого кеша был включен в Chrome 116, но эта функция была отложена до будущего выпуска.

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

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

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

Подписаться

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

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