Listas

El podcast de CSS: 030: Listas

Imagina que tienes un montón de artículos que planeas comprar la próxima vez que vayas al supermercado. Una forma común de representar esto visualmente es mediante una lista, pero ¿cómo puedes agregarle estilo a tu lista de compras?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

Cómo crear una lista

La lista anterior comenzó con un elemento semántico, o <ul>, con elementos de la lista de compras (elementos <li>) como elementos secundarios. Si inspeccionas cada elemento <li>, podrás ver que todos tienen display: list-item, por lo que el navegador renderiza ::marker de forma predeterminada.

li {
  display: list-item;
}

Existen otros dos tipos de listas.

Se pueden crear listas ordenadas con <ol>, en cuyo caso el elemento de la lista mostrará un número como ::marker.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

Además, las listas de descripciones se crean con <dl>; sin embargo, este tipo de lista no usa el elemento de elemento de lista <li>.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

Estilos de lista

Navegadores compatibles

  • 1
  • 12
  • 1
  • 1

Origen

Ahora que sabes cómo crear una lista, puedes definir el estilo. Las primeras propiedades de CSS que se descubrirán son aquellas que se aplican a toda la lista.

Hay tres propiedades de estilo de lista que puedes usar para definir el diseño de tu ejemplo: list-style-position, list-style-image y list-style-type.

list-style-position

list-style-position te permite mover tu viñeta a inside o outside para el contenido del elemento de la lista. El valor predeterminado outside significa que la viñeta no se incluye en el contenido de los elementos de la lista, mientras que inside mueve el primer elemento entre el contenido del elemento de lista.

Una lista con ::marker externo y dentro que muestra que el exterior (valor predeterminado) no está en el elemento de la lista y dentro del cuadro de contenido del elemento de la lista.

list-style-image

list-style-image te permite reemplazar las viñetas de tu lista por imágenes. Esto te permite configurar una imagen, como url o none, para que tus viñetas sean imágenes, SVG o GIFs. También puedes usar cualquier tipo de medio o incluso un URI de datos.

Veamos cómo podemos agregar una imagen de cada uno de nuestros artículos de supermercado como el list-style-image:

list-style-type

La última opción es aplicar un estilo a list-style-type, que cambia las viñetas a palabras clave de estilo conocidas, cadenas personalizadas, emojis y mucho más. Puedes ver todos los tipos de diseños de lista posibles aquí.

abreviatura de list-style

Ahora que tienes todas estas propiedades individuales, puedes usar la abreviatura list-style para configurar todos nuestros estilos de lista en una línea:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style te permite declarar combinaciones de una, dos o tres de las propiedades de list-style en cualquier orden. Si se configuran list-style-type y list-style-image, se usa list-style-type como resguardo en caso de que la imagen no esté disponible.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Esta es la propiedad más usada de los estilos de lista que se tratan en esta sección. Una aplicación común es list-style: none para ocultar los estilos predeterminados. Los estilos predeterminados provienen del navegador y, con frecuencia, verás que restableces las hojas de estilo para quitar los estilos de lista, como el relleno y los márgenes. También puedes usar esta abreviatura para establecer estilos, como list-style: square inside;.

Hasta ahora, los ejemplos se centraron en darle estilo a toda una lista y a sus elementos, pero ¿qué sucede con un enfoque más detallado?

Pseudoelemento ::marker

El elemento de marcador list-item es la viñeta, el guion o el número romano que ayuda a indicar cada elemento de tu lista.

Una lista con tres elementos que muestra que cada una de las viñetas son seudoelementos ::marker.

Si inspeccionas la lista en las Herramientas para desarrolladores, puedes ver un elemento ::marker para cada uno de los elementos de la lista, a pesar de no declarar ninguno en HTML. Si inspeccionas más el ::marker, verás el estilo predeterminado del navegador para ese elemento.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

Cuando declaras una lista, cada elemento recibe un marcador, aunque no haya viñetas ni números romanos en tu código HTML. Este es un seudoelemento porque el navegador lo genera por ti y proporciona una API de estilo limitado para él. Obtén más información sobre la anatomía de la viñeta de CSS. ::marker tiene compatibilidad limitada en Safari.

Cuadro de marcadores

En el modelo de diseño CSS, los marcadores de elementos de lista se representan mediante un cuadro de marcadores asociado con cada elemento. El cuadro de marcadores es el contenedor que suele contener la viñeta o el número.

Para aplicar diseño al cuadro del marcador, puedes usar el selector ::marker. Esto te permite seleccionar solo el marcador, en lugar de aplicar ajustes de diseño a la lista completa.

Estilos de marcador

Ahora que ya seleccionaste el marcador, veamos las propiedades de diseño disponibles para este selector. Puedes obtener más información sobre las viñetas personalizadas con CSS ::marker en web.dev.

Hay varias propiedades ::marker de CSS permitidas:

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

Tipo de visualización

Todas nuestras propiedades list-style y ::marker saben que deben aplicar diseño a los elementos <li> porque tienen un valor de visualización predeterminado de list-item. También puedes convertir elementos que no sean <li> en un elemento de lista.

Para ello, agrega la propiedad display: list-item. Un ejemplo del uso de display: list-item es si deseas una viñeta pendiente en un encabezado, de modo que puedas cambiarlo a otra cosa con ::marker. En el siguiente ejemplo, se muestra un encabezado que usa display: list-item para darle estilo, con una lista que usa el lenguaje de marcado de lista correcto.

Si bien puedes convertir cualquier elemento en una vista de elementos de lista con display, no debes usar esta opción en lugar de usar el lenguaje de marcado de lista correcto si el contenido al que le aplicas estilo es realmente una lista. Cambiar la apariencia visual de un elemento a un elemento de la lista no cambia la forma en que los servicios de accesibilidad leen y reconocen el elemento, por lo que no se leerá como un elemento de la lista para los lectores de pantalla ni los dispositivos conmutadores. Siempre debes usar lenguaje de marcado semántico y crear listas con <li> siempre que sea posible.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre listas

El elemento que precede a un elemento de lista se denomina

::bullet
Vuelve a intentarlo.
::pencil
Vuelve a intentarlo.
::marker
Correcto.
::counter
Vuelve a intentarlo.

Los tres tipos de listas HTML son

<dl>
Correcto.
<lo>
Vuelve a intentarlo.
<ol>
Correcto.
<li>
Vuelve a intentarlo.
<ul>
Correcto.
<list>
Vuelve a intentarlo.

¿Cuáles son los dos estilos de esta lista que se aplicarán a una ::marker?

transition
Correcto.
background-color
Vuelve a intentarlo.
color
Correcto.
display
Vuelve a intentarlo.

Recursos