Новое в 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!