Publié le 20 mars 2025
À partir de Chrome 135, vous pouvez utiliser les fonctionnalités de la spécification CSS Overflow 5 conçues pour créer des expériences de défilement et de carrousel.
Cet article présente de nombreuses expériences de défilement et de carrousel créées à l'aide de ces nouvelles fonctionnalités, et sans JavaScript. Regardez la vidéo suivante et découvrez les possibilités qui s'offrent à vous.
La vidéo présente une harmonie de boutons de défilement, de repères de défilement, d'animations basées sur le défilement, de requêtes scroll-state(), de :has(), de grilles, d'ancrages et bien plus encore.
L'histoire de l'accessibilité est encore plus impressionnante.
Les bonnes pratiques concernant les carrousels sont gérées par le navigateur, grâce à la collaboration des équipes d'ingénierie et d'accessibilité. Il serait très difficile de créer un carrousel plus accessible que celui-ci.
Rencontrez ::scroll-button() et ::scroll-marker()
Un carrousel est une zone de défilement avec jusqu'à deux affordances d'UI supplémentaires : des boutons et des repères.
Dans la première version des fonctionnalités de carrousel CSS, les boutons et les repères sont créés à partir de CSS. Le navigateur place les éléments en tant que frères et sœurs, avec les rôles appropriés, dans l'ordre des onglets approprié et conserve leur état. Cela facilite le développement d'un carrousel accessible.
Boutons de défilement
Éléments<button>de défilement interactifs, avec état et fournis par le navigateur, qui facilitent l'accès au contenu et permettent de faire défiler 85% d'une zone de défilement lorsqu'ils sont enfoncés.Repères de défilement
Éléments<a>de navigation avec état fournis par le navigateur qui facilitent l'accès au contenu de tout élément demandé dans la zone de défilement.
Le reste de cet article explique comment créer un carrousel à l'aide de ces nouvelles fonctionnalités.
Commencer avec un scroller
Vous pouvez ajouter des boutons et des repères à n'importe quelle zone de défilement de votre site.
Le code CSS suivant crée une zone de défilement de base à utiliser dans les étapes ultérieures pour ajouter des boutons et des repères. Le forçage du défilement n'est pas obligatoire pour un carrousel, mais il est utilisé dans cet exemple. Les carrousels fonctionnent également avec les défilements verticaux et bidirectionnels.
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
> li {
scroll-snap-align: center;
}
}
Ajouter des boutons de défilement avec ::scroll-button()
Selon votre système d'exploitation, il est possible qu'il existe déjà des boutons de défilement autour des barres de défilement. Les boutons de barre de défilement intégrés ont tendance à pousser une zone de défilement, tandis que les boutons de défilement CSS occupent 85% de la zone de défilement.
Pour les carrousels qui n'affichent qu'un seul élément en pleine largeur à la fois avec des points d'ancrage de défilement, le montant sera calculé par article. Pour les longues listes d'éléments où plusieurs sont affichés à la fois, le défilement occupe presque une page entière.
Pour ajouter des boutons de défilement avec CSS:
- Ajoutez-les comme les autres pseudo-éléments, avec un sélecteur:
.carousel::scroll-button(right)pour un bouton de défilement vers la droite. - Spécifiez
contentavec un texte alternatif de remplacement accessible facultatif.
Le navigateur crée des boutons réels, avec votre contenu à l'intérieur, comme des frères et sœurs du défilement. Vous pouvez maintenant organiser ces boutons, leur appliquer un style ou les anchor() selon vos besoins. Le code CSS suivant en crée deux, l'un pour un bouton de défilement vers la gauche et l'autre pour un bouton de défilement vers la droite.
.carousel {
…
&::scroll-button(left) {
content: "⬅" / "Scroll Left";
}
&::scroll-button(right) {
content: "⮕" / "Scroll Right";
}
&::scroll-button(*)::focus-visible {
outline-offset: 5px;
}
}
Ajouter des repères de défilement avec ::scroll-marker()
Comme l'élément de la barre de défilement, les repères de défilement CSS peuvent donner une indication sur la taille du carrousel, tout en offrant la possibilité de passer rapidement à la fin ou au début. Un repère de défilement CSS est différent de la barre de défilement, car chaque repère est un lien pouvant représenter n'importe quel élément de la barre de défilement.
Prenons l'exemple des saisons d'une série TV. Au lieu de créer un repère pour chacun des 10 épisodes, créez deux repères qui redirigent vers le début du chapitre.
Notez que ces repères ne sont pas des points. Ils utilisent la propriété content: "Season 1" de leur pseudo-élément. Les repères peuvent également être des miniatures, couramment utilisées pour les carrousels de galeries sur les sites Web d'e-commerce ou axés sur la photo.
Les repères sont comme des liens <a> sur la page, mais présentent certaines fonctionnalités spéciales:
- Ils incluent un état
:target-currentlorsque le repère est visible ou accroché. - La navigation au clavier est incluse et se comporte comme un groupe de focus.
- L'expérience avec les lecteurs d'écran est incluse, ainsi que les rapports tels qu'une liste d'onglets.
Pour ajouter des repères à des points d'intérêt importants dans votre défileur, procédez comme suit:
- Définissez l'emplacement de l'
scroll-marker-groupsurbeforeouafter. - Sélectionnez les points d'intérêt à l'aide d'un sélecteur
.carousel .point-of-interest::scroll-marker. - Spécifiez
contentavec un texte alternatif de substitution accessible facultatif (chiffres, texte, vide ou image).
Le navigateur crée tous les repères et les place dans le conteneur du groupe de repères. Cet exemple crée un repère vide pour chaque <li>, afin de créer un point de repère pour chaque élément.
.carousel {
…
scroll-marker-group: after;
> li::scroll-marker {
content: ' ';
&:target-current {
background: var(--accent);
}
}
}
L'élément contenant des repères est appelé ::scroll-marker-group. Il est créé en tant que frère du dispositif de défilement, tout comme les boutons de défilement. Vous pouvez styliser et placer ce conteneur où vous le souhaitez.
Marqueurs et boutons en même temps
En combinant les deux, l'expérience ressemble à un carrousel, mais présente les avantages suivants:
- Fonctionne avec JavaScript désactivé.
- Aucune hydratation ni aucune mise à l'échelle paresseuse (réduction du CLS).
- Compatible avec tous les types d'animations et de déclencheurs de défilement.
- L'accessibilité est incluse.
- Compatible avec l'écran tactile, la souris et le clavier.
Faites moins, touchez plus, plus vite.
Ressources
Dans cet article, nous utilisons principalement le terme "carrousel" pour désigner ces fonctionnalités, mais leurs fonctionnalités et leur utilité vont bien au-delà des cas d'utilisation du carrousel. Pour découvrir tout le potentiel de ces nouvelles fonctionnalités, essayez la galerie carrousel et découvrez d'autres composants, comme le scrollpy, les onglets et les diapositives.
- Normes Web
- Chrome
Configurateur de carrousel
Pour les apprenants visuels et interactifs, essayez le configurateur de carrousel.
Il propose des boutons d'activation/de désactivation, par exemple pour les boutons de défilement. Lorsque l'option est activée, les boutons et le CSS associé s'affichent immédiatement dans le carrousel.
Il inclut également des exemples de concepts plus avancés associés aux carrousels:
- interactivité
- scroll-state
- Animation basée sur le défilement
- et les colonnes de repère de défilement.
Galerie carrousel
Un espace de présentation pour les utilisateurs qui souhaitent savoir dans quelle mesure ils peuvent exploiter ces fonctionnalités, en répondant à des questions telles que "Est-ce que je peux faire X ?". Chaque démonstration est basée sur un cas d'utilisation trouvé sur Internet. Chaque démonstration montre comment orchestrer ces boutons et repères avec une animation basée sur le défilement, des requêtes scroll-state() et bien plus encore.
Fait amusant : l'ensemble du site est sans JavaScript.
Les exemples vont du délicieusement simple au fantastiquement robuste et riche en fonctionnalités. La navigation dans la galerie doit être inspirante, rassurante et, bien entendu, permettre d'inspecter le code à utiliser. Recherchez et inspectez @layer utilities pour trouver des utilitaires qui peuvent vous aider à créer des carrousels.
Autres tâches
Nous sommes fiers de la facilité avec laquelle ces fonctionnalités s'intègrent à l'ensemble du code HTML et CSS. L'accessibilité d'un carrousel CSS est optimale. Les performances d'un carrousel CSS sont meilleures que celles de n'importe quelle solution JavaScript. L'expérience utilisateur d'un carrousel CSS est naturelle, fluide et riche. Toutefois, il existe des moyens pour améliorer vos performances.
Utiliser vos propres éléments
Nous travaillons déjà pour vous permettre d'ajouter vos propres composants pour les boutons de défilement et les repères. Vous pouvez donc fournir vos propres balises <a> contenant du contenu enrichi, comme des icônes. Vous pouvez également utiliser vos propres boutons multicouches créés avec Tailwind.
Défilement cyclique
De nombreux carrousels se remettent en place à la fin, comme un manège de fête foraine. Nous avons bien noté ce point et nous prévoyons de proposer une solution de plate-forme.
Nous espérons que vous apprécierez cette fonctionnalité. Nous sommes impatients de voir tous les utilisateurs Web dont JavaScript est désactivé profiter d'une expérience de défilement agréable et de toutes les réductions de CLS qui seront obtenues grâce au cycle de vie mieux synchronisé d'un carrousel intégré.
Moins de travail pour vous, une expérience utilisateur de qualité et de meilleures performances.