2021-02-19 14:40:11
Продолжаем разбираться со слайдерами на CSS. Первая часть поста здесь.
В предыдущей части никто не упомянул про CSS-свойство scroll-snap. Это было бы хорошим аргументом за то, чтобы использовать CSS для слайдеров. Спойлер: нет.
Но был очень хороший комментарий про graceful degradation — «Что будет, если JS отключится?». Автор вопроса намекает, что если бы слайдер работал полностью на CSS, то при отключённом JavaScript он продолжил работать. Такой вот железобетонный слайдер, которому ничего не страшно.
В очередной раз повторимся, механизмы работают хорошо, когда их применяют по назначению. Скролснэпом вы как будто пытаетесь делать сетки на float. Да, 10 лет ими делали сетки, но поддержка таких сеток всегда была сложной.
То же самое с scroll-snap для слайдеров. Чуть сложность слайдера вырастает и scroll-snap превращается во врага, а не помощника. Заказчик попросит: сделать бесконечную карусель, добавить кнопки «Показать предыдущий/следующий слайд», сделать созависимые слайдеры, прокрутку не одного слайда, а нескольких, если некоторые слайды маленькие. У scroll-snap сразу лапки, он с такими задачами не справится или справится очень плохо.
Но scroll-snap как раз очень хорошо подойдёт для progressive enhancement. Сначала делаем прокрутку слайдов с помощью scroll-snap, а после докручиваем всю необходимую функциональность с помощью JS. Когда JS есть, слайдер имеет всю функциональность. Когда его нет, слайдер превращается в свою упрощённую версию — просто умею скролить слайды.
#неглупые_вопросы
2.1K viewsedited 11:40
H
