Ir directamente al contenido de esta página

codexexempla.org

Anexo: Contadores: notas y ejemplos

Las imágenes ilustrativas con capturas de los ejemplos tal y como los presenta Firefox 2; haciendo clic sobre ellas se puede acceder al documento de prueba. El soporte de contenidos generados por medio de CSS varía en diversos navegadores. Sólo puedo asegurar —sobre mis propias pruebas— que los ejemplo se interpretan correctamente en Firefox 2, Opera 9 y la beta de Safari 3, sobre Windows. Ni Explorer 6 ni 7 soportan los contadores.

Contadores para elementos no anidados

Los contadores se emplean para generar una numeración automática similar a la que por defecto se muestra en las listas numeradas, pero pudiendo aplicarse a cualquier elemento. Unas reglas como las siguientes:


    body{
        counter-reset:seccion;
    }
    
    h1:before{
        counter-increment:seccion;
        content:counter(seccion)". ";
    }
        

numerarían los h1 de un documento del 1 en adelante, como se puede comprobar en este ejemplo o ver en la imagen siguiente:

Encabezados de un documento numerados

Analizemos por partes las reglas:

Hasta aquí, parece bastante claro, pero vamos a incluir varios contadores. El objetivo va a ser que los h1 se numeren como 1, 2, 3, etc., y que los h2 se numeren con un contador adicional, 1.1, 1.2, 2.1, etc.

Como no se trata más que de incluir un segundo contador, el error común es crear un estilo como el siguiente


    body{
        counter-reset:seccion;
        counter-reset:subseccion;
    }
    
    h1:before{
        counter-increment:seccion;
        content:counter(seccion)". ";
    }
    
    h2:before{
        counter-increment:subseccion;
        content:counter(seccion)"."counter(subseccion)". ";
    }
        

que tiene este resultado:

Encabezados de un documento numerados con dos contadores, sin restablecer estos inicialmente

¿A qué se debe? A la primera regla. Como se aplica la cascada, y la declaración counter-reset:subseccion es posterior a counter-reset:seccion, anula ésta. La forma correcta de restablecer ambos valores es hacerlo en la misma declaración:


    body{
        counter-reset:seccion subseccion;
    }
        

Ahora sí, los contadores se incrementan correctamente:

Encabezados de un documento numerados con dos contadores

Por último, quedaría la opción de seleccionar un estilo diferente. Para ello se emplean los mismo valores que para la propiedad list-style-type, especificada así:


    h2:before{
        counter-increment:subseccion;
        content:counter(seccion)"."counter(subseccion,lower-alpha)". ";
    }        
        

En este caso, sustituiríamos los decimales de la numeración del segundo contador por letras:

Encabezados de un documento numerados con dos contadores y estilo de lista lower-alpha

Pasemos ahora a los contadores y cómo se comportan en elementos anidados.

Contadores para elementos anidados

Como ejemplo vamos a emplear los contadores para numerar una lista. Vamos a aplicar las siguientes reglas:


    ol{
        counter-reset:listado;
    }
    
    ol ol {
        counter-reset:listado_anidado;
    }
    
    li{
        list-style:none;
    }
    
    li:before{
        content:counter(listado)". ";
        counter-increment:listado;
    }
    
    li li:before{
        content:counter(listado)"."counter(listado_anidado)". ";
        counter-increment:listado_anidado;
    }        
        

El aspecto que presenta nuestra lista es el siguiente:

Lista numerada con un nivel anidado

Sin embargo, ¿qué ocurriría si añadiésemos un nivel adicional de anidamiento? Pues que para el tercer nivel se generaría el mismo contenido que para el segundo, dado que no hemos definido un contador para ese nivel:

Lista numerada con dos niveles anidados y sin contador adicional

Podríamos añadir más reglas a la hoja de estilo para cubrir el total de niveles anidados, pero sería un sistema muy poco eficiente, más aún si desconocemos el número de niveles máximos que vamos a necesitar para nuestros documentos. Por ello existe counters():


    ol{
        counter-reset:listado;
    }
    
    li{
        list-style:none;
    }
    
    li:before{
        content:counters(listado,".")". ";
        counter-increment:listado;
    }
        

Lo que hace es crear un marcador con tantos contadores como sea necesario para cubrir todos los niveles de anidamiento, concatenados por medio de la cadena que se incluye como segundo parámetro:

Lista numerada con por medio de counters()

Por último, igual que para counter(), se puede definir el estilo del contador. Por ejemplo, la declaración content:counters(listado,".",upper-roman)". " sustituye los decimales por números romanos:

Lista numerada con por medio de counters(), con un estilo de lista aplicado

Sin embargo, en la sección de contenido generado de la especificación de CSS 2.1 (inglés) no hay sintaxis para definir estilos independientes de los componentes del marcador que genera counters(), aunque no parece que hubiese sido muy difícil permitir como tercer parámetro una lista de estilos para sucesivos niveles separados por espacios, algo como counters(listado,".",upper-roman lower-roman lower-alpha).

Y hasta aquí, esta pequeña introducción a los contadores.

Volver al curso

(cc) CodexExempla.org, 2007–2021 Mapa del sitio | XHTML | CSS | AA