Fecha de publicación: 20 de marzo de 2025
A partir de Chrome 135, puedes usar funciones de la especificación CSS Overflow 5 que se diseñaron para crear experiencias de desplazamiento y carrusel.
Esta publicación es una descripción general de muchas experiencias de desplazamiento y carrusel diferentes creadas con estas funciones nuevas y sin JavaScript. Mira el siguiente video y prepárate para descubrir lo que ahora puedes lograr.
En el video, se muestra una armonía de botones de desplazamiento, marcadores de desplazamiento, animación impulsada por desplazamiento, consultas de scroll-state(), :has(), cuadrícula, ancla y mucho más.
Aún más impresionante es la historia de accesibilidad.
El navegador controla las prácticas recomendadas del carrusel, gracias a que los equipos de ingeniería y accesibilidad trabajan en conjunto. Sería muy difícil crear un carrusel más accesible que este.
Conoce a ::scroll-button() y ::scroll-marker()
Un carrusel es un área de desplazamiento con hasta dos indicadores de la IU agregados: botones y marcadores.
En la versión uno de las funciones de carrusel de CSS, los botones y marcadores se crean a partir de CSS. El navegador coloca los elementos como hermanos, con los roles adecuados, en el orden de tabulación correcto y mantiene su estado. Esto facilita el desarrollo de un carrusel accesible.
Botones de desplazamiento
Son elementos<button>de indicación de desplazamiento interactivos, con estado y proporcionados por el navegador que ayudan en el acceso al contenido y desplazan el 85% de un área de desplazamiento cuando se presionan.Marcadores de desplazamiento
Son elementos<a>de navegación con estado proporcionados por el navegador que ayudan en el acceso al contenido de cualquier elemento solicitado en el área de desplazamiento.
En el resto de esta publicación, se muestra cómo crear un carrusel con estas funciones nuevas.
Comienza con un control de desplazamiento
Puedes agregar botones y marcadores a cualquier área de desplazamiento de tu sitio.
El siguiente CSS crea un área de desplazamiento básica para usar en pasos posteriores y agregar botones y marcadores. No se requiere el ajuste del desplazamiento para un carrusel, pero se usa en este ejemplo. Los carruseles también funcionan para los controles de desplazamiento vertical y bidireccional.
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
> li {
scroll-snap-align: center;
}
}
Cómo agregar botones de desplazamiento con ::scroll-button()
Según el sistema operativo, es posible que ya haya botones de desplazamiento alrededor de las barras de desplazamiento. Los botones de barra de desplazamiento integrados tienden a desplazar una zona de desplazamiento, mientras que los botones de desplazamiento de CSS ocupan el 85% de la zona de desplazamiento.
En el caso de los carruseles que solo muestran un elemento de ancho completo a la vez con puntos de ajuste de desplazamiento, esto se percibirá como un importe por elemento. En el caso de las listas largas de elementos en las que se muestra más de uno a la vez, se desplaza casi una página completa.
Para agregar botones de desplazamiento con CSS, sigue estos pasos:
- Agrégalos como otros pseudoelementos, con un selector:
.carousel::scroll-button(right)para un botón que se desplace hacia la derecha. - Especifica
contentcon un texto alternativo de resguardo accesible opcional.
El navegador creará botones reales, con tu contenido dentro, como hermanos del control deslizante. Ahora puedes distribuir estos botones, aplicarles diseño o anchor() según sea necesario. El siguiente CSS crea dos, uno para un botón de desplazamiento hacia la izquierda y otro para un botón de desplazamiento hacia la derecha.
.carousel {
…
&::scroll-button(left) {
content: "⬅" / "Scroll Left";
}
&::scroll-button(right) {
content: "⮕" / "Scroll Right";
}
&::scroll-button(*)::focus-visible {
outline-offset: 5px;
}
}
Agrega marcadores de desplazamiento con ::scroll-marker()
Al igual que el elemento de desplazamiento de la barra de desplazamiento, los marcadores de desplazamiento de CSS pueden sugerir el tamaño del carrusel y, al mismo tiempo, proporcionar la indicación para moverse rápidamente al final o al principio. Un marcador de desplazamiento CSS es diferente de la barra de desplazamiento porque cada marcador es un vínculo que puede representar cualquier elemento del control deslizante.
Un ejemplo de esta distinción son las temporadas de una serie de TV. En lugar de crear un marcador para cada uno de los 10 episodios, crea 2 marcadores que vayan al principio del capítulo.
Ten en cuenta que estos marcadores no son puntos, sino que usan la propiedad content: "Season 1" de su pseudoelemento. Los marcadores también pueden ser miniaturas, que se usan comúnmente para los carruseles de galerías en sitios web de comercio electrónico o centrados en fotos.
Los marcadores son como los vínculos <a> en la página, pero tienen algunas características especiales:
- Incluyen un estado
:target-currentpara cuando el marcador está a la vista o ajustado. - Se incluye la navegación con el teclado, que se comporta como un grupo de enfoque.
- Se incluye la experiencia del lector de pantalla y se informa como una lista de pestañas.
Sigue estos pasos para agregar marcadores a lugares de interés significativos en tu control deslizante:
- Define la posición de
scroll-marker-groupcomobeforeoafter. - Selecciona los lugares de interés con un selector
.carousel .point-of-interest::scroll-marker. - Especifica
contentcon un texto alternativo de resguardo accesible opcional: números, texto, vacío o una imagen.
El navegador crea todos los marcadores y los coloca en el contenedor del grupo de marcadores. En este ejemplo, se crea un marcador vacío para cada <li> para crear un punto de marcador para cada elemento.
.carousel {
…
scroll-marker-group: after;
> li::scroll-marker {
content: ' ';
&:target-current {
background: var(--accent);
}
}
}
El elemento contenedor de los marcadores se denomina ::scroll-marker-group y se crea como un hermano del control de desplazamiento, al igual que los botones de desplazamiento. Este contenedor se puede diseñar y colocar donde sea necesario.
Marcadores y botones al mismo tiempo
Si combinas ambos, la experiencia se verá como un carrusel, pero tendrá los siguientes beneficios:
- Funciona con JavaScript inhabilitado.
- Sin hidratación ni tamaño diferido (reduce el CLS).
- Listo para todo tipo de animaciones de desplazamiento y activadores.
- Se incluye la accesibilidad.
- Son compatibles con el tacto, el mouse y el teclado.
Menos esfuerzo, más alcance, más rápido.
Recursos
En esta publicación, se hace referencia a estas funciones como "carrusel", pero sus capacidades y utilidad se extienden mucho más allá de los casos de uso de carruseles. Para obtener una imagen completa del potencial de estas nuevas funciones, prueba la Galería de imágenes deslizables y consulta otros componentes, como el panel de desplazamiento, las pestañas y las diapositivas.
- Estándares web
- Chrome
Carousel Configurator
Para los estudiantes visuales e interactivos, prueba el configurador de carruseles.
Ofrece interruptores, por ejemplo, para botones de desplazamiento, y cuando se habilita, el carrusel que se muestra muestra inmediatamente los botones, además del CSS asociado que se usa.
También incluye ejemplos de conceptos más avanzados que son adyacentes al carrusel:
- interactividad
- scroll-state
- animación impulsada por el desplazamiento
- y columnas de ajuste del desplazamiento
Galería giratoria
Un espacio de demostración para quienes tengan curiosidad sobre hasta dónde puedes llevar estas funciones y responder preguntas como "¿puede hacer X?". Cada demostración se basa en un caso de uso que se encuentra en Internet. En cada demostración, se muestra cómo organizar estos botones y marcadores con animación impulsada por el desplazamiento, consultas scroll-state() y mucho más.
Dato curioso: todo el sitio no tiene JavaScript.
Los ejemplos van desde lo deliciosamente simple hasta lo increíblemente sólido y con muchas funciones. La navegación por la galería debe ser inspiradora, tranquilizadora y, por supuesto, debe poder inspeccionarse para que el código la tome. Busca y examina @layer utilities para encontrar utilidades que te ayuden a crear carruseles.
Trabajo adicional
Nos enorgullece lo bien que se integran estas funciones con todo HTML y CSS. La accesibilidad de un carrusel de CSS es de primer nivel. El rendimiento de un carrusel de CSS es mejor que cualquier solución de JavaScript. La experiencia del usuario de un carrusel de CSS es natural, fluida y rica. Sin embargo, existen formas de mejorar.
Usa tus propios elementos
Ya se está trabajando para permitirte agregar tus propios componentes para botones de desplazamiento y marcadores. Esto significa que puedes proporcionar tus propias etiquetas <a> que tengan contenido enriquecido, como íconos. También puedes incluir tus propios botones de varias capas creados con Tailwind.
Desplazamiento cíclico
Muchos carruseles se unen al final, como un carrusel de feria. Estamos al tanto de este problema y tenemos la intención de proporcionar una solución de plataforma para ello.
Esperamos que disfrutes esta función. Esperamos que todos los usuarios web que tengan "JavaScript inhabilitado" obtengan una experiencia de desplazamiento agradable y todas las reducciones de CLS que se obtengan del ciclo de vida mejor sincronizado de un carrusel integrado.
Menos tareas, experiencias del usuario excelentes y mejor rendimiento.