DEV Community

Cover image for Native CSS carousels and positioning controls
Ross Angus
Ross Angus

Posted on • Edited on

Native CSS carousels and positioning controls

#css #carousel #chrome

Cover image by JessicaChristian

As part of a silly academic exercise I'm working on, I was digging into pure CSS carousels. Like all lovers of plane English, I started with the implementation documented on CSS Tricks.

(Through gritted teeth, at the time of writing this only works on Chrome)

This uses some CSS properties I'd not encountered before - namely anchor-name, position-anchor and position-area.

Let me be candid for a second: this is a small subset of the CSS properties from the article which I'm unfamiliar with. But these three are pertinent to my use-case.

Naturally, I started thinking like a QA engineer and added multiple carousels to my page.

The characters Merry and Pippin from the film The Lord of the Rings: The Fellowship of the Ring. Merry looks on as Pippin asks what about second breakfast?

Which is where it stopped working:

It turns out the anchor-name works in a similar way to an ID in that there can only be one per page. Except it's specified in the CSS, not the HTML. And just like with non-validating pages which include multiple IDs of the same value, the browser treats the last one on the page as the real one.

Edit: a solution to this issue

Since writing this post, I've read the documentation at web.dev which describes how to use anchor-scope to address exactly this issue.


Looking at the DOM of the carousel, the answer seemed simple:

<div aria-roledescription="carousel">
  ::scroll-button(inline-start)
  ::scroll-button(inline-end)
  ::scroll-marker-group
  <div role="group" aria-roledescription="slide">
    ...
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Give [aria-roledescription="carousel'] a position of relative and position the two ::scroll-buttons using absolute. But that absolutely did not work:

I went around the houses for a bit with this and Cursor (I know, I know...) pointed me at a bunch of new CSS which sort of replicates positioning, but ... not?

This seemed a really dumb problem. The buttons were right there in the markup. Having them render in the correct spot seemed trivial. Then I remembered how my old colleague James described me once: You do interesting things with old technology. So I got rid of all that modern CSS and floated the right button:

It's possible that I've encountered a bug in Chrome's rendering engine here - the DOM and the layout engine disagree with each other. Cursor's only useful contribution to this question was that this happens with bleeding-edge features such as this.

Top comments (0)