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.
LaWebera.es te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Verónica Milán Gómez (LaWebera.es) como responsable de esta web.
Finalida: recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog.
Legitimación: Consentimiento del interesado.
Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Cyberneticos (proveedor de hosting de LaWebera.es). Cyberneticos está ubicado en España, UE, un país cuyos nivel de protección son adecuados según Comisión de la UE. Ver política de privacidad de Cyberneticos.
El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud.
Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en admin@lawebera.es así como el derecho a presentar una reclamación ante una autoridad de control.
Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: www.lawebera.es, así como consultar mi política de privacidad.
Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.