Contra-jogo - CSS-Tricks

Índice:

Anonim

A counter-setpropriedade CSS, fiel ao seu nome, define o valor inicial de um contador CSS. Você sabe como as listas ordenadas começam em 1 e aumentam a partir daí? A counter-setpropriedade nos permite definir esse valor inicial para outra coisa, digamos, -1. Ou 2. Ou 200! Exceto que é aplicado a contadores CSS em vez de listas ordenadas.

Então, digamos que temos um contador personalizado para uma lista de capítulos de livros, onde o número do capítulo é adicionado ao nome do capítulo.

Começaríamos definindo um contador com a counter-resetpropriedade. Vamos chamá-lo chaptere defini-lo em uma classe de contêiner pai para nossos capítulos chamada, criativamente .chapters,.

.chapters ( counter-reset: chapter; )

Em seguida, atribuiríamos o chaptercontador a um elemento usando a counter-incrementpropriedade. Uma vez que esses são capítulos de livros, vamos aplicá-los a

elementos, presumindo que o título do livro seria o

. Observe que, na verdade, estamos atribuindo-o ao :beforepseudo-elemento, uma vez que nos permite anexar nosso contador ao real

elemento. 
h2:before ( counter-increment: chapter; )

Legal, a última coisa que precisamos é dizer ao contador o que ele deve mostrar. Isso é feito na contentpropriedade por meio da counter()função. Vamos jogar um pouco de cor no balcão também, já que o design pede.

h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )

Ei, estamos bem!

Mas espere! Não estou realmente cavando o fato de que estamos começando no Capítulo 1. Quer dizer, o “Avançar” não é realmente um capítulo. Na verdade, é como o Capítulo 0.

É aí que counter-setentra! Vamos definir as coisas para começar do zero:

h2:first-of-type::before ( counter-set: chapter; )

Aqui vamos nós! Isso é melhor. Apenas definindo o valor da propriedade para o nome do contador, definimos a lista de capítulos para começar no Capítulo 0. Poderíamos ter definido com a mesma facilidade para começar em outra coisa, como o capítulo 100.

E se um navegador não for compatível counter-set? Nada realmente. Ele será simplesmente ignorado e a lista começará em seu padrão 1,.

Sintaxe

( ? )+ | none

Esta é basicamente uma maneira elegante de dizer que a propriedade recebe o nome de um contador personalizado ( ) e o valor inicial ( ). Ou defina-o como nonee a numeração começará no ponto inicial padrão 1,.

  • Valor inicial: none
  • Aplica-se a: todos os elementos (incluindo os não visuais)
  • Herdado: não
  • Tipo de animação: por tipo de valor calculado

Valores

/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;

Observe que counter-setcriará um novo contador se o nome do contador declarado nele ainda não tiver sido definido em outro lugar.

Suporte de navegador

IE Beira Raposa de fogo cromada Safári Ópera
Não Não 68+ Não Não Não
Android Chrome Android Firefox Navegador Android iOS Safari Opera Mini
Não 79+ Não Não Não
Fonte: caniuse

Leitura adicional

  • Especificação de nível 3 de listas CSS (rascunho)
  • Exibindo a etapa atual com contadores CSS
  • Contando com contadores CSS e grade
  • Como reverter contadores CSS personalizados