Information

Enabling carousel design patterns in CSS
  • Past
  • Confirmed
  • Breakout Sessions

Meeting

Event details

Date:
Pacific Daylight Time
Status:
Confirmed
Location:
4 Concourse Level - Redondo
Participants:
Mustaq Ahmed, Rachel Andrew, Joey Arhar, Tab Atkins Jr., Kevin Babbitt, David Baron, Curt Bellew, Oriol Brufau, Keith Cirkel, Yehonatan Daniv, Hidde de Vries, Domenic Denicola, Brian Elton, Robert Flack, Simon Fraser, Rob Glidden, Daniel Holbert, Jesse Jurman, Brian Kardell, Roman Komarov, Pete LePage, Penelope McLachlan, Michal Mocny, James Nurthen, Adam Page, Giacomo Petri, Adrian Roselli, Marco Sabidussi, Miriam Suzanne, Hannah Van Opstal, Di Zhang
Big meeting:
TPAC 2024 (Calendar)

Carousels are an often used design pattern on the web. They are used in a variety of contexts, from product listing pages to slideshow like content. OpenUI has explored a range of carousel designs, showing that the specific layout and appearance can vary dramatically. They are also provided by many frameworks as components, however implementing a carousel correctly is complicated and often results in inconsistent and sometimes inaccessible implementations on the web today.

There are a set of problems being solved by carousels, which we believe could be provided by a set of simple incremental CSS features, allowing developers to combine these CSS features to create the various designs in a completely customizable fashion. CSS-only component libraries could be built to further simplify this process with an eventual built-in style similar to customizable select.

Prior discussions:

Agenda

Chairs:
Robert Flack

Description:
Carousels are an often used design pattern on the web. They are used in a variety of contexts, from product listing pages to slideshow like content. OpenUI has explored a range of carousel designs, showing that the specific layout and appearance can vary dramatically. They are also provided by many frameworks as components, however implementing a carousel correctly is complicated and often results in inconsistent and sometimes inaccessible implementations on the web today.

There are a set of problems being solved by carousels, which we believe could be provided by a set of simple incremental CSS features, allowing developers to combine these CSS features to create the various designs in a completely customizable fashion. CSS-only component libraries could be built to further simplify this process with an eventual built-in style similar to customizable select.

Prior discussions:

Goal(s):
Share planned feature set and demos. Discuss gaps and plan how the related features should work.

Agenda:

  1. Introduction / update https://github.com/w3c/csswg-drafts/issues/9745
  2. Scroll markers https://github.com/w3c/csswg-drafts/issues/10720
  3. Inert https://github.com/w3c/csswg-drafts/issues/10711
  4. Limited fragmentainer styling (e.g. columns) https://github.com/w3c/csswg-drafts/issues/10715
  5. Scroll buttons https://github.com/w3c/csswg-drafts/issues/10722
  6. Focus order of the generated controls https://github.com/w3c/csswg-drafts/issues/10912
  7. Active marker calculation https://github.com/w3c/csswg-drafts/issues/10917

Materials:

Export options

Personal Links

Please log in to export this event with all the information you have access to.

Public Links

The following links do not contain any sensitive information and can be shared publicly.

Feedback

Report feedback and issues on GitHub.