Recetas de estilo de lista

¡Las listas son una parte fundamental de HTML! Son útiles en cosas como publicaciones de blogs para enumerar pasos, recetas para enumerar ingredientes o elementos en un menú de navegación. No sólo son una oportunidad para el estilo, sino que también tienen implicaciones de accesibilidad. Por ejemplo, la cantidad de elementos de una lista se anuncia en un lector de pantalla para darle algo de contexto a la lista.

Centrémonos en diseñar listas aquí, en su mayoría listas ordenadas y desordenadas (con disculpas por desairar a nuestro amigo con la lista de definiciones), y situaciones de estilo algo inusuales.

Los basicos

Antes de hacer algo demasiado cómodo, sepa que existen bastantes configuraciones que list-style-typepodrían cubrir sus necesidades desde el principio.

La ruptura en el medio

Las listas ordenadas pueden starttener el número que desees.

Los decimales anidados

La lista invertida de los 10 mejores

Un solo reversedatributo bastará.

Viñetas de imagen

La mejor opción es utilizar background-imageun pseudoelemento. Uno pensaría list-style-imageque sería el camino a seguir, pero es extremadamente limitado. Por ejemplo, no puedes posicionarlo ni cambiar su tamaño.

Balas Emoji

Orden “aleatoria” cuidadosamente seleccionada

El valueatributo establecerá un elemento de la lista para usar el marcador relevante para esa posición.

Contadores de texto personalizados

Se puede hacer con pseudoelementos para obtener el mayor control, pero también existelist-style-type: '-';

Interior versus exterior

Las cosas se alinean mejor con list-style-position: outside;(el valor predeterminado), pero los marcadores de la lista se muestran fuera del cuadro, por lo que debe tener cuidado de no cortarlos. Podrían colgarse del borde de la ventana del navegador o overflow: hidden;ocultarse por completo. Los dos últimos ejemplos aquí tienen un truco para imitar la mejor alineación mientras se renderiza dentro del elemento.

balas de colores

Tres formas aquí:

1. ::marker(más nuevo y más fácil)
2. Estilo clásico de pseudoelemento
3. background-image(Ésta es una URL de datos SVG para que puedas manipular el color desde el CSS)

lista columnada

El número de columnas puede ser automático.

Numeros de circulos de colores

Símbolos de lista de ciclismo personalizados

Se pueden hacer piezas únicas list-style: symbols()y se pueden hacer juegos reutilizables y @counter-styleluego usarlos. Tenga en cuenta que esto solo es compatible con Firefox en el momento de escribir este artículo.