Tudo o que você precisa saber sobre a lacuna após o marcador de lista

eu estava lendo “Estilo de lista criativa” no blog web.dev do Google e notei algo estranho em um dos exemplos de código no ::marker seção do artigo. Os marcadores de lista integrados são marcadores, números ordinais e letras. O ::marker pseudo-elemento nos permite estilizar esses marcadores ou substituí-los por um personagem ou imagem personalizada.

::marker { content: url('/marker.svg') ' ';
}

O exemplo que chamou minha atenção usa um ícone SVG como um marcador personalizado para os itens da lista. Mas também há um único caractere de espaço (" ") no valor CSS ao lado do url() função. O objetivo deste espaço parece ser inserir um espaço após o marcador personalizado.

Quando vi esse código, imediatamente me perguntei se havia uma maneira melhor de criar a lacuna. Acrescentando um espaço para content parece mais uma solução alternativa do que a solução ideal. CSS fornece margin e padding e outras formas padrão de espaçar elementos na página. Nenhuma dessas propriedades poderia ser usada nessa situação?

Primeiro, tentei substituir o caractere de espaço por uma margem adequada:

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

Isso não funcionou. Acontece que ::marker suporta apenas um pequeno conjunto de propriedades CSS principalmente relacionadas a texto. Por exemplo, você pode alterar o font-size e color do marcador e defina um marcador personalizado definindo content a uma string ou URL, conforme mostrado acima. Mas o margin e padding propriedades são não suportada, portanto, configurá-los não tem efeito. Que decepção.

Será que um caractere de espaço é a única maneira de inserir uma lacuna após um marcador personalizado? Eu precisava descobrir. Ao pesquisar esse tópico, fiz algumas descobertas interessantes que gostaria de compartilhar neste artigo.

Adicionando preenchimento e margens

Primeiro, vamos confirmar o que margin e padding fazer no <ul> e <li> elementos. Eu criei uma página de teste para esta finalidade. Arraste os controles deslizantes relevantes e observe o efeito no espaçamento em cada lado do marcador de lista. Dica: Use o botão Redefinir liberalmente para redefinir todos os controles para seus valores iniciais.

Observação: Os navegadores aplicam um padrão padding-inline-left of 40px para <ol> e <ul> elementos. o lógico padding-inline-left propriedade é equivalente ao físico padding-left propriedade em escrever sistemas com uma direção inline da esquerda para a direita. Neste artigo, vou usar propriedades físicas para simplificar.

Como você pode ver, padding-left on <li> aumenta o intervalo após o marcador de lista. As outras três propriedades controlam o espaçamento à esquerda do marcador, ou seja, o recuo do item da lista.

Observe que mesmo quando o item da lista padding-left is 0px, ainda há um intervalo mínimo após o marcador. Esta diferença não pode ser diminuída com margin or padding. O comprimento exato do intervalo mínimo depende do navegador.

Para resumir, o conteúdo do item da lista é posicionado a uma distância mínima específica do navegador do marcador, e essa lacuna pode ser aumentada adicionando um padding-left para <li>.

A seguir, vamos ver o que acontece quando posicionamos o marcador dentro o item da lista.

Movendo o marcador dentro do item da lista

A list-style-position propriedade aceita duas palavras-chave: outside, que é o padrão, e inside, que move o marcador dentro do item da lista. O último é útil para criar designs com itens de lista de largura total.

Se o marcador estiver agora dentro o item da lista, isso significa que padding-left on <li> não aumenta mais a lacuna após o marcador? Vamos descobrir. Na minha página de teste, ative list-style-position: inside através da caixa de seleção. Como estão os quatro padding e margin propriedades afetadas por esta mudança?

Como você pode ver, padding-left on <li> agora aumenta o espaçamento para o esquerda do marcador. Isso significa que perdemos a capacidade de aumentar a diferença após o marcador. Nesta situação, seria útil poder adicionar margin-right ao ::marker em si, mas isso não funciona, como estabelecemos acima.

Além disso, há um bug no Chromium que faz com que a lacuna após o marcador triplo depois de mudar para inside posicionamento. Por padrão, o comprimento da lacuna é cerca de um terço do tamanho do texto. Então, em um padrão font-size of 16px, a diferença é de cerca 5.5px. Depois de mudar para inside, a lacuna cresce ao máximo 16px no Chrome. Este bug afeta o disc, circle e square marcadores, mas não marcadores de números ordinais.

A imagem a seguir mostra a renderização padrão de marcadores de lista posicionados externamente e internamente em três navegadores principais no macOS. Para sua conveniência, alinhei horizontalmente todos os itens da lista em seus marcadores para facilitar a comparação das diferenças nos tamanhos das lacunas.

Resumindo, mudando para list-style-position: inside apresenta dois problemas. Não podemos mais aumentar a lacuna via padding-left on <li>, e o tamanho da lacuna é inconsistente entre os navegadores.

Finalmente, vamos ver o que acontece quando substituímos o marcador de lista padrão por um marcador personalizado.

Alternando para um marcador personalizado

Existem duas maneiras de definir um marcador personalizado:

• list-style-type e list-style-image Propriedades
• content propriedade no ::marker pseudo-elemento

