В завершение года - две небольших статьи про обновления в Chrome. На повестке - individual requests throttle и scroll-triggered animations. О чем повествуется:
В Chrome 144 появилось индивидуальное ограничение скорости сетевых запросов в DevTools.
- Можно блокировать или замедлять отдельные URL или домены, не всю страницу.
- Настройки — через вкладку Request conditions с масками, приоритетами и профилями.
- Заблокированные запросы — красные, замедленные — желтые с иконкой часов.
- Удобно тестировать влияние медленных ресурсов (например, сторонних API или картинок).
В Chrome 145 добавлены CSS-анимации, запускаемые при прокрутке (scroll-triggered animations).
- Теперь анимации активируются при достижении определённого положения скролла.
- Используются новые свойства: animation-trigger и timeline-trigger.
- Активация и деактивация задаются через диапазоны entry/exit.
- Работают на CSS, без IntersectionObserver.
Пример:
.card {
timeline-trigger: --t view() contain 15% contain 85%;
animation: unclip 0.35s ease-in-out both;
animation-trigger: --t play-forwards play-backwards;
}При прокрутке до нужного положения карточка плавно появляется (play-forwards), а при уходе из зоны видимости — исчезает (play-backwards).
Читать здесь:
https://developer.chrome.com/blog/throttle-individual-network-requests?hl=en
https://developer.chrome.com/blog/scroll-triggered-animations?hl=en
Всем хороших праздников и до встречи в новом году!
