DEV Community

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

Posted 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.

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)