A content propriedade é mais poderosa. Por exemplo, permite-nos usar o counter() função para acessar o número ordinal do item da lista (o implicitamente list-item contrariar) e decore-o com cordas personalizadas.

Infelizmente, o Safari não suporta o content propriedade em ::marker ainda (Erro do WebKit). Por esse motivo, vou usar o list-style-type propriedade para definir o marcador personalizado. Você ainda pode usar o ::marker seletor para estilizar o marcador personalizado declarado via list-style-type. Esse aspecto de ::marker é suportado no Safari.

Qualquer caractere Unicode pode potencialmente servir como um marcador de lista personalizado, mas apenas um pequeno conjunto de caracteres realmente tem “Bullet” em seu nome oficial, então pensei em compilá-los aqui para referência.

Personagem	Nome	Ponto de código	palavra-chave CSS
.	Bala	U+2022	disc
‣	bala triangular	U+2023
⁃	Hífen Marca	U+2043
⁌	Bala preta para a esquerda	U+204C
⁍	Marca preta para a direita	U+204D
◘	Bala inversa	U+25D8
◦	Bala branca	U+25E6	circle
☙	Bala de coração floral girada invertida	U+2619
❥	Bala de coração negro pesada girada	U+2765
❧	Bala de coração floral girada	U+2767
⦾	Bala Branca Circundada	U+29BE
⦿	Bala Circulada	U+29BF

Observação: O CSS square A palavra-chave não possui um caractere “Bullet” correspondente em Unicode. O personagem que mais se aproxima é o emoji quadrado pequeno preto (▪️) (U+25AA).

Agora vamos ver o que acontece quando substituímos o marcador de lista padrão por list-style-type: "•" (U+2022 Bala). Esse é o mesmo caractere do marcador padrão, portanto, não deve haver grandes diferenças de renderização. Na minha página de teste, ative o list-style-type opção e observe quaisquer alterações no marcador.

Como você pode ver, há duas mudanças significativas:

1. Não há mais um intervalo mínimo após o marcador.
2. A bala ficou menor, como se tivesse sido renderizada em um tamanho menor font-size.

De acordo com o CSS Counter Styles Nível 3, o marcador de lista padrão (disc) deve ser “semelhante a • U+2022 BALA". Parece que os navegadores aumentam o tamanho do marcador padrão para torná-lo mais legível. O Firefox ainda usa uma fonte especial, -moz-bullet-font, para o marcador.

O problema de tamanho pequeno pode ser corrigido com CSS? Na minha página de teste, ative o estilo do marcador e observe o que acontece quando você altera o font-size, line-height e font-family do marcador.

Como você pode ver, aumentar o font-size faz com que o marcador personalizado fique desalinhado verticalmente, e isso não pode ser corrigido diminuindo o line-height. O vertical-align propriedade, que poderia facilmente corrigir esse problema, não é suportada em ::marker.

Mas você notou que mudar o font-family pode fazer com que o marcador fique maior? Tente configurá-lo para Tahoma. Isso poderia ser uma solução alternativa boa o suficiente para o problema de tamanho pequeno, embora eu não tenha testado qual fonte funciona melhor nos principais navegadores e sistemas operacionais.

Você também deve ter notado que o bug do Chromium não ocorre mais quando você posiciona o marcador dentro do item da lista. Isso significa que um marcador personalizado pode servir como uma solução alternativa para esse bug. E isso me leva ao problema principal e ao motivo pelo qual comecei a pesquisar esse tópico. Se você definir um marcador personalizado e posicioná-lo dentro do item da lista, não haverá lacuna após o marcador e nenhuma maneira de inserir uma lacuna por meios padrão.

1. Não há espaço mínimo após os marcadores personalizados.
2. ::marker não suporta padding or margin.
3. padding-left on <li> não aumenta o gap, já que o marcador está posicionado inside.

Resumo

Aqui está um resumo de todos os principais fatos que mencionei no artigo:

1. Os navegadores aplicam um padrão padding-inline-start of 40px para <ul> e <ol> elementos.
2. Há um intervalo mínimo após os marcadores de lista integrados (disc, decimal, etc). Não há intervalo mínimo após marcadores personalizados (string ou URL).
3. O comprimento do intervalo pode ser aumentado adicionando um padding-left para <ul>, mas apenas se o marcador estiver posicionado fora do item da lista (o modo padrão).
4. Os marcadores de string personalizados têm um tamanho padrão menor do que os marcadores integrados. Alterando a font-family on ::marker podem aumentar seu tamanho.

Conclusão

Olhando para o exemplo de código do início do artigo, acho que agora entendo por que há um caractere de espaço no content valor. Simplesmente não há melhor maneira de inserir uma lacuna após o marcador SVG. É uma solução alternativa necessária porque nenhuma quantidade de margin e padding pode criar uma lacuna após um marcador personalizado posicionado dentro do item da lista. A margin-right on ::marker poderia fazê-lo facilmente, mas isso não é suportado.

Até ::marker adiciona suporte para mais propriedades, os desenvolvedores da Web geralmente não terão escolha a não ser ocultar o marcador e emulá-lo com um ::before pseudo-elemento. Eu tive que fazer isso recentemente porque não consegui mudar o marcador background-color. Felizmente, não teremos que esperar muito por um mais poderoso ::marker pseudo-elemento.

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/