Новое в Chrome 111

Адриана Хара

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

  • Создавайте безупречные переходы в своем одностраничном приложении с помощью View Transitions API .
  • Выведите цвета на новый уровень с поддержкой CSS Color Level 4 .
  • Откройте для себя новые инструменты на панели стилей, чтобы максимально эффективно использовать новые функциональные возможности цвета.
  • И есть еще много чего .

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

Просмотр API переходов.

Создание плавных переходов в сети — сложная задача. API View Transitions предназначен для того, чтобы упростить создание безупречных переходов за счет моментальных снимков представлений и позволяя DOM изменяться без какого-либо перекрытия между состояниями.

Переходы, созданные с помощью View Transition API. Попробуйте демо-сайт . Требуется Chrome 111+.

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

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Когда вызывается .startViewTransition() , API фиксирует текущее состояние страницы.

После завершения вызывается callback , переданный в .startViewTransition() . Вот где меняется DOM. Затем API фиксирует новое состояние страницы.

Обратите внимание, что API запускается для одностраничных приложений (SPA), но реализуется и поддержка других моделей.

В этом API есть много подробностей, узнайте больше в нашей статье, содержащей примеры и подробности , или изучите документацию View Transitions на MDN .

CSS-цветовой уровень 4.

Благодаря уровню цвета CSS 4 CSS теперь поддерживает дисплеи высокой четкости, определяя цвета из гаммы HD, а также предлагая цветовые пространства со специализацией.

Короче говоря, это означает, что на 50 % больше цветов на выбор! Вы думали, что 16 миллионов цветов — это много. Я тоже так думал.

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

Реализация включает функцию color() ; его можно использовать для любого цветового пространства, которое определяет цвета с каналами R, G и B. color() сначала принимает параметр цветового пространства, затем ряд значений каналов для RGB и, возможно, немного альфа.

Вот несколько примеров использования функции цвета с различными цветовыми пространствами.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

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

Новые инструменты разработки цвета.

В Devtools появились новые функции для поддержки спецификации цвета CSS 4-го уровня.

Панель «Стили» теперь поддерживает 12 новых цветовых пространств и 7 новых гамм, описанных в спецификации. Вот примеры определений цветов CSS с помощью color(), lch(), oklab() и color-mix().

Примеры определений цветов CSS.

При использовании color-mix() , который позволяет смешивать процент одного цвета с другим, вы можете просмотреть окончательный результат цвета на панели «Вычисления» . результат смешивания цветов на панели «Вычисляемые».

Также палитра цветов поддерживает все новые цветовые пространства с большим количеством функций. Например, щелкните образец цвета (display-p3 1 0 1). Также была добавлена ​​линия границы гаммы, позволяющая различать гаммы sRGB и display-p3 для более четкого понимания гаммы выбранного вами цвета. Граница гаммы.

Палитра цветов также поддерживает преобразование цветов между цветовыми форматами.

Преобразование цветов между цветовыми форматами.

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

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

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

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

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

Подписаться

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

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