Карусели с CSS

Адам Аргайл

Опубликовано: 20 марта 2025 г.

В Chrome 135 вы можете использовать функции спецификации CSS Overflow 5 , которые были разработаны для создания возможностей прокрутки и карусели.

Этот пост представляет собой обзор множества различных возможностей прокрутки и карусели, созданных с использованием этих новых функций и без использования JavaScript. Посмотрите следующее видео и порадуйтесь тому, чего теперь можно достичь.

В видео показана гармония кнопок прокрутки, маркеров прокрутки, анимации, управляемой прокруткой, запросов Scroll-state(), :has(), сетки, привязки и многого другого.

Еще более впечатляет история доступности.

Лучшие практики карусели обрабатываются браузером благодаря совместной работе групп разработчиков и специалистов по обеспечению специальных возможностей. Было бы очень сложно сделать более доступную карусель, чем эта.

Элементы карусели отображаются в виде дерева доступности, где кнопки и элементы вкладок четко обозначены, чтобы обеспечить предварительный просмотр того, что программа чтения с экрана увидит в карусели.
Снимок экрана: дерево доступности карусели Chrome DevTools — демо

Встречайте ::scroll-button() и ::scroll-marker()

Карусель — это область прокрутки с двумя дополнительными возможностями пользовательского интерфейса — кнопками и маркерами.

В первой версии функций карусели CSS кнопки и маркеры создаются из CSS. Браузер размещает элементы как родственные элементы с соответствующими ролями, в правильном порядке табуляции и поддерживает их состояние. Это упрощает разработку доступной карусели.

  • Кнопки прокрутки
    Предоставляемые браузером элементы <button> с возможностью интерактивной прокрутки с отслеживанием состояния, которые помогают получить доступ к контенту и прокручивать 85 % области прокрутки при нажатии.

  • Маркеры прокрутки
    Предоставляемые браузером элементы навигации <a> с отслеживанием состояния, которые помогают получить доступ к содержимому любого запрошенного элемента в области прокрутки.

Оставшаяся часть статьи демонстрирует, как создать карусель с использованием этих новых функций.

Начните со скроллера

Вы можете добавлять кнопки и маркеры в любую область прокрутки вашего сайта.

Следующий код CSS создает базовую область прокрутки для использования на последующих этапах для добавления кнопок и маркеров. Привязка прокрутки не требуется для карусели, но в этом примере она используется. Карусели также подходят для вертикальных и двунаправленных скроллеров.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}
Область прокрутки отображается без каких-либо возможностей или подсказок, кроме обрезанного контента.

Добавьте кнопки прокрутки с помощью ::scroll-button()

В зависимости от вашей операционной системы вокруг полос прокрутки уже могут быть кнопки прокрутки. Встроенные кнопки полосы прокрутки имеют тенденцию смещать область прокрутки, тогда как кнопки прокрутки CSS занимают 85% области прокрутки.

Для каруселей, которые одновременно отображают только один элемент полной ширины с точками привязки прокрутки , это будет выглядеть как количество элементов по количеству. Для длинных списков элементов, в которых одновременно отображается несколько элементов, он прокручивает почти всю страницу.

Чтобы добавить кнопки прокрутки с помощью CSS:

  1. Добавьте их, как и другие псевдоэлементы, с селектором: .carousel::scroll-button(right) для кнопки прокрутки вправо.
  2. Укажите content с необязательным доступным резервным альтернативным текстом .

Браузер создаст настоящие кнопки с вашим контентом внутри, как аналоги скроллера. Теперь вы можете свободно размещать эти кнопки, стилизовать их или anchor() по своему усмотрению. Следующий CSS создает два: один для кнопки прокрутки влево и один для кнопки прокрутки вправо.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*)::focus-visible {
    outline-offset: 5px;
  }
}
Демо

Добавьте маркеры прокрутки с помощью ::scroll-marker()

Подобно элементу ползунка полосы прокрутки, маркеры прокрутки CSS могут указывать на размер карусели, а также предоставляют возможность быстрого перемещения к концу или началу. Маркер прокрутки CSS отличается от полосы прокрутки, поскольку каждый маркер представляет собой ссылку, которая может представлять любой элемент в скроллере .

Примером такого различия являются сезоны телесериалов. Вместо того, чтобы делать маркер для каждого из 10 эпизодов, создайте 2 маркера, ведущие к началу главы.

Показан горизонтальный список телесериалов, начиная с эпизода 1 сезона 2. Выше есть два заголовка списка: «Сезон 1» и «Сезон 2», каждый со стрелками, указывающими на них, что намекает на то, что это сгенерированные маркеры прокрутки.

Обратите внимание, что эти маркеры не являются точками, они используют свойство content: "Season 1" своего псевдоэлемента. Маркеры также могут представлять собой миниатюры, которые обычно используются для каруселей галерей на сайтах электронной коммерции или на веб-сайтах, ориентированных на фотографии.

