CSS Overflow Navigation Controls

[flackr]

こんにちは TAG-さん!

I'm requesting a TAG review of CSS Overflow Navigation Controls.

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.

There are a variety of problems being solved by carousels, which we believe could be provided by a set of CSS features. Developers could then combine these CSS features to create the various designs. CSS-only component libraries could be built to further simplify this process.

• Explainer¹: https://github.com/w3c/csswg-drafts/blob/main/css-overflow-5/carousel-explainer.md
• Specification: https://drafts.csswg.org/css-overflow-5/#scroll-navigation, https://drafts.csswg.org/css-multicol-2/#selectordef-column, interactivity: inert
• WPT Tests: Need to be moved to wpt
• User research: https://css.oddbird.net/overflow/explainer/ (Carousel listed among top missing elements https://2023.stateofhtml.com/en-US/usage/#html_missing_elements)
• Security and Privacy self-review²: This feature has no known privacy/security concerns. https://drafts.csswg.org/css-overflow-5/#privacy https://drafts.csswg.org/css-overflow-5/#security
• GitHub repo: https://github.com/w3c/csswg-drafts/
• Primary contacts:
  • Robert Flack (@flackr), Google, editor
  • Tab Atkins (@tabatkins), Google, editor
• Organization/project driving the specification: Google
• Multi-stakeholder support³:
  • Chromium comments: Positive, implementation is underway
  • Mozilla comments: CSS Overflow Navigation Controls mozilla/standards-positions#1161
  • WebKit comments: CSS Overflow Navigation Controls WebKit/standards-positions#447
• Status/issue trackers for implementations⁴:
  • Chromium: ::scroll-marker and ::scroll-marker-group, ::scroll-button(*), interactivity: inert

Further details:

• I have reviewed the TAG's Web Platform Design Principles
• Relevant time constraints or deadlines:
• The group where the work on this specification is currently being done: CSSWG
• The group where standardization of this work is intended to be done (if different from the current group):
• Major unresolved issues with or opposition to this specification:
• This work is being funded by:

[xiaochengh]

Hi @flackr! We discussed it at a TAG breakout today and found there are 4 features to be reviewed. Since they target different parts of the carousel pattern, they might need different conversations. So I'm going to split it into 4 sub-issues. Please let me know if that sounds good to you, thanks!

[flackr]

Thanks @xiaochengh that sounds reasonable to me. I filed them together as a lot of the features are expected to be complementary - e.g. being able to generate a ::scroll-marker off of a ::column makes auto-pagination "just work": https://chrome.dev/carousel/horizontal/pages/ however they are indeed independent features that each have individual value.