Эта страница переведена с помощью Cloud Translation API.

Новое в Chrome 116

Adriana Jara

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

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

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

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

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

Окно «картинка в картинке», воспроизводящее трейлер Sintel. — Окно «Картинка в картинке», созданное с помощью 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» , что снижает накладные расходы на сбор мусора и копирование, а также повышает скорость реагирования для пользователей.

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

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

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

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