Кнопки для CSS-карусели
В 135й версии Chrome появились CSS-карусели. С помощью Scroll Snap и новых псевдо-элементов можно создать функциональные карусели (и не только) с прокруткой, стрелками и маркерами, используя лишь HTML и CSS вместо тяжёлых JS-библиотек.
Звучит классно, но разработчики Chrome поторопились и выкатили реализацию, к которой в сообществе возникли вопросы. В частности, критиковалась доступность и использование псевдо-элементов в CSS для создания кнопок.
Многие высказались в пользу использования обычных HTML-кнопок. Я в том числе оставлял фидбек и предлагал использовать активно развивающийся API Invoker Commands, который уже внедрён в Chrome 135 и Firefox 144.
В мае началось обсуждение в OpenUI о добавлении новых команд для прокрутки. Затем последовал небольшой эксплейнер с описанием API. И на днях команда Chromium взялась за создание прототипа. Поэтому есть шансы, что это появится.
Что предлагается: 8 новых команд для прокрутки Scroll Snap контейнеров, на базе которых работает CSS-карусель. 4 команды для каждого направления плюс логические эквиваленты:
- page-up
- page-down
- page-left
- page-right
- page-block-start
- page-block-end
- page-inline-start
- page-inline-end
Выглядеть это будет вот так:
.carousel__track {
display: flex;
overflow-x: auto;
width: 300px;
scroll-snap-type: x mandatory;
}
.carousel__slide {
min-width: 300px;
scroll-snap-align: center;
}
Смотрите также
Предыдущий
Следующий
Кнопки привязываются к карусели через commandfor. Нажатие приводит к вызову системной команды на карусели «прокрутить одну страницу» в зависимости от направления. В конечном итоге это приводит к прокрутке слайдов с учётом точек привязки.
Это делает кнопки полностью настраиваемыми: можно добавить классы, атрибуты, вложить иконки, поместить в контейнер и разместить в нужном месте. Сама карусель избавляется от псевдо-элементов-кнопок, хотя их всё ещё можно будет добавить.
Для начала функциональность ограничена прокруткой одной страницы по нужной оси. Но уже обсуждаются расширения: отключение при достижении крайних элементов, автоматическая привязка без commandfor, «scroll to top» и количество страниц.
Использование обычных кнопок в сочетании с Invoker Commands — это именно то, как изначально должны были быть реализованы встроенные в платформу карусели на мой взгляд. Это понятнее, удобнее и доступнее кнопок, создаваемых в CSS.
#html #css
В 135й версии Chrome появились CSS-карусели. С помощью Scroll Snap и новых псевдо-элементов можно создать функциональные карусели (и не только) с прокруткой, стрелками и маркерами, используя лишь HTML и CSS вместо тяжёлых JS-библиотек.
Звучит классно, но разработчики Chrome поторопились и выкатили реализацию, к которой в сообществе возникли вопросы. В частности, критиковалась доступность и использование псевдо-элементов в CSS для создания кнопок.
Многие высказались в пользу использования обычных HTML-кнопок. Я в том числе оставлял фидбек и предлагал использовать активно развивающийся API Invoker Commands, который уже внедрён в Chrome 135 и Firefox 144.
В мае началось обсуждение в OpenUI о добавлении новых команд для прокрутки. Затем последовал небольшой эксплейнер с описанием API. И на днях команда Chromium взялась за создание прототипа. Поэтому есть шансы, что это появится.
Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться.
Что предлагается: 8 новых команд для прокрутки Scroll Snap контейнеров, на базе которых работает CSS-карусель. 4 команды для каждого направления плюс логические эквиваленты:
- page-up
- page-down
- page-left
- page-right
- page-block-start
- page-block-end
- page-inline-start
- page-inline-end
Выглядеть это будет вот так:
.carousel__track {
display: flex;
overflow-x: auto;
width: 300px;
scroll-snap-type: x mandatory;
}
.carousel__slide {
min-width: 300px;
scroll-snap-align: center;
}
Смотрите также
Предыдущий
Следующий
Кнопки привязываются к карусели через commandfor. Нажатие приводит к вызову системной команды на карусели «прокрутить одну страницу» в зависимости от направления. В конечном итоге это приводит к прокрутке слайдов с учётом точек привязки.
Это делает кнопки полностью настраиваемыми: можно добавить классы, атрибуты, вложить иконки, поместить в контейнер и разместить в нужном месте. Сама карусель избавляется от псевдо-элементов-кнопок, хотя их всё ещё можно будет добавить.
Для начала функциональность ограничена прокруткой одной страницы по нужной оси. Но уже обсуждаются расширения: отключение при достижении крайних элементов, автоматическая привязка без commandfor, «scroll to top» и количество страниц.
Использование обычных кнопок в сочетании с Invoker Commands — это именно то, как изначально должны были быть реализованы встроенные в платформу карусели на мой взгляд. Это понятнее, удобнее и доступнее кнопок, создаваемых в CSS.
#html #css