Descripción general de los conceptos básicos sobre cómo compilar una vista de desplazamiento horizontal responsiva para TVs, teléfonos, computadoras de escritorio, etcétera
En esta publicación, compartiré ideas sobre cómo crear un desplazamiento horizontal. para la Web que sean mínimas, adaptables, accesibles y que funcionen en toda navegadores y plataformas (como los televisores). Prueba la demostración.
Si prefieres ver un video, aquí tienes una versión de YouTube de esta publicación:
Descripción general
Crearemos un diseño de desplazamiento horizontal para alojar miniaturas de
medios o productos. El componente comienza como una lista <ul> simple, pero es
transformado con CSS en una experiencia de desplazamiento satisfactoria y fluida, mostrando
imágenes y ajustándolas a una cuadrícula. se agrega JavaScript para facilitar
Interacciones de índice itinerante, que ayudan a los usuarios de teclado a evitar recorrer más de 100 elementos.
Además, se utiliza una consulta de medios experimental, prefers-reduced-data, para convertir
desplazador multimedia en una experiencia ligera de desplazamiento por el título.
Comienza con lenguaje de marcado accesible
Un desplazador de contenido multimedia tiene solo un par de componentes principales, una lista con elementos. R lista, en su forma más sencilla, puede viajar por todo el mundo y estar claramente consumidas por todos. Un usuario que llegue a esta página puede explorar una lista y hacer clic en un vínculo para ver un elemento. Esta es nuestra base accesible.
Publica una lista con un elemento <ul>:
<ul class="horizontal-media-scroller">
<li></li>
<li></li>
<li></li>
...
<ul>
Haz que los elementos de la lista sean interactivos con un elemento <a>:
<li>
<a href="#">
...
</a>
</li>
Usa un elemento <figure> para representar semánticamente una imagen y su leyenda:
<figure>
<picture>
<img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
</picture>
<figcaption>Legends</figcaption>
</figure>
Observa los atributos alt y loading en <img>. Texto alternativo de un contenido multimedia
El desplazamiento es una oportunidad de UX para ayudar a aportar contexto adicional a la miniatura, o como
texto de resguardo si la imagen no se cargó o proporciona una IU hablada para que los usuarios
depender de la tecnología de asistencia,
como un lector de pantalla. Más información con Five Golden
de cumplimiento de las normas alternativas
texto.
El atributo loading acepta la palabra clave lazy como una forma de indicar esta imagen.
Solo se debe recuperar la fuente cuando la imagen esté dentro del viewport. Puede ser
muy bueno para listas largas, ya que los usuarios solo descargan imágenes de los elementos que
desplazado hasta la vista.
Cómo admitir la preferencia de esquema de colores del usuario
Usa color-scheme como una etiqueta <meta> para indicar al navegador que tu página
desea los estilos claro y oscuro proporcionados de usuario-agente. Es un modo oscuro gratuito
o el modo claro, según cómo lo mires:
<meta name="color-scheme" content="dark light">
La metaetiqueta proporciona la señal más temprana posible para que el navegador puede seleccionar un color de lienzo oscuro predeterminado si el usuario prefiere el tema oscuro. Esto significa que las navegaciones entre páginas del sitio no mostrarán un lienzo blanco. entre cargas. Tema oscuro fluido entre cargas; mucho mejor en la ojos.
Obtén más información de Thomas Steiner en https://web.dev/color-scheme/.
Agregar contenido
Dada la estructura de contenido anterior de ul > li > a > figure > picture > img,
La siguiente tarea es agregar imágenes y títulos para desplazarte. Incluí la demostración
imágenes y texto de marcador de posición estáticos, pero no dudes en utilizarlos
tu fuente de datos favorita.
Agrega estilo con CSS
Llegó el momento de que los CSS tomen esta lista genérica de contenido y la conviertan en una experiencia fluida a los desarrolladores. Netflix, App Stores y muchos otros sitios y apps usan áreas de desplazamiento para empaquetar el viewport con categorías y opciones.
Cómo crear el diseño de desplazamiento
Es importante evitar cortar contenido en los diseños o inclinarse por el texto. truncamiento con elipsis. Muchas televisiones tienen desplazadores de contenido multimedia, al igual que pero muchas veces recurren a contenido elipsivo. Este diseño no. También permite que el contenido multimedia anule el tamaño de la columna, lo que crea 1 diseño. lo suficientemente flexible para manejar muchas combinaciones interesantes.
El contenedor permite anular el tamaño de la columna proporcionando el tamaño predeterminado como una propiedad personalizada. Este diseño de cuadrícula se basa en el tamaño de la columna, es administrar solo el espaciado y la dirección:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
margin: 0;
}
Luego, el elemento <picture> usa la propiedad personalizada para crear nuestra relación de aspecto base: un cuadro:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
Con solo unos pocos estilos más pequeños, completa los elementos básicos de la barra de desplazamiento multimedia:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
& > li {
display: inline-block; /* removes the list-item bullet */
}
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
La configuración de overflow establece <ul> para permitir el desplazamiento y la navegación con el teclado.
a través de su lista, se quita su ::marker de cada elemento secundario directo <li>
si obtienes un nuevo tipo de visualización de inline-block.
Sin embargo, las imágenes aún no son responsivas y se precipitan desde el primer momento. adentro. Adaptarlas con algunos tamaños, ajustes y estilos de borde un gradiente de fondo para cuando son de carga diferida:
img {
/* smash into whatever box it's in */
inline-size: 100%;
block-size: 100%;
/* don't squish but do cover the space */
object-fit: cover;
/* soften the edges */
border-radius: 1ex;
overflow: hidden;
/* if empty, show a gradient placeholder */
background-image:
linear-gradient(
to bottom,
hsl(0 0% 40%),
hsl(0 0% 20%)
);
}
Relleno de desplazamiento
La alineación con el contenido de la página, más un área de superficie de desplazamiento de borde a borde que son esenciales para lograr un componente armonioso y mínimo.
Para lograr el diseño de desplazamiento de borde a borde que se alinee con nuestra tipografía
y líneas de diseño, usa un padding que coincida con scroll-padding:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
}
Corrección de errores de padding de desplazamiento horizontal Lo anterior muestra lo fácil que debería ser rellenar un contenedor de desplazamiento, pero con problemas de compatibilidad pendientes (se corrigió en Chromium 91 y versiones posteriores). Consulta aquí por un momento de la historia, pero la versión abreviada es que el relleno no siempre se tuvo en cuenta en una vista de desplazamiento.
Para engañar a los navegadores para que coloquen el relleno al final de la barra de desplazamiento, usaré apunta a la última figura de cada lista y agrega un seudoelemento que sea el la cantidad de padding deseado.
.horizontal-media-scroller > li:last-of-type figure {
position: relative;
&::after {
content: "";
position: absolute;
inline-size: var(--gap);
block-size: 100%;
inset-block-start: 0;
inset-inline-end: calc(var(--gap) * -1);
}
}
El uso de propiedades lógicas permite que la barra de desplazamiento de contenido multimedia funcione en cualquier modo de escritura y la dirección del documento.
Ajuste de desplazamiento
Un contenedor de desplazamiento con desbordamiento puede convertirse en un viewport de ajuste con una línea de CSS. Luego, corresponde a los elementos secundarios especificar cómo les gustaría alinearse con ese viewport.
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block-end: calc(var(--gap) / 2);
scroll-snap-type: inline mandatory;
& figure {
scroll-snap-align: start;
}
}
Enfoque
La inspiración de este componente proviene de su popularidad masiva en TVs en App Stores y más. Muchas plataformas de videojuegos usan un desplazador multimedia similar a este, como su diseño de pantalla principal principal. El enfoque es una UX enorme este momento, no solo una pequeña adición. Imagina que usas este desplazador multimedia de tu sofá con un control remoto, mejora esa interacción:
.horizontal-media-scroller a {
outline-offset: 12px;
&:focus {
outline-offset: 7px;
}
@media (prefers-reduced-motion: no-preference) {
& {
transition: outline-offset .25s ease;
}
}
}
Esto establece el estilo de contorno del enfoque 7px lejos del cuadro, lo que le brinda un
espacio. Si el usuario no tiene preferencias de movimiento para reducir el movimiento, el desplazamiento
en transición, lo que le da un movimiento sutil al evento de enfoque.
Índice itinerante
Los usuarios de controles de juegos y teclados requieren atención especial en estas largas listas el contenido y las opciones de desplazamiento. El patrón común para resolver esto se llama índice itinerante. Es cuando un contenedor de elementos está enfocado en el teclado, pero solo 1 elemento secundario puede mantenerlo por vez. Este elemento enfocable único a la vez está diseñado para permitir omitir la lista potencialmente larga de elementos, en lugar de presionar la pestaña 50 o más para llegar al final.
Hay 300 elementos en la primera barra de desplazamiento de la demostración. Podemos hacerlo mejor que hacer los atraviesan para llegar a la siguiente sección.
Para crear esta experiencia, JavaScript debe observar los eventos del teclado y el enfoque eventos. Creé una pequeña biblioteca de código abierto en npm para ayudar a que este usuario experiencia de usuario sea fácil de lograr. A continuación, te mostramos cómo utilizarlo para los 3 desplazadores:
import {rovingIndex} from 'roving-ux';
rovingIndex({
element: someElement
});
En esta demostración, se consulta el documento para los desplazadores y para cada uno de ellos se llama al
función rovingIndex(). Pasa el elemento rovingIndex() para obtener el roaming
de búsqueda, como un contenedor de lista y un selector de consulta de destino, en caso de que
los objetivos de enfoque no son subordinados directos.
document.querySelectorAll('.horizontal-media-scroller')
.forEach(scroller =>
rovingIndex({
element: scroller,
target: 'a',
}))
Para obtener más información sobre este efecto, consulta la biblioteca de código abierto roving-ux.
Relación de aspecto
Al escribir esta publicación, la asistencia para
aspect-ratio está detrás de un
en Firefox, pero está disponible en los navegadores Chromium o en los decodificadores. Ya que el
el diseño de cuadrícula de desplazador multimedia solo especifica la dirección y el espaciado; el tamaño se puede
cambio dentro de una consulta de medios que verifica la compatibilidad con la relación de aspecto.
Mejora progresiva en algunos desplazadores de contenido multimedia más dinámicos.
@supports (aspect-ratio: 1) {
.horizontal-media-scroller figure > picture {
inline-size: auto; /* for a block-size driven ratio */
aspect-ratio: 1; /* boxes by default */
@nest section:nth-child(2) & {
aspect-ratio: 16/9;
}
@nest section:nth-child(3) & {
/* double the size of the others */
block-size: calc(var(--size) * 2);
aspect-ratio: 4/3;
/* adjust size to fit more items into the viewport */
@media (width <= 480px) {
block-size: calc(var(--size) * 1.5);
}
}
}
}
Si el navegador admite la sintaxis aspect-ratio, se muestran las fotos de la barra de desplazamiento multimedia.
Se actualizó el tamaño a aspect-ratio. Con la sintaxis de anidamiento del borrador, cada imagen
cambia su relación de aspecto en función de si se trata de la primera, segunda o tercera fila. El
La sintaxis de nest también permite establecer algunas
con la otra lógica de tamaño.
Con ese CSS, a medida que la función está disponible en más motores de navegador, es más fácil administrar, pero se renderizará un diseño más atractivo visualmente.
Prefiere la reducción de datos
Aunque esta técnica solo está disponible
detrás de una marca en
Canary,
Quería compartirte cómo puedo ahorrar una cantidad considerable de tiempo de carga de la página y
el uso de datos con unas pocas líneas de CSS. La búsqueda de medios prefers-reduced-data de
El nivel 5 permite preguntar si el dispositivo está en
estados de datos reducidos, como el modo de Ahorro de datos. Si es así, puedo modificar el
documento y, en este caso, ocultar las imágenes.
figure {
@media (prefers-reduced-data: reduce) {
& {
min-inline-size: var(--size);
& > picture {
display: none;
}
}
}
}
El contenido es navegable, pero no hace que las imágenes pesadas
descargado. Este es el sitio antes de agregar el CSS prefers-reduced-data:
(7 solicitudes, 100 KB de recursos en 131 ms)
Este es el rendimiento del sitio después de agregar el CSS prefers-reduced-data:
(71 solicitudes, 1.2 MB de recursos en 1.07 s)
64 solicitudes menos, que serían alrededor de 60 imágenes dentro del viewport (pruebas realizadas en una pantalla panorámica) de esta pestaña del navegador, el aumento de la carga de la página es de alrededor del 80% y el 10% de los datos por cable. Un CSS bastante potente.
Conclusión
Ahora que sabes cómo lo hice, ¿cómo lo harías? 🙂
Diversifiquemos nuestros enfoques y aprendamos todas las formas de desarrollar en la Web. Crea un CodePen o aloja tu propia demostración, envíame un tweet y la agregaré al Aquí tienes la sección Remixes de la comunidad.
Origen
Remixes de la comunidad
Aún no hay nada para ver aquí.