Listas

Podcast do CSS - 030: Listas

Imagine que você tem vários itens que planeja comprar na próxima vez que vai ao mercado. Uma maneira comum de representar isso visualmente é uma lista, mas como adicionar estilo à lista de compras?

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

Como criar uma lista

A lista anterior começou com um elemento semântico, ou <ul>, com itens da lista de compras (elementos <li>) como filhos. Se você inspecionar cada elemento <li>, vai notar que todos eles têm display: list-item, e é por isso que o navegador renderiza um ::marker por padrão.

li {
  display: list-item;
}

Há dois outros tipos de listas.

As listas ordenadas podem ser criadas com <ol>. Nesse caso, o item da lista vai exibir um número como ::marker.

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

As listas de descrição são criadas com <dl>. No entanto, esse tipo de lista não usa o elemento de item <li>.

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

Estilos de lista

Agora que você sabe como fazer uma lista, pode definir o estilo. As primeiras propriedades CSS a serem descobertas são aquelas que são aplicadas à lista inteira.

É possível usar três propriedades de estilo de lista para definir o estilo do exemplo: list-style-position, list-style-image e list-style-type.

list-style-position

list-style-position permite mover o marcador para inside ou outside para o conteúdo do item da lista. A outside padrão significa que o marcador não está incluído no conteúdo dos itens da lista, enquanto inside move o primeiro elemento para o conteúdo do item da lista.

list-style-image

A list-style-image permite substituir os marcadores da lista por imagens. Isso permite que você defina uma imagem como url ou none para transformar os marcadores em imagens, svg ou gif. Você também pode usar qualquer tipo de mídia ou até mesmo um URI de dados.

Vejamos como adicionar uma imagem de cada um dos nossos itens de supermercado como list-style-image:

list-style-type

A opção final é definir o estilo da list-style-type, que muda os marcadores para palavras-chave de estilo conhecido, strings personalizadas, emojis e muito mais. Veja todos os tipos de estilo de lista possíveis aqui.

Abreviação de list-style

Agora que você tem todas essas propriedades individuais, é possível usar a abreviação list-style para definir todos os estilos de lista em uma linha:

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

list-style permite declarar combinações de uma, duas ou três propriedades list-style em qualquer ordem. Se list-style-type e list-style-image estiverem definidos, list-style-type será usado como substituto se a imagem não estiver disponível.

/* 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;

Essa é a propriedade mais usada dos estilos de lista abordados nesta seção. Um aplicativo comum é o list-style: none para ocultar os estilos padrão. Os estilos padrão vêm do navegador e muitas vezes você vê folhas de estilo redefinidas removendo estilos de lista, como padding e margens. Também é possível usar essa abreviação para definir estilos, como list-style: square inside;.

Até agora, os exemplos se concentraram em estilizar uma lista inteira e itens de lista, mas e uma abordagem mais granular?

Pseudoelemento ::marker

O elemento de marcador list-item é o marcador, o hífen ou o algarismo romano que ajuda a indicar cada item na sua lista.

Se você inspecionar a lista no DevTools, vai notar um elemento ::marker para cada um dos itens da lista, mesmo sem declarar nenhum em HTML. Se você inspecionar mais o ::marker, vai encontrar o estilo padrão do navegador.

::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;
}

Ao declarar uma lista, cada item recebe um marcador, mesmo que não haja marcadores nem números romanos no HTML. Esse é um pseudoelemento porque o navegador o gera para você e fornece uma API de estilo limitado para ser direcionado a ele. Saiba mais sobre a estrutura dos marcadores do CSS. O ::marker tem suporte limitado no Safari.

Caixa de marcadores

No modelo de layout CSS, os marcadores de itens da lista são representados por uma caixa de marcadores associada a cada item. A caixa do marcador é o recipiente que normalmente contém o marcador ou o número.

Para definir o estilo da caixa do marcador, use o seletor ::marker. Isso permite que você selecione apenas o marcador, em vez de estilizar com base na lista inteira.

Estilos de marcadores

Agora que você escolheu o marcador, vamos conferir as propriedades de estilo disponíveis para ele. Saiba mais sobre Marcadores personalizados com CSS ::marker em web.dev.

Existem algumas propriedades CSS ::marker permitidas:

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

Tipo de exibição

Todas as nossas propriedades list-style e ::marker são conhecidas por estilizar elementos <li> porque têm um valor de exibição padrão de item de lista. Também é possível transformar itens que não são <li> em um item de lista.

Para fazer isso, adicione a propriedade display: list-item. Um exemplo de uso de display: list-item é se você quiser um marcador suspenso em um título, para poder alterá-lo para algo diferente com ::marker. O exemplo a seguir mostra um cabeçalho usando display: list-item para fins de estilo, com uma lista usando a marcação de lista correta.

Embora seja possível transformar qualquer coisa em uma visualização de item de lista com display, não use isso em vez de utilizar a marcação de lista correta, se o conteúdo que você está estilizando for realmente uma lista. Mudar a aparência de um item para um item da lista não muda a forma como os serviços de acessibilidade leem e reconhecem o item. Portanto, ele não será lido como um item da lista para leitores de tela ou dispositivos de alternância. Use a marcação semântica e crie listas com <li> sempre que possível.

Teste seu conhecimento

Teste seus conhecimentos sobre listas

Recursos

• Guia da MDN sobre como definir o estilo de listas
• Marcadores personalizados com CSS ::marker
• Smashing Magazine: listas, marcadores e contadores CSS (em inglês)
• MDN usando contadores CSS
• Módulo de listas e contadores CSS nível 3
• Dicas de CSS: como contar com contadores e grade CSS