Carousels with CSS

Link: https://developer.chrome.com/blog/carousels-with-css

Waar gaat de blogpost over?

De blogpost introduceert nieuwe CSS-functionaliteiten in Chrome 135, afkomstig uit de CSS Overflow 5-specificatie, waarmee ontwikkelaars carousels kunnen bouwen zonder JavaScript. Met behulp van nieuwe pseudo-elementen zoals ::scroll-button() en ::scroll-marker() kunnen scrollknoppen en navigatiemarkeringen direct in CSS worden toegevoegd.

Deze aanpak verbetert de toegankelijkheid en prestaties, aangezien de browser zorgt voor de juiste roltoewijzing, tabvolgorde en statusbeheer van deze elementen.

Wat heb ik geleerd?

• Met ::scroll-button() kunnen scrollknoppen aan een scrollgebied worden toegevoegd die 85% van het gebied scrollen bij activatie.
• ::scroll-marker() maakt het mogelijk om navigatiemarkeringen te creëren die fungeren als ankerpunten binnen het scrollgebied.
• De browser genereert deze elementen als siblings van het scrollgebied, met de juiste ARIA-rollen en toetsenbordnavigatie, wat de toegankelijkheid ten goede komt.
• Carousels kunnen nu volledig worden opgebouwd met CSS, inclusief scrollanimaties en -indicatoren, zonder enige JavaScript.

Voorbeeld

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  > li {
    scroll-snap-align: center;
  }

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }

  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  scroll-marker-group: after;

  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

In dit voorbeeld wordt een horizontale carousel gecreëerd met scrollknoppen aan beide zijden en markeringen onderaan die de huidige positie aangeven.

Wat vind ik interessant?

Het is indrukwekkend hoe CSS zich blijft ontwikkelen om complexe UI-componenten mogelijk te maken zonder JavaScript. De integratie van toegankelijkheid op browserniveau vermindert de noodzaak voor extra scripting en zorgt voor een betere gebruikerservaring. Bovendien biedt deze aanpak betere prestaties en minder cumulatieve layoutverschuiving (CLS), wat belangrijk is voor Core Web Vitals.

Wat betekent dit voor mijn ontwikkeling?

Deze nieuwe CSS-functionaliteiten moedigen me aan om meer te vertrouwen op native browsermogelijkheden voor interactieve componenten. Door gebruik te maken van deze technieken kan ik lichtere, snellere en toegankelijkere webapplicaties bouwen. Het vermindert de afhankelijkheid van externe bibliotheken en vereenvoudigt het onderhoud van de codebasis.