CSS avanzado: las propiedades counter-reset y counter-increment

Resumen: Estas propiedades son de las de mayor complejidad en CSS, pero que pueden resultar muy útiles para algunos tipos de trabajos, sobre todo en maquetación de textos.

La propiedad “counter-reset” que fue introducida en el estándar CSS 2.1, si bien puede decirse que tiene un principio de funcionamiento sencillo, dado que se trata de una herramienta de gran flexibilidad y que puede utilizarse en combinación con varias propiedades CSS, su funcionamiento puede resultar un poco complejo y es esta la razón por la cual hemos considerado que se debía incluir bajo el título de “CSS avanzado”.

En forma sencilla, podría decirse que indica el nombre de uno o varios contadores y el valor en el que se inicia cada uno de ellos. Se le utiliza siempre en combinación con la propiedad “counter-increment”, que es la propiedad que controla el incremento que se producirá en el contador.

Ambas propiedades son aplicables a todo tipo de elementos que pueden introducirse en un documento HTML.

Sintaxis

En primer lugar, trataremos la sintaxis de cada una de las propiedades por separado, para luego ver algunos ejemplos de cómo utilizar ambas propiedades en conjunto. El tipo de sintaxis es similar en ambas propiedades; luego de la apertura de la llave, se introduce el o los nombres de los contadores cuyas propiedades se vayan a determinar, seguido de un número indicador del valor de inicio del contador o del incremento (siempre en números enteros), según sea la propiedad utilizada.

body {
  counter-reset: ejemplo 0;
}

p:before {
  content: counter(ejemplo);
  counter-increment: ejemplo 1;
}

El nombre es obligatorio, mientras que en caso de que el número no exista, los navegadores toman el valor base. Este valor, en la propiedad “counter-reset” es cero, mientras que en la propiedad “counter-increment” es uno.

Pero sin lugar a dudas, la mejor forma de conocer las características de estas propiedades, es conocer el funcionamiento, así que a continuación veremos algunos ejemplos de su utilización, donde describiremos las diferentes formas de aplicarlas.

Ejemplos

body {
  counter-reset: ejemplo 0;
}

p:before {
  content: "Párrafo " counter(ejemplo) ": ";
  counter-increment: ejemplo 1;
}

<p>Párrafo de ejemplo.</p>
<p>Segundo párrafo de ejemplo.</p>

En el ejemplo que hemos visto, en primer lugar hemos creado el contador en el propio elemento “body”, lo que quiere decir que cuando el navegador se encuentra con dicha etiqueta inicia el contador de nombre “ejemplo” y se inicia en 0 (lo que equivale a decir que cuando aparezca un elemento marcado con una propiedad de contador que utilice “ejemplo”, tendrá el valor 1); luego, el contador “ejemplo” podrá utilizarse en cualquier elemento contenido dentro de las etiquetas “body”.

A continuación nos encontramos con que a los elementos <p> se les agrega el pseudo-elemento “:before” y que se le agrega contenido dinámico con la propiedad “content”. Este contenido dinámico está formado por la palabra “Párrafo “ (como se ve, la palabra es seguida de un espacio en blanco para que el mismo aparezca en el texto concatenado), el número generado por el contador y otro texto concatenado, que en este caso es el signo de puntuación seguido de un espacio en blanco. El resultado es:

Párrafo 1: Párrafo de ejemplo.

Párrafo 2: Segundo párrafo de ejemplo.

Ahora veremos la utilización de más de un contador para un mismo elemento:

body {
  counter-reset: ejemplo 0 elemento 0;
}

p:before {
  content: "Elemento " counter(elemento) ", " "Párrafo " counter(ejemplo) ": ";
  counter-increment: ejemplo 1 elemento 1;
}

Como podemos ver, se pueden crear varios contadores para un mismo elemento y utilizarlos a la vez. El resultado del ejemplo anterior es el siguiente:

Elemento 1, Párrafo 1: Párrafo de ejemplo.

Elemento 2, Párrafo 2: Segundo párrafo de ejemplo.

Esta propiedad tiene en cuenta el anidamiento de los diferentes elementos, como podremos ver en el siguiente ejemplo, en el cual anidamos listas ordenadas. Para una visualización de los ejemplos que draremos en adelante, es necesario que recreen los ejemplos brindados en páginas HTML de ejemplo y las visualicen en su navegador:

ol  {
counter-reset: lista;
list-style: none;
}

ol li:before {
content: "Número " counter(lista) " ";
counter-increment: lista 1;
}

<ol>
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento
      <ol>
        <li>Elemento</li>
        <li>Elemento
          <ol>
            <li>Elemento</li>
            <li>Elemento</li>
            <li>Elemento</li>
          </ol>
        </li>
        <li>Elemento</li>
      </ol>
    </li>
    <li>Elemento</li>
  </ol>

En las listas (que pueden ser ordenadas o no ordenadas si se va a eliminar el estilo de las mismas) se ha colocado un texto generado en forma dinámica con un contador, que se reinicia en cada elemento anidado, ya que se considera un elemento diferente del padre. Aprovechando esta característica, se pueden realizar algunas modificaciones para mostrar las listas en forma diferente, como en el ejemplo siguiente:

ol.lista  {
counter-reset: otra;
list-style: none;
}

ol.lista li:before {
content: "Número " counters(otra, '.') " ";
counter-increment: otra 1;
}

  <ol class="lista">
    <li>Elemento</li>
    <li>Elemento</li>
    <li>Elemento
      <ol class="lista">
        <li>Elemento</li>
        <li>Elemento
          <ol class="lista">
            <li>Elemento</li>
            <li>Elemento</li>
            <li>Elemento</li>
          </ol>
        </li>
        <li>Elemento</li>
      </ol>
    </li>
    <li>Elemento</li>
  </ol>

En este ejemplo, vemos que en lugar de utilizar la función “counter()”, hemos utilizado la función “counters()”, que tiene la capacidad de iniciar más de un contador concatenado siguiendo la anidación de los elementos.

Otras características

Las propias características de los contadores, que generan una secuencia de números, hace que cuando se encuentran bajo la influencia de ciertas propiedades, sus características puedan variar. Si se utiliza la propiedad “display” con el valor “none”, el elemento afectado no iniciará el contador (en caso de que se trate del elemento inicial) o no formará parte de los elementos contados. Es decir que, el elemento posterior tendrá el número que en caso de no estar afectado por “display: none;” le correspondería a éste.

  <ol class="lista">
    <li>Elemento</li>
    <li style="visibility: hidden;">Elemento</li>
    <li>Elemento
      <ol class="lista">
        <li>Elemento</li>
        <li>Elemento
          <ol class="lista">
            <li style="display: none;">Elemento</li>
            <li>Elemento</li>
            <li>Elemento</li>
          </ol>
        </li>
        <li>Elemento</li>
      </ol>
    </li>
    <li>Elemento</li>
  </ol>

Sin embargo, si un elemento que está siendo contado está afectado por la propiedad “visibility” con el valor “hidden”, el elemento seguirá siendo contado, por lo que el elemento siguiente tendrá el valor que le corresponde, ya que el elementos “invisible” no se ve, pero se encuentra formando parte del documento.

En el próximo artículo, veremos algunos ejemplos más de la utilización de estas propiedades, poco utilizadas debido a que Internet Explorer recién las ha incorporado en su última versión. De todas formas, son propiedades que otorgan elementos muy interesantes para los diseñadores de páginas web.