Маркеры похожи на внутристраничные ссылки <a> , но имеют некоторые особенности:

  1. Они включают состояние :target-current , когда маркер находится в поле зрения или зафиксирован.
  2. Навигация с помощью клавиатуры включена и ведет себя как фокус-группа .
  3. Включена возможность чтения с экрана и отчеты в виде таблиц.

Добавьте маркеры к значимым точкам интереса в скроллере, выполнив следующие действия:

  1. Определите размещение scroll-marker-group before или after .
  2. Выберите точки интереса с помощью селектора .carousel .point-of-interest::scroll-marker .
  3. Укажите content с необязательным доступным резервным альтернативным текстом ; числа, текст, пусто или изображение.

Браузер создает все маркеры и помещает их в контейнер группы маркеров. В этом примере создается пустой маркер для каждого <li> , чтобы создать точку-маркер для каждого элемента.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}
Демо

Элемент, содержащий маркеры, называется ::scroll-marker-group и создается как родственный элемент скроллера, как и кнопки прокрутки. Этот контейнер можно стилизовать и разместить там, где вам нужно.

Маркеры и кнопки одновременно

Сложите эти два вместе, и опыт будет выглядеть как карусель, но у него будут следующие преимущества:

  • Работает с отключенным JavaScript.
  • Никакого увлажнения или ленивого определения размера (уменьшите CLS).
  • Готов ко всем видам анимации прокрутки и триггерам.
  • Доступность включена.
  • Сенсорный экран, мышь и клавиатура удобны.

Делайте меньше, достигайте большего и быстрее.

Демо

Ресурсы

В этом посте эти функции в основном называются «каруселью», но их возможности и полезность выходят далеко за рамки случаев использования карусели. Чтобы получить полное представление о потенциале этих новых функций, попробуйте галерею «Карусель» и посмотрите другие компоненты, такие как прокрутка, вкладки и слайды.

Для визуальных и интерактивных учащихся попробуйте конфигуратор карусели .

Он предлагает переключатели, например, кнопки прокрутки, и при включении показанной карусели сразу появляются кнопки и используется соответствующий CSS.

Скриншот веб-сайта конфигуратора, на котором показан фрагмент HTML-кода простого списка. Под HTML находятся 4 переключателя: кнопки прокрутки, точечная навигация, автостраницы и инертный режим. Под переключателями находится список карт, готовых к добавлению любого из предложений переключателей.
https://chrome.dev/carousel-configurator/

Он также включает примеры более сложных концепций, которые расположены рядом с каруселью:

Демонстрационная площадка для тех, кому интересно, как далеко вы можете продвинуть эти функции, отвечая на такие вопросы, как «может ли это сделать X?». Каждая демонстрация основана на сценарии использования, найденном в Интернете. В каждой демонстрации показано, как организовать эти кнопки и маркеры с помощью анимации прокрутки , запросов Scroll-state() и многого другого.

Интересный факт: весь сайт не содержит JavaScript.

Скриншот целевой страницы галереи карусели. Имеет приветственный заголовок, некоторую информацию о сайте и список примеров карусели в виде ссылок.
https://chrome.dev/carousel/

Примеры варьируются от восхитительно простых до фантастически надежных и многофункциональных. Просмотр галереи должен вдохновлять, обнадеживать и, конечно же, обеспечивать возможность проверки кода. Найдите и изучите @layer utilities , которые помогут вам создавать карусели.

Дальнейшая работа

Мы гордимся тем, насколько хорошо эти функции интегрируются со всеми HTML и CSS. Доступность CSS-карусели на высшем уровне. Производительность CSS-карусели выше, чем у любого решения на JavaScript. Пользовательский интерфейс CSS-карусели естественный, плавный и насыщенный. Однако есть способы улучшить ситуацию.

Принесите свои элементы

Уже ведется работа над тем, чтобы вы могли добавлять свои собственные компоненты для кнопок прокрутки и маркеров. Это означает, что вы можете предоставить свои собственные теги <a> с богатым содержимым, например значками. Вы также можете использовать свои собственные многослойные кнопки, созданные с помощью Tailwind .

Циклическая прокрутка

Многие карусели закручиваются сами по себе, когда доходят до конца, как это может быть при поездке на карусели на ярмарке. Это находится в нашем поле зрения, и мы намерены предоставить для него платформенное решение.

Мы надеемся, что вам понравится эта функция. Мы с нетерпением ждем всех веб-пользователей с отключенным JavaScript, которые теперь получат приятный опыт прокрутки и все сокращения CLS, которые можно получить за счет более своевременного жизненного цикла встроенной карусели.

Меньше дел, отличный пользовательский опыт, лучшая производительность.