Enabling carousel design patterns in CSS
- Past
- Confirmed
- Breakout Sessions
- Past
- Confirmed
- Breakout Sessions
Meeting
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:
- Carousel APIs generally: https://github.com/w3c/csswg-drafts/issues/9745
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:
- Carousel APIs generally: https://github.com/w3c/csswg-drafts/issues/9745
Goal(s):
Share planned feature set and demos. Discuss gaps and plan how the related features should work.
Agenda:
- Introduction / update https://github.com/w3c/csswg-drafts/issues/9745
- Scroll markers https://github.com/w3c/csswg-drafts/issues/10720
- Inert https://github.com/w3c/csswg-drafts/issues/10711
- Limited fragmentainer styling (e.g. columns) https://github.com/w3c/csswg-drafts/issues/10715
- Scroll buttons https://github.com/w3c/csswg-drafts/issues/10722
- Focus order of the generated controls https://github.com/w3c/csswg-drafts/issues/10912
- Active marker calculation https://github.com/w3c/csswg-drafts/issues/10917
Materials:
Minutes
Read minutesExport 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.