Contraconjunto - Trucos CSS

Tabla de contenido:

Anonim

La counter-setpropiedad CSS, fiel a su nombre, establece el valor inicial para un contador CSS. ¿Sabes cómo las listas ordenadas comienzan en 1 y luego aumentan desde allí? La counter-setpropiedad nos permite establecer ese valor inicial en otra cosa, digamos, -1. O 2. ¡O 200! Excepto que se aplica a contadores CSS en lugar de listas ordenadas.

Entonces, digamos que tenemos un contador personalizado para una lista de capítulos de libros, donde el número de capítulo se antepone al nombre del capítulo.

Comenzaríamos por definir un contador con la counter-resetpropiedad. Lo llamaremos chaptery definirlo en una clase de contenedor primario para nuestros capítulos llamados, de manera creativa, .chapters.

.chapters ( counter-reset: chapter; )

A continuación, asignaríamos el chaptercontador a un elemento usando la counter-incrementpropiedad. Dado que estos son capítulos de libros, los aplicaremos a

elementos, asumiendo que el título del libro sería el

. Tenga en cuenta que en realidad lo estamos asignando al :beforepseudo-elemento, ya que nos permite anteponer nuestro contador al actual

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

Genial, lo último que necesitaríamos es decirle al mostrador lo que debe mostrar. Eso se hace en la contentpropiedad a través de la counter()función. También echaremos un poco de color en el mostrador, ya que el diseño lo requiere.

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

¡Oye, nos vemos bien!

¡Pero espera! Realmente no estoy cavando el hecho de que estamos comenzando con el Capítulo 1. Quiero decir, el "Adelante" no es realmente un capítulo. En todo caso, es como el Capítulo 0.

¡Ahí es donde counter-setentra en juego! Pongamos las cosas para comenzar en cero:

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

¡Aquí vamos! Eso es mejor. Simplemente estableciendo el valor de la propiedad en el nombre del contador, hemos configurado la lista de capítulos para que comience en el Capítulo 0. Podríamos haberlo establecido con la misma facilidad para comenzar en otra cosa, como el capítulo 100.

¿Y si un navegador no es compatible counter-set? Nada en realidad. Es simplemente se ignora y la lista se iniciará en su defecto, 1.

Sintaxis

( ? )+ | none

Esta es básicamente una forma elegante de decir que la propiedad toma el nombre de un contador personalizado ( ) y el valor inicial ( ). O se establece en noney la numeración se iniciará en el punto de partida predeterminada, 1.

  • Valor inicial: none
  • Se aplica a: todos los elementos (incluidos los no visuales)
  • Heredado: no
  • Tipo de animación: 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;

Tenga en cuenta que counter-setcreará un nuevo contador si el nombre del contador declarado en él aún no se ha definido en otro lugar.

Soporte de navegador

ES DECIR Borde Firefox Cromo Safari Ópera
No No 68+ No No No
Android Chrome Android Firefox Navegador de Android Safari de iOS mini Opera
No 79+ No No No
Fuente: caniuse

Otras lecturas

  • Especificación de nivel 3 del módulo de listas CSS (borrador de trabajo)
  • Visualización del paso actual con contadores CSS
  • Contar con contadores CSS y cuadrícula
  • Cómo invertir los contadores personalizados de CSS