CSS permite cambiar los símbolos de los contadores. También se puede controlar la distribución de los símbolos, añadir prefijos y sufijos, definir un rango de valores determinado, indicar símbolos adicionales o especificar símbolos para valores negativos. Para ello se usa una regla arroba: @counter-style
.
Esta funcionalidad de CSS permite añadir un alto grado de personalización de los contadores. De esta manera, podremos adaptar los estilos de las listas ordenadas sin tener que usar los símbolos y estilos que vienen predefinidos.
Dentro de esta regla arroba podemos usar una serie de descriptores que permiten definir los contadores personalizados con bastante detalle. En realidad funcionan como si se tratase de propiedades. Son los siguientes:
Descriptor | Descripción |
---|---|
system | Indica el sistema o algoritmo de conversión. |
symbols | Especifica los símbolos deseados. |
additive-symbols | Especifica los símbolos acumulativos. |
suffix | Especifica un sufijo (aparece al final). |
prefix | Especifica un prefijo (aparece al principio). |
negative | Indica símbolos para valores negativos. |
range | Define un rango limitado de valores. |
pad | Indica una longitud y un valor de relleno. |
fallback | Especifica un valor alternativo. |
speak-as | Define la lectura del contador. |
Vamos a verlos con detalle:
Sistema de conversión
El descriptor system
permite indicar el sistema a usar en la conversión del contador. Como valor admite una palabra clave que indica el algoritmo.
Sistemas | Descripción |
---|---|
cyclic | Recorre la lista de símbolos y cuando finalice volverá a empezar. |
numeric | Interpreta los símbolos del contador como dígitos en un sistema de notación posicional. Empieza con el número 0. Requiere dos símbolos en symbols . |
alphabetic | Interpreta los símbolos especificados como dígitos en un sistema alfabético. Empieza con la «a». En la segunda vuelta, empieza con «aa», «ab», etc. Requiere dos símbolos en symbols . |
symbolic | Recorre los símbolos disponibles en symbols . Luego los acumula. Si son «A» y «B», el tercero será «AA», el cuarto «AB», el quinto «AAA»… Requiere un símbolo en symbols . |
additive | Utiliza un patrón de símbolos asociados que son acumulables. Este sería el caso para los números romanos. Requiere el uso del descriptor additive-symbols , con al menos una tupla aditiva. |
fixed | Define un conjunto finito de símbolos. Cuando se termina una iteración, se usará los estilos alternativos definidos en el descriptor fallback . |
extends | Extiende el sistema indicado. |
Hay tres formas de uso y son las siguientes:
Para los sistemas cyclic
, numeric
, alphabetic
, symbolic
y additive
, se usa únicamente la palabra clave como valor. Así: system: numeric
.
En el caso de fixed
, se puede usar como única palabra clave o junto a un número entero que define un conjunto finito de símbolos, iterando una sola vez la lista de símbolos que se haya proporcionado. Por ejemplo: system: fixed 3
.
En cambio extends
se debe acompañar con el nombre del tipo de lista que se esté usando. Si es numérico se usará system: extends decimal
, si es alfabético podemos usar system: extends lower-latin
, etc.
Vamos a crear una lista usando cyclic
para alternar dos símbolos.
@counter-style haz-ciclo {
suffix: ' ';
symbols: '<' '>';
system: cyclic;
}
.alterna {
list-style: haz-ciclo;
}
.alterna li::marker {
color: red;
}
- HTML
- CSS
- JS
- Python
Símbolos personalizados
Tal y como se ha podido observar en el ejemplo anterior, para indicar los símbolos personalizados que queramos usar en los contadores se debe usar el descriptor symbols
. Los símbolos se separan con un espacio y pueden ser cadenas de texto de varios caracteres. También se puede usar imágenes con la función url()
, aunque no todos los navegadores web las soportan.
En el siguiente ejemplo usamos letras envueltas en círculos. Para simplificar, desde la A a la D. En este caso se usa el sistema alphabetic
.
@counter-style circular {
symbols: 'Ⓐ' 'Ⓑ' 'Ⓒ' 'Ⓓ';
system: alphabetic;
}
.envuelve {
list-style: circular;
}
.envuelve li::marker {
color: red;
}
- HTML
- CSS
- JS
- Python
Símbolos acumulativos
Para crear asociaciones de símbolos acumulativos, como sería el caso de los números romanos o las seis caras de un dado, se usa el descriptor additive-symbols
junto con el sistema additive
.
Como valor, se debe indicar tuplas aditivas, que son parejas de valores. Estas tuplas constan de dos partes: un peso entero no negativo y un símbolo de contador, y se separan con una coma. Deben aparecer en orden descendente según el peso indicado, es decir, de más peso a menos peso.
Vamos a crear un ejemplo para definir los números romanos. El símbolo «I» equivale al número 1 y se puede acumular hasta el 3. Para hacer el 5 y el 10 se usa los símbolos «V» y «X». Por tanto, tendremos que indicar que el cuatro y el nueve son «IV» y «IX». Haremos los números que van del 1 («I») al 1000 («M»).
Por ejemplo:
@counter-style numeros-romanos {
additive-symbols:
1000 "M", 900 "CM",
500 "D", 400 "CD",
100 "C", 90 "XC",
50 "L", 40 "XL",
10 "X", 9 "IX",
5 "V", 4 "IV",
1 "I";
system: additive;
}
.romanizacion {
list-style: numeros-romanos;
}
.romanizacion li::marker {
color: red;
}
- HTML
- CSS
- JS
- Python
Sufijo
Para introducir un sufijo al contador se usa el descriptor suffix
. El valor será una cadena de caracteres, por lo que puede ir entre comillas, y aparecerá al final del contador. El valor por defecto es un punto (.
).
Un ejemplo bastante habitual es el uso del cierre del paréntesis ()
) en listas enumeradas con el alfabeto en minúsculas. Así:
@counter-style con-sufijo {
suffix: ") ";
symbols: a b c d;
system: alphabetic;
}
.sufijo {
list-style: con-sufijo;
}
.sufijo li::marker {
color: red;
}
- HTML
- CSS
- JS
- Python
Prefijo
También se puede especificar un prefijo, que aparecerá justo antes del contador. Para ello se usa el descriptor prefix
. Al igual que en el caso del sufijo, su valor es una cadena de caracteres, pero no tiene valor por defecto.
Vamos a ver un ejemplo bastante ilustrativo:
@counter-style puntos {
prefix: "• ";
system: extends decimal;
}
.prefijo {
list-style: puntos;
}
.prefijo li::marker {
color: red;
}
- HTML
- CSS
- JS
- Python
Valores negativos
El descriptor negative
permite definir la forma de representar valores negativos de un contador, y admite dos parámetros que son dos cadenas de texto que se agregarán antes y después del contador. Es similar a indicar un prefijo y un sufijo, pero solo se muestra en valores negativos. Por defecto: -
.
@counter-style neg {
negative: "[-" "]";
system: extends decimal;
}
.negativo {
list-style: neg;
}
.negativo li::marker {
color: red;
}
- HTML
- CSS
- JS
- Python
Rango de valores
Para especificar rangos de valores en los contadores se usa el descriptor range
. De esta manera, el contador solo usará los valores que estén dentro del rango establecido. Si el valor del contador queda fuera del rango indicado, se usará el estilo alternativo (fallback) para la representación de ese marcador.
El valor por defecto es auto
, con el que se establecerá un rango dependiendo del valor del descriptor system
. Rango según los sistemas posibles:
Sistema | Desde | Hasta |
---|---|---|
cyclic | -∞ | ∞ |
numeric | -∞ | ∞ |
fixed | -∞ | ∞ |
alphabetic | 1 | ∞ |
symbolic | 1 | ∞ |
additive | 0 | ∞ |
extends | Se adapta. | Se adapta. |
Este descriptor admite dos valores separados con un espacio. Puede ser un valor numérico o la palabra clave infinite
, referente al infinito.
Algunos ejemplos:
/* De 3 a 6 */
@counter-style rango {
range: 3 6;
}
/* De -infintio a infinito */
@counter-style rango {
range: infinite infinite;
}
/* De -100 a infinito */
@counter-style rango {
range: -100 infinite;
}
Rellenar con ceros
El descriptor pad
es muy interesante ya que permite rellenar con ceros u otros caracteres el sistema de numeración que estemos usando. Por ejemplo, puede usarse para que el mostrador muestre los valores «001», «002», «003» y «004», en vez de mostrar simplemente los números «1», «2», «3» y «4».
Este descriptor admite dos parámetros: el primero es el número de dígitos que debe tener el número del contador, y el segundo es el valor de relleno que se usará para cubrir el número de dígitos indicado en el primer parámetro.
@counter-style relleno {
pad: 2 "0";
system: extends decimal;
}
.relleno {
list-style: relleno;
}
.relleno li::marker {
color: red;
}
- HTML
- CSS
- JS
- Python
Valores alternativos
El descriptor fallback
permite indicar el nombre del tipo de lista a usar como valor alternativo. Se utilizará como recurso de respaldo en aquellos casos en los que el contador personalizado no pueda crear una representación de marcador.
Es útil usarlo cuando hay que representar valores que quedan fuera del rango, y cuando se usa el sistema fixed
y no hay suficientes símbolos para representar valores en todos los elementos. Su valor por defecto es decimal
.
Accesibilidad
El descriptor speak-as
permite indicar el modo de lectura (audio) de un contador por parte de los sintetizadores de voz. Se indica la representación del símbolo del contador de forma hablada. Por ejemplo, que un contador sea pronunciado como un valor numérico. Por tanto, mejora la accesibilidad.
Como valor admite una serie de palabras clave. Son las siguientes:
Valor | Descripción |
---|---|
auto | Valor automático y por defecto. |
bullets | Lee los contadores como si fuera una lista no ordenada. |
numbers | Lee los contadores como si fuera una lista numérica. |
words | Lee los contadores por su valor textual. |
spell-out | Lee los contadores, letra por letra. |
Tipo de lista | Lee los contadores según el tipo de lista indicado. |