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
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.
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.
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
::pencil
::marker
::counter
Os três tipos de listas HTML são
<dl>
<lo>
<ol>
<li>
<ul>
<list>
Quais estilos nesta lista vão aplicar estilos a uma ::marker
?
transition
background-color
color
display