Новые возможности Chrome 117

Adriana Jara

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

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

Новые функции CSS для анимации при появлении и исчезновении.

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

Первая функция – transition-behavior. Чтобы перейти на отдельные свойства, например display, используйте значение allow-discrete для transition-behavior.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Затем правило @starting-style используется для создания анимации эффектов появления из display: none в верхний слой. Используйте @starting-style, чтобы применить стиль, который браузер может найти до того, как элемент будет открыт на странице.

/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

Чтобы popover или dialog исчезли с верхнего слоя, добавьте свойство overlay в список переходов. Добавьте наложение в переход или анимацию, чтобы анимировать его вместе с остальными объектами и убедиться, что оно остается на верхнем слое во время анимации. Это сделает переход более плавным.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

Подробнее о том, как использовать четыре новые функции CSS для создания плавных анимаций входа и выхода…

Группировка массивов

В программировании группировка массивов – очень распространенная операция, чаще всего встречающаяся при использовании предложения GROUP BY в SQL и программировании MapReduce (которое лучше рассматривать как map-group-reduce).

Возможность объединять данные в группы позволяет разработчикам вычислять наборы данных более высокого порядка. Например, средний возраст когорты или значения LCP для веб-страницы за день.

Группировка массивов позволяет реализовать эти сценарии, добавляя статические методы Object.groupBy и Map.groupBy.

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

В следующем примере из документации MDN показан массив товаров, которые возвращаются сгруппированными по типу с помощью метода groupBy.

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish">;, type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) = type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

Подробную информацию можно найти в документации по groupBy.

Упрощенная работа с локальными переопределениями в инструментах разработчика.

Функция локальных переопределений стала проще в использовании. Теперь вы можете легко имитировать заголовки ответов и веб-контент удаленных ресурсов на панели Сеть, даже если у вас нет к ним доступа.

Чтобы переопределить веб-контент, откройте панель Сеть, нажмите правой кнопкой мыши на запрос и выберите Переопределить контент.

Варианты переопределения в раскрывающемся меню запроса.

Если у вас настроены, но отключены локальные переопределения, инструменты разработчика включают их. Если вы ещё не настроили их, DevTools предложит вам сделать это на панели действий вверху. Выберите папку для хранения переопределений и предоставьте доступ к ней Инструментам разработчика.

Выберите папку и предоставьте доступ к ней на панели действий вверху.

После настройки переопределений DevTools перенаправит вас в раздел Источники > Переопределения > Редактор, чтобы вы могли переопределить веб-контент.

Обратите внимание, что переопределенные ресурсы отмечены значком Сохранено. на панели Сеть. Наведите указатель мыши на значок, чтобы узнать, что переопределено.

Значок переопределения рядом с запросом на панели "Сеть".

Подробнее о том, что нового в инструментах разработчика…

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

Конечно, это далеко не все возможности.

Дополнительные материалы

Это лишь некоторые из основных изменений. Ознакомьтесь с дополнительными изменениями в Chrome 117 по ссылкам ниже.

Подписаться

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

Меня зовут Адриана Хара, и как только выйдет Chrome 117, я расскажу вам о его новых функциях.