Кнопки для 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

Выглядеть это будет вот так:

<style>
  .carousel__track {
    display: flex;
    overflow-x: auto;
    width: 300px;
    scroll-snap-type: x mandatory;
  }
  
  .carousel__slide {
    min-width: 300px;
    scroll-snap-align: center;
  }
</style>

<section
  class="carousel"
  aria-labelledby="related"
  aria-roledescription="carousel"
>
  <h2 id="related">Смотрите также</h2>
  <div class="carousel__controls">
    <button
      type="button"
      command="page-inline-start" 
      commandfor="track"
    >
      Предыдущий
    </button>
    <button
      type="button"
      command="page-inline-end"
      commandfor="track"
    >
      Следующий
    </button>
  </div>
  <div class="carousel__track" id="track">
    <div
      class="carousel__slide"
      role="group"
      aria-roledescription="slide"
      aria-label="1 из 6"
    >
      <!-- Слайд 1 -->
    </div>
    <div
      class="carousel__slide"
      role="group"
      aria-roledescription="slide"
      aria-label="2 из 6"
    >
      <!-- Слайд 2 -->
    </div>
    <!-- остальные слайды -->
  </div>
</section>

Кнопки привязываются к карусели через commandfor. Нажатие приводит к вызову системной команды на карусели «прокрутить одну страницу» в зависимости от направления. В конечном итоге это приводит к прокрутке слайдов с учётом точек привязки.

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

Для начала функциональность ограничена прокруткой одной страницы по нужной оси. Но уже обсуждаются расширения: отключение при достижении крайних элементов, автоматическая привязка без commandfor, «scroll to top» и количество страниц.

Использование обычных кнопок в сочетании с Invoker Commands — это именно то, как изначально должны были быть реализованы встроенные в платформу карусели на мой взгляд. Это понятнее, удобнее и доступнее кнопок, создаваемых в CSS.

#html #css