Listas

The CSS Podcast - 030: Listas (link em inglês)

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 um estilo à sua 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çava 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 mostrar 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 da lista <li>.

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

Estilos de lista

Compatibilidade com navegadores

  • 1
  • 12
  • 1
  • 1

Origem

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

Há três propriedades de estilo de lista que podem ser usadas 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 com o conteúdo do item da lista. O 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 entre o conteúdo do item da lista.

Uma lista com marcador externo e ::marcador que mostra que fora (valor padrão) não está no item da lista e está dentro da caixa de 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 tornar os marcadores uma imagem, svg ou gif uniforme. Também é possível usar qualquer tipo de mídia ou até mesmo um URI de dados.

Vamos ver 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 conhecidas, strings personalizadas, emojis e muito mais. Confira todos os tipos de estilo de lista possíveis.

Abreviatura de list-style

Agora que você tem todas essas propriedades individuais, use 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 das 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 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 número romano que ajuda a indicar cada item na sua lista.

Uma lista com três itens que mostra que cada um dos marcadores são pseudoelementos ::marker.

Se você inspecionar a lista no DevTools, verá um elemento ::marker para cada um dos itens da lista, mesmo que não tenha declarado 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;
}

Quando você declara uma lista, cada item recebe um marcador, apesar de não haver marcadores nem números romanos no HTML. Esse é um pseudoelemento porque o navegador o gera para você e fornece uma API de estilo limitada para direcioná-lo. Saiba mais sobre a estrutura do marcador do CSS. O ::marker tem suporte limitado no Safari.

Caixa do marcador

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

Para estilizar a caixa de marcadores, use o seletor ::marker. Isso permite selecionar apenas o marcador, em vez de estilizar com base na lista inteira.

Estilos de marcadores

Agora que você selecionou o marcador, vamos analisar as propriedades de estilo disponíveis. 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 sabem estilizar elementos <li> porque têm um valor de exibição padrão de item de lista. Você também pode 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, isso não deve ser usado 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 de 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 de lista para leitores de tela ou dispositivos de troca. Use a marcação semântica e crie listas com <li> sempre que possível.

Teste seu conhecimento

Teste seus conhecimentos sobre listas

O elemento que antecede um item de lista é chamado

::bullet
Tente de novo.
::pencil
Tente de novo.
::marker
Correto!
::counter
Tente de novo.

Os três tipos de listas HTML são

<dl>
Correto!
<lo>
Tente de novo.
<ol>
Correto!
<li>
Tente de novo.
<ul>
Correto!
<list>
Tente de novo.

Quais estilos nesta lista vão aplicar estilos a uma ::marker?

transition
Correto!
background-color
Tente de novo.
color
Correto!
display
Tente de novo.

Recursos