Descubre algunas formas útiles y creativas de diseñar una lista.
¿Qué te viene a la mente cuando piensas en una lista? El ejemplo más obvio es una lista de compras: la más simple de las listas, una colección de artículos sin un orden en particular. Pero usamos listas de muchas maneras en la Web. ¿Una colección de los próximos conciertos en un lugar? Es muy probable que sea una lista. ¿Un proceso de reserva de varios pasos? Posiblemente una lista. ¿Una galería de imágenes? Incluso eso podría considerarse una lista de imágenes con leyendas.
En este artículo, analizaremos en detalle los diferentes tipos de listas de HTML disponibles en la Web y cuándo usarlos, incluidos algunos atributos que quizás no conozca. También analizaremos algunas formas útiles y creativas de diseñarlas con CSS.
Cuándo usar una lista
Se debe usar un elemento de lista HTML cuando los elementos se deben agrupar de manera semántica. Las tecnologías de accesibilidad (como los lectores de pantalla) notificarán al usuario que hay una lista y la cantidad de elementos. Por ejemplo, si se piensa en una cuadrícula de productos en un sitio de compras, conocer esta información sería muy útil. Por lo tanto, usar un elemento de lista puede ser una buena opción.
Mostrar lista de tipos
En lo que respecta al lenguaje de marcado, podemos elegir entre tres elementos de lista diferentes disponibles:
- Lista sin ordenar
- Lista ordenada
- Lista de descripciones
Elegir una opción depende del caso de uso.
Lista sin ordenar (ul)
El elemento de lista sin ordenar (<ul>) es más útil cuando los elementos de la lista no corresponden a ningún orden en particular. De forma predeterminada, se mostrará como una lista con viñetas. Un ejemplo es una lista de compras, en la que el orden no importa.
Un ejemplo más común en la Web es un menú de navegación. Cuando creas un menú, una práctica recomendada es unir el ul con un elemento nav e identificar el menú con una etiqueta para facilitar las tecnologías de accesibilidad. También debemos identificar la página actual en el menú. Para ello, podemos usar el atributo aria-current:
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
En este artículo sobre la estructura de los menús, se describe una serie de recomendaciones para garantizar que todos los usuarios puedan acceder a nuestros menús de navegación.
Lista ordenada (ol)
Un elemento de lista ordenada (<ol>) es la mejor opción cuando el orden de los elementos es importante, como en un proceso de varios pasos. De forma predeterminada, los elementos de lista están numerados. Un ejemplo podría ser un conjunto de instrucciones, donde los pasos deben completarse en orden.
Los elementos <ol> y <ul> solo pueden contener elementos <li> como elementos secundarios directos.
Lista de descripciones (dl)
Una lista de descripciones contiene términos (elementos <dt>) y descripciones (<dd>). Cada término puede estar acompañado de más de una descripción. Los posibles casos de uso podrían incluir un glosario de términos o quizás el menú de un restaurante. Las listas de descripciones no se muestran con ningún marcador de forma predeterminada, aunque los navegadores tienden a aplicar sangría al elemento <dd>.
En HTML, se permite agrupar términos con sus descripciones correspondientes mediante un <div>. Esto puede ser útil para definir el estilo, como veremos más adelante.
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
Estilo de lista simple
Uno de los usos más sencillos de una lista es dentro de un bloque de texto del cuerpo. Es bastante frecuente que estas listas simples no necesiten un estilo elaborado, pero es posible que queramos personalizar los marcadores de una lista ordenada o desordenada hasta cierto punto, por ejemplo, con un color de marca o usando una imagen personalizada para las viñetas. Podemos hacer mucho con list-style y el seudoelemento ::marker.
::marcador
Además de asignarles estilos básicos a nuestros marcadores de lista, podemos crear viñetas cíclicas. Aquí, usamos tres URLs de imagen diferentes para el valor content del seudoelemento ::marker, lo que se suma a la sensación de escritura a mano de nuestro ejemplo de lista de compras (en lugar de usar solo una imagen para todas):
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
Contadores personalizados
Para algunas listas ordenadas, es posible que desees usar el valor de contador, pero agregar otro valor. Podemos usar el contador de list-item como valor para la propiedad content de nuestro marcador y agregar cualquier otro contenido:
::marker {
content: counter(list-item) '🐈 ';
}
Nuestros contadores automáticamente aumentan en uno, pero podemos permitir que aumenten en un valor diferente si así lo elegimos. Para ello, configura la propiedad counter-increment en el elemento de lista. Por ejemplo, esto aumentará nuestros contadores en tres cada vez:
li {
counter-increment: list-item 3;
}
Hay mucho más en lo que podemos profundizar sobre los contadores. En el artículo Listas, marcadores y contadores de CSS, se explican algunas de las posibilidades con más detalle.
Limitaciones del diseño de marcadores ::
A veces, es posible que queramos tener más control sobre la posición y el estilo de nuestros marcadores. No es posible colocar el marcador con Flexbox o una cuadrícula, por ejemplo, lo que a veces puede ser una desventaja si necesitas otra alineación. ::marker expone una cantidad limitada de propiedades de CSS para aplicar estilos. Si nuestro diseño requiere algo que no sea un estilo básico, sería mejor usar otro seudoelemento.
Cómo aplicar diseño a listas que no parecen listas
En ocasiones, es posible que desees aplicar un estilo a nuestras listas completamente diferente del estilo predeterminado. Esto suele suceder con un menú de navegación, como cuando en general queremos quitar todos los marcadores y es posible que mostremos la lista de forma horizontal usando flexbox. Una práctica común es establecer la propiedad list-style en none. Esto significa que ya no se podrá acceder al seudoelemento del marcador en el DOM.
Marcadores personalizados con ::before.
Aplicar estilo al seudoelemento ::before era una forma común de crear marcadores de lista personalizados antes de que llegara ::marker. Pero incluso ahora, nos puede brindar más flexibilidad, cuando la necesitemos, para un estilo de lista visualmente complejo.
Al igual que ::marker, podemos agregar nuestros propios estilos de viñetas personalizados con el atributo content. A diferencia del uso de ::marker, debemos hacer algunas posiciones manuales, ya que no obtenemos los beneficios automáticos que ofrece list-style-position. Sin embargo, podemos posicionarlo relativamente fácilmente con Flexbox, y ofrece una mayor cantidad de posibilidades de alineación. Por ejemplo, podríamos alternar la posición del marcador:
Si diseñamos una lista ordenada con el elemento ::before, es posible que también desees usar contadores para agregar nuestros marcadores numéricos.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
El uso de ::before en lugar de ::marker nos brinda acceso completo a las propiedades de CSS para ajustes de estilo personalizados y permite animaciones y transiciones, cuya compatibilidad es limitada para ::marker.
Atributos de lista
Los elementos de listas ordenadas aceptan algunos atributos opcionales, que pueden ayudarnos en diversos casos de uso.
Listas invertidas
Si tenemos una lista de los 10 álbumes más populares del año pasado, es posible que deseemos usar una cuenta regresiva del 10 al 1. Podríamos usar contadores personalizados para eso y aumentarlos de forma negativa. O podrías usar el atributo reversed en el HTML. Creo que, por lo general, tiene sentido usar el atributo reversed en lugar de aumentar negativamente el contador en CSS, a menos que los contadores sean meramente presentacionales. Si no se pudo cargar el CSS, igualmente verás los números en la cuenta regresiva correctamente en el código HTML. Además, debemos considerar cómo un lector de pantalla interpretaría la lista.
Haz esta demostración de los 10 mejores álbumes de 2021. Si los contadores aumentaran solo con CSS, alguien que accedió a la página por medio de un lector de pantalla podría llegar a la conclusión de que las cifras aumentaron, por lo que el número 10 en realidad era el primero.
Puedes ver en la demostración que, cuando usas el atributo reversed, nuestros marcadores ya tienen el valor correcto, sin ningún esfuerzo adicional de nuestra parte. Sin embargo, si creamos marcadores de lista personalizados con el seudoelemento ::before, debemos ajustar nuestros contadores. Solo debemos indicarle a nuestro contador de elementos de lista que aumente de forma negativa:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
Esto será suficiente en Firefox, pero en Chrome y Safari, los marcadores mostrarán una cuenta regresiva de cero a -10. Para solucionar este problema, podemos agregar el atributo start a la lista.
Divide las listas
El atributo start nos permite especificar el valor numérico desde el que debe comenzar la lista. Esto puede ser útil en los casos en los que desees dividir una lista en grupos.
Volvamos a nuestro ejemplo de los 10 álbumes principales. Quizás queremos hacer una cuenta regresiva de los 20 álbumes principales, pero en grupos de 10. Entre los dos grupos, hay otro contenido de la página.
Tendremos que crear dos listas separadas en nuestro HTML, pero ¿cómo podemos asegurarnos de que los contadores serán correctos? En la actualidad, el lenguaje de marcado de ambas listas realizará una cuenta regresiva de 10 a 1, que no es lo que deseamos. Sin embargo, en nuestro HTML, podemos especificar un valor de atributo start. Si agregamos un valor start de 20 a nuestra primera lista, los marcadores se actualizarán nuevamente automáticamente.
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Diseño de lista de varias columnas
El diseño de varias columnas a veces puede servir bien para nuestras listas, como puedes ver en las demostraciones anteriores. Al establecer un ancho de columna, podemos asegurarnos de que nuestra lista es responsiva automáticamente, y se coloca sobre dos o más columnas solo cuando hay suficiente espacio. También podemos establecer un espacio entre las columnas y, para un mayor impulso, agregar una column-rule con estilo (con una abreviatura similar a la propiedad border):
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
Con el uso de columnas, a veces podemos terminar con rupturas antiestéticas en nuestros elementos de lista, lo que no siempre es el efecto que deseamos.
Podemos evitar estas pausas forzadas con break-inside: avoid en nuestros elementos de lista:
li {
break-inside: avoid;
}
Propiedades personalizadas
Las propiedades personalizadas de CSS ofrecen una gran variedad de posibilidades para definir el estilo de las listas. Si conocemos el índice del elemento de la lista, podemos usarlo para calcular valores de propiedades. Desafortunadamente, en este momento, no hay una forma de determinar el índice del elemento (de manera que se pueda usar, en cualquier caso) solo en CSS. Los contadores solo nos permiten usar su valor en la propiedad content y no permiten cálculos.
Sin embargo, podemos establecer el índice del elemento dentro del atributo style en nuestro HTML, lo que puede hacer que los cálculos sean más factibles, en especial si usamos un lenguaje de plantillas. En este ejemplo, se muestra cómo estableceremos eso mediante Nunjucks:
<ol style="--length: items|length">
</ol>
Splitting.js es una biblioteca que realiza una función similar en el lado del cliente.
Con el valor de propiedad personalizada, podemos mostrar el progreso en una lista de varias maneras. Una forma podría ser una barra de progreso para una lista de pasos. En este ejemplo, estamos usando un seudoelemento con un gradiente lineal para crear una barra para cada elemento que muestre qué tan lejos está el usuario en la lista.
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
También podríamos ajustar el matiz a medida que avanza la lista, usando la función de color hsl(). Podemos calcular el valor hue con nuestra propiedad personalizada.
Estilo de la lista de descripciones
Como se mencionó antes, podemos unir los términos y sus definiciones dentro de un div en una dl para brindarnos más opciones de estilo. Por ejemplo, es posible que queramos mostrar nuestra lista como una cuadrícula. Si configuras display: grid en la lista sin un wrapper div alrededor de cada grupo, los términos y las descripciones se colocarán en diferentes celdas de cuadrícula. A veces esto resulta útil, como en el siguiente ejemplo, para mostrar un menú de tartas con sus descripciones.
Podemos definir una cuadrícula en la lista y asegurarnos de que los términos y las descripciones siempre se alineen en las columnas, con el ancho de la columna determinado por el plazo más largo.
Por otro lado, si queremos agrupar los términos de forma distintiva con sus descripciones al estilo de tarjeta, es muy útil un wrapper <div>.
Recursos
- Listas Una introducción a las listas y ::marker
- Marcadores personalizados con ::marker
- Listas de CSS con contadores