CSS avanzado: la propiedad “content”

La razón fundamental para que muchos diseñadores de páginas web optaran por no utilizar algunas propiedades CSS avanzadas es que no eran soportadas por algunos navegadores, como por ejemplo las versiones 6 y 7 de Internet Explorer. Utilizar algunas de estas útiles propiedades, podría significar que buena parte del trabajo de diseño no fuera visible con estos navegadores, lo que implica que buena parte del público no pudiera ver los mismos resultados que cualquiera de los usuarios que utilizan navegadores que respetan los estándares de la W3C, como Opera, Safari y Mozilla Firefox.

Sin embargo, con la aparición de Internet Explorer 8 que soporta estas propiedades CSS, y suponiendo que buena parte del público que utiliza versiones anteriores de Internet Explorer terminará con el tiempo actualizando su navegador, es de esperarse que los diseñadores tengan la posibilidad de utilizar este tipo de recursos con total libertad.

La propiedad “content”

Esta propiedad tiene la capacidad de generar contenido en forma dinámica, y solo puede ser aplicada a los pseudo-elementos :before y :after y suele utilizarse en combinación con las propiedades “counter-reset” y “counter-increment”, como veremos más adelante.

Los valores que se utilizan son tan variados como posibilidades de elementos a introducir existen: cadenas de texto, URL’s, apertura y cierre de comillas, contadores, etc. Su valor inicial es “normal”, que en la práctica (si bien desde el punto de vista lógico tienen un valor diferente) cumple la misma función que el valor “none”, ya que ambos evitan que el pseudo-elemento que se aplica no se genere. Dado que el valor generado forma parte del elemento, hereda todas las propiedades CSS.

Otros valores que pueden utilizarse, son open-quote, close-quote, no-open-quote y no-close-quote, que siempre deben estar acompañados de la propiedad “quotes” en cuyo valor se debe introducir el tipo de comillas que se utilizará. El valor más avanzado que puede utilizarse, es el que permite mostrar el valor de una propiedad utilizada en el elemento sobre el que se utiliza esta propiedad, mediante la utilización del valor “attr()”.

Debemos señalar que el empleo de esta propiedad es controvertida por parte de muchos desarrolladores, ya que éstos consideran que la generación de contenidos dinámicos no forma parte de las atribuciones de CSS, cuyo cometido es controlar el aspecto y la presentación de los contenidos. Sin embargo, el hecho de que forme parte del estándar, significa que puede utilizársele libremente y que genera un código válido como cualquier otra propiedad CSS.

Sintaxis y ejemplos

Si bien la sintaxis es similar a la que se utiliza en el resto de las propiedades CSS, algunas de las características propias de esta propiedad hacen que pueda tornarse un poco más compleja. Dado que se aplica solo a los pseudo-elementos “:before” y “:after”, se debe tener especial cuidado de colocarlos junto a la etiqueta correspondiente. Téngase en cuenta que en el caso de que se quiera introducir una cadena de texto como valor, el texto debe ser colocado entre comillas dobles. Veamos un ejemplo:

p:before  {
  content: "Hola a todos: "
  }

En el ejemplo, se ha introducido como valor una cadena de texto, que aparecerá antes de cualquier texto que se introduzca en los párrafos de la página. Si se quiere evitar que este texto aparezca solo en algunos párrafos, bastará con marcar con un identificador o una clase al o a los párrafos que se desee, como puede verse en el ejemplo siguiente:

p.hola:before {
  content: "Hola a casi todos: "
  }

<p class="hola">Estamos bien</p>

En el ejemplo que damos, todos los párrafos marcados con la clase “hola” se iniciarán con la cadena de texto que se incluye. Las complicaciones pueden comenzar cuando se necesite utilizar algunos símbolos propios de la sintaxis CSS en el texto a incluir, como pueden ser las comillas o cualquier otro símbolo utilizado en la sintaxis, lo que producirá un conflicto con las comillas que deben incluirse en la cadena de texto para que los navegadores la identifiquen como tales, en cuyo caso se deberá optar por insertar comillas simples (‘) o colocar una barra invertida () delante de cada una de las comillas:

p.simple:before {
  content: "Contenido 'CSS' "
  }

p.barra:before  {
  content: "Contenido "CSS" "
  }

Las cadenas de texto utilizadas como valor de esta propiedad, solo se toman como texto plano, por lo que en caso de utilizarse etiquetas HTML, éstas se mostrarán como parte del texto y no generarán ningún otro efecto.

Como se dijo anteriormente, también puede utilizarse para abrir y cerrar comillas utilizando los valores “open-quote” y “close-quote”, y deben estar acompañados de la propiedad “quotes” que llevará como valores las comillas que se utilizarán para la apertura y cierre. En caso de que las comillas que se utilicen sean del mismo tipo (“) que las que se emplean para encerrar el valor, se deben utilizar el símbolo () de escape para que no se genere conflicto.

blockquote {
  quotes: "" " " "";
  }

blockquote:before {
  content: open-quote;
  }

blockquote:after {
  content: close-quote;
}

<blockquote>Nota especial</blockquote>

También pueden utilizarse los valores “no-open-quote” y “no-close-quote”, que sirven para evitar que aparezcan las comillas de apertura y cierre, pero manteniendo la jerarquía en el anidamiento de las comillas.

El valor “attr()” introduce antes o después (según se utilice “:after” o “:before”) el valor del atributo que se coloque entre los paréntesis. Estos atributos son, por ejemplo, “title”, “href”, etc. En caso de que este atributo no se encuentre presente en el elemento, se generará una cadena de texto vacía. Veamos un ejemplo de la utilización llamando al atributo “title”:

p:before  {
  content: " (" attr(title) ")"
  }

a:after {
  content: " (" attr(href) ")";
}

<p title="titulo">Título</p>
<a href="https://www.lawebera.es">Esta es nuestra URL:</a>

En el ejemplo que vemos anteriormente, como se han colocado paréntesis para que sean introducidos como parte de la cadena de texto, en caso de que algún párrafo no tenga el atributo “title” determinado, aparecerán los paréntesis solos, ya que el atributo “title” genera una cadena de texto vacía.

Otra forma de utilizar el valor “attr()”, es para el atributo “href”, con lo que podremos colocar la URL especificada en un elemento como un texto, como también podemos ver en el código de ejemplo anterior.

Utilización con otras propiedades

Una de las utilizaciones más interesantes de esta propiedad, es la que se realiza en conjunto con las propiedades “counter-reset” y “counter-increment”, que se utilizan para generar contadores para diversas utilidades.

Dado que es necesario conocer en profundidad ambas propiedades, la utilización de la propiedad “content” en la elaboración de contadores dinámicos se describirá en el artículo correspondiente a estas dos propiedades.