Эта статья — перевод оригинальной статьи "New in Chrome 117". Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов. Что ожидается в статье: Три новые функции CSS позволяют легко добавлять плавные анимации появления и исчезновения. Вычисление наборов данных более высокого порядка с помощью группировки массивов. DevTools упрощает процесс локальных переопределений. И многое другое. Я Адриана Джара. Давайте узнаем, что нового ждет разработчиков в Chrome 117. Эти три новые CSS-функции дополняют набор, позволяющий легко добавлять анимацию входа и выхода, а также плавно анимировать перемещение на верхний слой и с него таких элементов, как диалоговые окна и всплывающие окна. Первая функция - transition-behavior. Для анимации дискретных свойств, таких как display, используйте значение allow-discrete для transition-behavior. Затем используется правило @starting-style для анимации эффектов появления через display: none в верхний слой. Используйте @starting-style для применения стиля, который браузер может найти до того, как элемент будет открыт на странице. Наконец, чтобы вывести всплывающее окно или диалоговое окно из верхнего слоя, добавьте свойство overlay в список переходов. Включите свойство overlay в переход или анимацию, чтобы анимировать наложение вместе с остальными элементами и обеспечить его сохранение в верхнем слое при анимировании. Это будет выглядеть более плавно. Ознакомьтесь с четырьмя новыми функциями CSS для плавной анимации появления и исчезновения , чтобы узнать, как использовать эти функции для улучшения пользовательского опыта с помощью движения. В программировании группировка массивов является чрезвычайно распространенной операцией, наиболее часто встречающейся при использовании запроса GROUP BY в SQL и при программировании MapReduce (которое правильнее называть map-group-reduce). Возможность объединения данных в группы позволяет разработчикам вычислять наборы данных более высокого порядка. Например, средний возраст когорты или ежедневные значения LCP для веб-страницы. Группировка массивов позволяет реализовать эти сценарии за счет добавления статических методов Object.groupBy и Map.groupBy. groupBy вызывает предоставленную функцию обратного вызова один раз для каждого элемента. Функция обратного вызова должна возвращать строку или символ, указывающий на группу связанного элемента. В следующем примере, взятом из документации MDN, имеется массив товаров, для возврата которых используется метод groupBy, сгруппированный по типу. Более подробную информацию можно найти в документации по groupBy. Теперь функция локальных переопределений оптимизирована, что позволяет легко изменять заголовки ответов и веб-содержимое удаленных ресурсов из панели Network, не имея к ним доступа. Чтобы переопределить веб-содержимое, откройте панель Network, щелкните правой кнопкой мыши запрос и выберите пункт Override content. Если у вас установлены, но отключены локальные переопределения, DevTools включит их. Если они еще не установлены, DevTools предложит это сделать в верхней панели действий. Выберите папку, в которой будут храниться переопределения, и разрешите DevTools доступ к ней. После настройки переопределений DevTools переводит вас в меню Sources > Overrides > Editor, где вы можете переопределить веб-содержимое. Обратите внимание, что переопределенные ресурсы отмечены значком Saved. на панели Network. Наведите курсор на значок, чтобы увидеть, что именно было переопределено. Все подробности и дополнительную информацию о DevTools в Chrome 117 см. в разделе "Что нового в DevTools". Конечно, есть и ещё. Долгожданное значение subgrid для grid-template-columns и grid-template-rows теперь реализовано в Chrome. WebSQL помечена как устаревшая и событие unload тоже. notRestoredReasons API для bfcache, упомянутый в видеоролике для Chrome 116, должен быть запущен в этой версии.