Как многие из вас знают, на прошлой неделе прошла конференция Google I/O 2025, где представили множество интересных новинок. Одна из них — новые возможности CSS для создания каруселей без JavaScript!
✨ Что появилось в Chrome 135:
🔹
::scroll-marker() — добавляет интерактивные маркеры прокрутки, которые позволяют пользователям легко ориентироваться и переходить к нужному слайду.🔹
::scroll-button() — создаёт встроенные кнопки прокрутки прямо средствами CSS. Никакого JS — всё работает «из коробки».💡 Эти новые псевдоэлементы позволяют создавать карусели с минимальным количеством кода.
Например, в Pinterest смогли сократить реализацию карусели с 2000 строк JavaScript до 200 строк CSS!
🔗 https://developer.chrome.com/blog/web-at-io25
📚 Подробнее с примерами, есть даже демки на codepen:
https://developer.chrome.com/blog/carousels-with-css
⚠️ А как насчёт кроссбраузерности?
На данный момент эти фичи поддерживаются только в Chrome 135+. Пока что для продакшена стоит использовать с осторожностью и предусматривать fallback'и.
