Новое в Chrome 104

Пит ЛеПейдж

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

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

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

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

С помощью Region Capture веб-приложение может определить конкретную область экрана, которую оно хочет предоставить для общего доступа. Например, 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);

Более подробную информацию можно найти в статье Улучшенный общий доступ к вкладкам с помощью Region Capture .

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

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

В Chrome 104 добавлена ​​поддержка медиазапросов — уровень 4 — синтаксис и оценка , что позволяет писать медиазапросы с использованием обычных математических операторов сравнения.

Поэтому вместо того, чтобы указать область просмотра в диапазоне от 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» .

Переходы общих элементов начинают новый пробный запуск

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

Переходы общих элементов, открывающие новую пробную версию в 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.

Подписаться

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

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