Contenido generado con CSS

Portada

Tecnología

Programación

Detalles: Categoría: Programación; Última actualización el Martes, 03 Enero 2012 19:07; Escrito por cybnet; Visto: 506

Introducción

La propiedad content fue introducida en CSS 2.1 para añadir contenido a los pseudo-elementos :before y :after. Esto es ya soportado por todos los navegadores. Algunos ya incluso soportan la propiedad content en todos los elementos html y no solo en los pseudo-elementos :before y :after.

En CSS3 la propiedad content cuenta con un montón de más características y funcionalidades, por ejemplo, se puede insertar y mover contenido a lo largo de todo el documento.

En este artículo pretendo presentar los aspectos básicos del uso de la propiedad content para ver luego algunas técnicas específicas para implementar contenido generado con CSS.

Algunas consideraciones previas

Antes de meternos en el tema, creo que merece la pena apuntar que el contenido generado con CSS

puede que aún no funcione en algunos navegadores
no está disponible vía DOM. Esto significa que este contenido debe entenderse con fines puramente de presentación o decorativos y no como "el contenido".

Contenido generado con CSS: aspectos básicos

content es usado en la forma:

h2:before { content: "algo"; }

Esto insertará el texto "algo" justo antes (before) del comienzo de cada elemento h2 en la página.

En lugar de escribir el texto en el valor de la propiedad content, también se puede utilizar valores de los atributos de los elementos a los que se está aplicando. Esto se hace utilizando attr() y el nombre del atributo cuyo valor se quiere utilizar. Por ejemplo:

a:after { content: attr(href) }

Este CSS hará que tras cada elemento a se inserte el contenido que hay en su respectivo href. Ten en cuenta que el nombre del atributo, cuándo hablamos del uso de attr(), ha de ir sin comillas.

Con la propiedad content también podemos generar números de forma dinámica utilizando counter o insertar imágenes usando url(/directorio/imagen). Vamos a aplicar esto en algunos ejemplos.

Numerar contenido

Un ejemplo de lo que vamos a hacer ahora se puede encontrar de forma detallada en cambiar el número de una lista numerada con css. Veamos aquí otro ejemplo.

Si quieres insertar valores que se van incrementando como por ejemplo: "Capítulo 1", "Capítulo 2", etc en una secuencia repetida de elementos, puedes usar contadores para incrementar el valor del contador y mostrarlo utilizando content:

ol {
   list-style-type:none;		
   counter-reset: capitulocount;
}                      

li:before {
   content: "Capítulo" counter(capitulocount); 
   counter-increment: sectioncounter;
}

En la primera regla utilizamos la propiedad counter-reset para poner el contador a 1, contador que es guardado con el nombre capitulocount. En la segunda regla decimos que antes de cada elemento lise imprima el texto "Capítulo X" donde X es el valor actual de capitulocount. Nota también como se hace el contador se vaya incrementando con 1 cada vez que la regla es aplicada utilizando la propiedad counter-increment.

A lo hora de implementar contadores con contenido hay que tener en cuenta que el incremento de valor no se producirá si al elemento se le aplica el CSS display:none, aún cuándo se especifique la propiedad counter-increment.

Por supuesto, en navegadores que no soporten esta característica de CSS no aparecerá "Capítulo X". Esto puede ser confuso para algunos usuarios, por ejemplo si haces una referencia del modo "Vea el Capítulo X para más info". Esta es la línea que separa el contenido de los elementos decorativos y es a lo que me refería al principio del artículo cuándo decía que el contenido generado con CSS debía ser contenido meramente decorativo.

Si te interesa aprender más sobre la numeración automática con CSS puedes mirar este fabuloso artículo: Automatic numbering with CSS Counters.

Reemplazar texto con imágenes

Existen muchas técnicas que puedes implementar para reemplazar texto con imágenes. Una de ellas usar la propiedad content de CSS.

div.logo {
   content:url(logo.png);
}

Este código reemplazará el texto del div de clase logo con la imagen del logotipo. La ventaja de esta técnica es que el texto es realmente reemplazado y no hay que implementar técnicas para "esconder" el texto como text-indent o padding. Pero esta técnica también tiene inconvenientes:

No se puede repetir la imagen ni usar un sprite.
Sólo funcionará en navegadores que soporten la propiedad content con url como valor en todos los selectores CSS y no sólo en :before o :after.
No se puede especificar ningún atributo de la imagen como título o texto alternativo.

Mostrar iconos en los enlaces

Tener enlaces con iconos es muy habitual y tradicionalmente se ha realizado con imágenes de fondo combinado con padding. Con la propiedad content podemos hacer que se muestren iconos utilizando selectores de atributos sin necesidad de aplicar clases a los enlaces:

a[href $='.pdf']:after {
  content:url(icon-pdf.png);
}
a[rel="external"]:after {
  content:url(icon-external.png);
}

Con este código se mostrará el icono pdf o el icono de enlace externo especificado en la url de la propiedad content. La primera regla utiliza un selector de CSS3: href $='.pdf'que significa "atributo href con .pdf al final". La segunda regla utiliza como selector rel="external" con lo que se aplicará la regla a todos los elementos a que tengan el atributo rel con valor external.

Hay cierta similitud con expresiones regulares en los selectores de atributos en CSS3, ^ indica comienzo de cadena mientras que $ indica final de cadena (nota el uso de $ en el ejemplo anterior), * indica cualquier posición. Para más info visita http://www.w3.org/TR/css3-selectors/#attribute-substrings.

Uso de valores de atributos como contenido

Ya mencionamos anteriormente que el uso de content: attr(val) permite mostrar el valor del atributo del elemento en la pantalla. Esto puede ser muy útil en una amplia variedad de casos.

Por ejemplo, podemos imprimir el valor del atributo href de un enlace y hacer esto sólo en el CSS aplicado a la impresión:

<style type="text/css" media="print">
a:after {
  content: "(" attr(href) ")";
}
</style>

Así, si tenemos este html:

<a href="http://www.bloogie.es">Visita Bloogie</a>

Al aplicar el CSS anterior, al imprimir en una impresora se imprimiría "Visita Bloogie (http://www.bloogie.es)".

Utilizar el valor de atributos para generar contenido con CSS puede ser una herramienta muy poderosa si se combina con atributos personalizados dónde pongamos los datos que nos interese y así se podrían generar por ejemplo gráficos, presentaciones o animaciones directamente con CSS. No obstante, la propiedad content necesitaría un poco más de desarrollo aunque ya es soportada, al menos en su funcionamiento básico, por las últimas versiones de los navegadores principales.

+1 -1 Reportar