Niquelao

Otro toque de estilo en el Curso de CSS 11 de Noviembre de 2009, por Rumoroso

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é…

Otro toque de estilo en el Curso de CSS

Categoría: CSS

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También puedes enviar un trackback desde tu sitio.

• Artículo anterior: Estilando el curso de CSS Avanzado
• Artículo siguiente: Multiples imágenes de fondo con CSS 3