Otro toque de estilo en el Curso de CSS

Como ya hice en la entrada anterior (estilando el curso de CSS Avanzado), voy a seguir comentando alguno de los estilos que utilicé en la presentación del curso de CSS para Zaragoza.

Hoy uno rapidí­to

En una determinada diapositiva tuve que categorizar una lista de propiedades. Esta lista resultaba ligeramente larga como para acomodarla de forma vertical en la pantalla (máxime cuando querí­a añadir otra lista más en la misma diapo), con lo que decidí­ estilarla en lí­nea. Nuevamente mi intención era aprovechar la propia presentación como ejemplo (os recuerdo que la hice con el rumoslide, el cual es básicamente XHTML, CSS y javascript) para demostrar lo que se puede conseguir con las hojas de estilo.

A continuación incluyo la lista en cuestión. Lo hago en forma de imagen para que se vea su aspecto sin estilar (únicamente muestra los estilos que Firefox le aplica por defecto):

El HTML empleado es simple. Se trata de una lista en la que cada item está constituido por un elemento code con texto en su interior:

<ul class="herencia">
	<li><code>border-collapse</code></li>
	<li><code>border-spacing</code></li>
	<li><code>caption-side</code></li>
	<li><code>color</code></li>
	...
	<li><code>widows</code></li>
	<li><code>word-spacing</code>
</ul>

…y el resultado que quise obtener (y que evidentemente obtuve) es el siguiente (nuevamente incluyo un pantallazo):

Los estilos empleados para conseguir este resultado son:

code {
	font: .8em monospace;
	color: #009;
}
.herencia li {
	display: inline;
}
.herencia li:after {
	content: ', ';
}
.herencia li:last-child:after {
	content: ' ';
}

Lo primero que hice fue estilar el elemento code para poder diferenciarlo del resto de texto. Para ello jugué con el tamaño de la fuente, su familia y su color. Como se ve, todo muy simple.

Para que la lista inicialmente en vertical pasase a alinearse cambié la propiedad display de los items a inline. Luego hice aparecer una coma tipográfica y un espacio (“, “) mediante la propiedad content (contenido generado). Esta la apliqué sobre el pseudoelemento :after. Finalmente, como esto hace aparecer la coma también en el último item, lo que hice fue indicar que su contenido generado estuviese vací­o (content: ' ').

Vale, es evidente que hay una pega en algo que aun no he comentado y que espero que alguien se haya dado cuenta (idealmente alguno de los alumnos/as asistentes al curso). Para seleccionar el último item utilicé la pseudoclase :last-child de CSS 3, cuyo soporte está muy poco extendido. Pensaréis que podrí­a haber utilizado únicamente selectores de CSS 2.1. Por ejemplo, podrí­a haber generado el contenido antes de cada item (en lugar de después) usando :before y luego seleccionar con :first-child el primer item para quitarle la coma de delante. ¿Por qué no lo hice?… por lo siguiente:

La coma se dispone al comienzo de cada lí­nea cuando un item se sitúa en dicha posición, lo cual es evidentemente una incorrección. Para evitar esto, y sabiendo que el navegador que iba a utilizar tiene soporte para ello, decidí­ emplear CSS3… Lo se, :last-child no está suficientemente extendido entre los navegadores, pero al menos en las ultimí­simas versiones si… y para la presentación me sirvió perfectamente.

Después de todo este rollo se puede extraer una conclusión: CSS me mola, y el poder usar la presentación del curso como ejemplo me mola aun más. Eso si, por favor,… navegadores con más soporte y que llegue pronto CSS 3.

Os dejo el enlace a un par de listas en las que se detalla el grado de soporte de CSS en base al navegador:

• http://www.webdevout.net/browser-support-css#css3standards
• http://www.quirksmode.org/css/contents.html

Por cierto, en la presentación no me pude aguantar y utilicé un poco más de CSS 3… evidentemente no me podí­a quedar sin redondear algunas esquinas. En un próximo artí­culo os lo comentaré…