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

Новое в Chrome 115

Adriana Jara

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

Используйте ScrollTimeline и ViewTimeline для создания анимации, управляемой прокруткой , которая улучшает взаимодействие с пользователем.
Огражденные фреймы работают вместе с другими API-интерфейсами Privacy Sandbox для внедрения соответствующего контента, предотвращая при этом ненужное совместное использование контекста.
С помощью Topics API браузер может делиться с третьими лицами информацией об интересах пользователя, сохраняя при этом конфиденциальность.
И есть еще много чего .

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

Анимация, управляемая прокруткой

Анимация, управляемая прокруткой, — распространенный шаблон UX в Интернете. Анимация, управляемая прокруткой, связана с позицией прокрутки контейнера прокрутки. Это означает, что при прокрутке вверх или вниз связанная анимация перемещается вперед или назад в прямом ответе.

Следующие примеры демонстрируют некоторые варианты использования. Например, вы можете создать индикаторы чтения, которые перемещаются при прокрутке:

Индикатор чтения поверх документа, управляемый прокруткой.

Анимация, управляемая прокруткой, также может создавать элементы, которые постепенно исчезают по мере их появления:

Изображения на этой странице постепенно исчезают по мере появления.

По умолчанию анимация, прикрепленная к элементу, выполняется на временной шкале документа. Его исходное время начинается с 0 при загрузке страницы и начинает идти вперед по мере продвижения часов. Это временная шкала анимации по умолчанию, и до сих пор это была единственная временная шкала анимации, к которой у вас был доступ.

Спецификация анимации, управляемой прокруткой, определяет два новых типа временных шкал, которые вы можете использовать:

Временная шкала прогресса прокрутки : временная шкала, которая связана с положением прокрутки контейнера прокрутки вдоль определенной оси.
Просмотр временной шкалы прогресса : временная шкала, которая связана с относительным положением определенного элемента в его контейнере прокрутки.

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

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

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

Огороженные рамы

Privacy Sandbox — это инициатива, целью которой является создание технологий, которые одновременно защищают конфиденциальность людей в Интернете и предоставляют разработчикам инструменты для построения процветающего цифрового бизнеса.

Многие из его предложений направлены на удовлетворение сценариев межсайтового использования без сторонних файлов cookie или других механизмов отслеживания. Например:

API Protected Audience : позволяет показывать рекламу на основе интересов с сохранением конфиденциальности.
Общее хранилище : обеспечивает доступ к неразделенным межсайтовым данным в безопасной среде.

Чтобы сохранить конфиденциальность, некоторые из этих API требуют нового способа встраивания контента. Решение называется огороженным каркасом.

Ограниченные фреймы работают в сочетании с другими предложениями Privacy Sandbox для отображения документов из разных разделов хранилища на одной странице.

Огражденный фрейм — это элемент HTML для встроенного контента, аналогичный iframe. В отличие от iframe, изолированный фрейм ограничивает взаимодействие с контекстом внедрения, позволяя фрейму получать доступ к межсайтовым данным, не передавая их контексту внедрения.

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

Особенность	`iframe`	`fencedframe`
Встроить контент	Да	Да
Встроенное содержимое может получить доступ к DOM контекста внедрения.	Да	Нет
Контекст внедрения может получить доступ к DOM встроенного контента.	Да	Нет
Наблюдаемые атрибуты, такие как `name`	Да	Нет
URL-адреса ( `http://example.com` )	Да	Да ( в зависимости от варианта использования )
Непрозрачный источник, управляемый браузером ( `urn:uuid` )	Нет	Да
Доступ к межсайтовым данным	Нет	Да (в зависимости от варианта использования)

Например, предположим, news.example (контекст внедрения) встраивает рекламу из shoes.example в изолированный фрейм. news.example не может извлечь данные из объявления shoes.example , а shoes.example не может получить собственные данные из news.example .

Сравнение состояния разделения хранилища до и после.

В этих статьях вы найдете документацию по Fenced Frames , API Protected Audience , общему хранилищу и многому другому.

API тем

В прошлом сторонние файлы cookie и другие механизмы использовались для отслеживания поведения пользователей на разных сайтах, чтобы определить интересующие их темы. Эти механизмы постепенно выводятся из эксплуатации в рамках инициативы Privacy Sandbox.

API тем позволяет браузеру делиться с третьими лицами информацией об интересах пользователя, сохраняя при этом конфиденциальность.

API Topics позволяет размещать рекламу на основе интересов (IBA) без отслеживания сайтов, которые посещает пользователь. Браузер отслеживает и записывает темы, которые могут представлять интерес для пользователя, на основе его активности в Интернете. Эта информация записывается на устройстве пользователя.

Например, API может предложить тему "Fiber & Textile Arts" пользователю, который посещает веб-сайт knitting.example .

Темы — это сигнал, помогающий платформам рекламных технологий выбирать релевантные объявления. В отличие от сторонних файлов cookie, эта информация передается без раскрытия дополнительной информации о самом пользователе или его активности в Интернете.

Прочтите обзор Privacy Sandbox, чтобы получить все подробности о таксономии тем и использовании API тем.

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

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

Максимальный размер WebAssembly.Module в основном потоке увеличен до 8 мегабайт.
Свойство display CSS теперь принимает в качестве значения несколько ключевых слов, помимо устаревших заранее составленных ключевых слов.
Существует исходная пробная версия API Compute Pressure, которая предоставляет высокоуровневую информацию о текущем состоянии аппаратного обеспечения устройства.

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

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

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

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