CSS3: Cómo dar estilo a las listas de definiciones

Las listas de definiciones son un elemento HTML a menudo olvidado, pero que pueden ser utilizados en una amplia variedad de formas, y en muchos casos suelen ser el elemento con más exactitud semántica.

En esta nota, veremos cómo podemos mezclar la cerveza, código HTML y CSS3 para explicar la finalidad del elemento de la lista de definición, pero con estilo.

Cúando se usa

Las listas de definiciones varían ligeramente de otros tipos de listas. Los elementos de la misma constan de dos partes: un término y una descripción.

Eso significa que podemos usarlas cada vez que tenemos algo que necesita una descripción. Por ejemplo: una lista de tipos de cerveza belga, una lista de los servicios prestados por una empresa, una lista de las personas en un equipo, etc.

Es bastante sencillo: en lugar de utilizar una lista normal (UL), con títulos y párrafos en el medio, podemos utilizar un elemento que ya tiene etiquetas para nuestros términos de definición y las descripciones.

Anatomía

Una lista de definición consta de 3 etiquetas diferentes: el tag de apertura (dl),  el tag de definición de término (dt); y el tag de definición de descripción (dd). Esto luciría así:

Para mezclar un poco las cosas, podemos tener más de un término, para más de una definición. Por ejemplo, una palabra en un diccionario puede tener dos formas correctas de deletreo y más de una definición.

Ejemplo: Hora de la cerveza

Ahora vamos a darle estilo a una lista de definición de los tipos de cerveza belga.

Primero, el código HTML:

Así pues, estamos envolviendo nuestro contenido en un contenedor (Div), a continuación, un título algo descriptivo (H1) para nuestra página y, finalmente, nuestra lista de definición, con los tipos de cerveza como términos de definición (dt) y cada descripción ( dd).

La magia del CSS 3

Debo advertirte: como suele suceder, esto no funcionará en IE6. La página todavía tendrá sus colores y el formato principal, pero ninguno de los estilos CSS3 se verá. Cuando se está conduciendo un coche inferior, no se espera que llegue tan rápido como un Ferrari, ¿verdad? Igualmente llegará, pero con menos estilo (si es que aún lo tiene).
Primero vamos a añadir algunos valores por defecto a nuestra hoja de estilos (deben utilizar un restablecimiento adecuado en su hojas de estilo, pero vamos a simplificar las cosas aquí), y vamos también a darle estilo al div contenedor:

Ahora a la parte del tipo.

Y aquí es donde empieza la diversión: vamos a utilizar el atributo @font-face para llamar al tipo de fuente llamado Delicious. Recuerden que este tipo de fuente está disponible para embeberse con @font-face, pero no sucede lo mismo con todas las fuentes que existen.
Vamos a añadir este granito de arena al comienzo de nuestra hoja de estilo, antes de los detalles de estilo del body, de modo que toda la info @font-face se vea fácilmente. A continuación, sólo tienen que llamar a la fuente que desean utilizar a través del valor font-family que dimos aquí:

Y ahora, nuestra lista de definición:

OK, aquí hay mucho de qué hablar.

En primer lugar se añade un margen inferior de la lista de definición, de modo que quede algo de espacio entre ella y el párrafo que viene a continuación.

Luego se define el tamaño de la fuente y la familia de fuentes para nuestro dt (y dd, véase abajo, después de la imagen).

También vamos a añadir un poco de sombra para ambos. Para ello, estamos utilizando colores RGBA que nos permiten añadir, además de los valores R, G y B, un valor de transparencia de entre 1 (completamente opaco) y 0 (totalmente transparente). Los valores que vienen después de RGBA son el desplazamiento horizontal y vertical de la sombra, y luego la cantidad de desenfoque (en este caso, cero).
A continuación, añadimos un poco de espacio en blanco alrededor de nuestros términos, y le damos un color rojizo.

Por último, vamos a agregar un borde decorativo para cada una de nuestras descripciones, pero no estamos usando un fondo porque cada descripción tiene una longitud diferente: necesitamos algo más flexible, y tenemos que mostrar nuestras habilidades CSS3 también. Así que vamos a utilizar la propiedad border-image.
La propiedad border-image nos permite utilizar una imagen y especificar qué cantidad de sus bordes queremos aplicar a los bordes de nuestro elemento.
Tenemos que especificar el ancho del borde del elemento, en este caso será 20px. Después de eso, vamos a especificar la imagen que estamos usando para nuestro borde, que en nuestro caso es esta:

(¿Ves un desagradable fondo color azul alrededor de esta imagen? Estás usando IE6!)

También tendremos que decir cúanto de la imagen estamos usando para nuestros bordes: 20, y cómo debe comportarse: ¿Se ajustará al tamaño del elemento, o se repetirá? En nuestro caso, queremos que se estire. Y esto es lo que tenemos:

Estamos utilizando las propiedades específicas del proveedor para que el borde de la imagen sea entendido por cualquiera de éstos (dependiendo de cúal utilice el navegador en cuestión). Algún día, sólo necesitaremos la última línea de este trozo de código, en lugar de 4 líneas.

Soporte de navegadores

He dicho que esto no va a funcionar en IE6. Lo que no dije, es que no funciona en IE8 o 7 tampoco. Ah, y la versión de Opera 9.64 aún ignora la propiedad border-image.
Para que Internet Explorer comprenda el atributo @font-face, ustedes tendrán que utilizar el formato de fuente EOT, así que tendrán que duplicar los 3 atributos @font-face y usar los archivos .eot para eso.

Conclusión

Esperamos que esta guía haya servido de ayuda para que sea un poco más fácil entender cómo las listas de definiciones pueden ser realmente útiles, y cómo CSS3 logra que crear diseños ricos en estilo sea mucho más fácil.

Por último, pueden ver el ejemplo terminado haciendo clic en este enlace »

Pueden descargar los archivos utilizados haciendo clic aquí »

Fuente: Web Designer Notebook