Новое в Chrome 104

Пит ЛеПейдж

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

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

Укажите область обрезки с захватом региона

getDisplayMedia() позволяет создать видеопоток из текущей вкладки. Но бывают случаи, когда вам не нужна вся вкладка, а только небольшая ее часть. До сих пор единственным способом сделать это было вручную обрезать каждый видеокадр.

Благодаря функции «Захват региона» веб-приложение может определить конкретную область экрана, которой оно хочет поделиться. Например, Google Slides может позволить вам оставаться в стандартном режиме редактирования и поделиться текущим слайдом.

Снимок экрана окна браузера с веб-приложением, выделяющим основную область содержимого и iframe для разных источников.
Основная область содержимого выделена синим цветом, а iframe с перекрестным происхождением — красным.

Чтобы использовать его, выберите элемент, которым хотите поделиться, а затем создайте новый CropTarget на основе этого элемента. Затем запустите совместное использование экрана, вызвав getDisplayMedia() . Это запрашивает у пользователя разрешение на демонстрацию своего экрана. Затем вызовите track.cropTo() и передайте созданный ранее объект cropTarget .

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Дополнительные сведения см. в разделе Улучшение общего доступа к вкладкам с помощью функции «Захват региона» .

Упрощенные медиа-запросы с синтаксисом и оценкой уровня 4.

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

В Chrome 104 добавлена ​​поддержка Media Queries — Level 4 — Syntax and Evaluation , позволяющая писать медиа-запросы с использованием обычных математических операторов сравнения.

Итак, вместо чего-то подобного, чтобы указать область просмотра от 400 до 600 пикселей:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Это можно написать так:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Помимо того, что медиа-запросы становятся менее многословными, новый синтаксис может быть более точным. Запросы min- и max- являются инклюзивными, например: min-width: 400px проверяет ширину 400px или больше. Новый синтаксис позволяет более четко выражать то, что вы имеете в виду.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Он уже поддерживается в Firefox, и существует плагин PostCSS , который перезапишет новый синтаксис в старый, гарантируя совместимость с браузером!

Дополнительную информацию можно найти в статье Рэйчел «Новый синтаксис для медиазапросов диапазона в Chrome 104» .

Shared Element Transitions начинает новое испытание происхождения

Приложения для конкретных платформ обычно имеют плавные переходы между различными представлениями, они выглядят красиво, держат пользователя в контексте и помогают повысить эффективность работы. В то время как в Интернете полная навигация может быть жесткой и иногда означает кратковременное появление пустого экрана. Для одностраничного приложения это может быть лучше, но переходы по-прежнему сложны.

Shared Element Transitions, запускающая новую пробную версию источника в Chrome 104, позволяет обеспечить плавные переходы независимо от того, являются ли переходы между документами (например, в многостраничном приложении) или внутри документа (например, в одном документе). страничное приложение).

Вот приблизительный пример того, как работают переходы для одностраничного приложения. В функции навигации получите новое содержимое страницы, затем проверьте, поддерживаются ли переходы, если нет, обновите страницу без перехода. Если да, создайте transition() и вызовите для него start() , сообщая API, когда изменение DOM будет завершено.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

Под капотом Shared Element Transitions используется CSS-анимация, поэтому вы можете переходить от эффекта затухания к эффекту скольжения или к чему угодно.

Я лишь прикоснулся к поверхности, поэтому посмотрите видео Джейка «Переходы страниц в Интернет » или углубитесь в объяснение .

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

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

  • Если файлы cookie установлены с явным атрибутом Expires или Max-Age , значение теперь будет ограничено не более чем 400 днями.
  • В API размещения многоэкранных окон внесены улучшения.
  • А CSS-свойство overflow-clip-margin определяет, насколько далеко содержимому элемента разрешено рисовать, прежде чем оно будет обрезано.

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

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

Подписаться

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

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