Niquelao » Archivo del weblog » Problemas de espacio y pseudo-elementos

Problemas de espacio y pseudo-elementos

7 de September, 2006 por Maroto

Se hace raro descubrir un bug de este tipo, es decir, una puta chorrada que, o bien no tienes nada que hacer o es la casualidad más casual la que hace que te des cuenta. Y además, que sea tarde. Ya se ha escrito sobre lo mismo hace más de un año en Maxgeek, Satzansatz y seguramente algún otro por ahí.

Al temario. ¿Qué es lo que pasa?

Cuando utilizamos los pseudo-elementos definidos por la especificación de CSS 2.1 :first-letter y :first-line (obviamos el pseudo-elemento :first-child y similares ya que nuestro amigo IE pasa un poco de ellos) podemos comprobar que en ocasiones no obtenemos los resultados esperados.

¿Qué pasa?. Incompresiblemente, IE falla a la hora interpretar la sintáxis de CSS. Si a continuación de estos pseudo-elementos utilizamos la llave ( { ) para comenzar nuestra declaración sin dejar un espacio entre ambos, IE no lo interpreta. Lo puedes ver en el ejemplo uno.

	p:first-line{
		 color: blue;
		 font-weight: bold;
	}

Lo mismo sucede si tratamos de ofrecer propiedades comunes a varios elementos en una misma declaración, donde los mismos aparecen separados por comas ( , ). Lo puedes ver en el ejemplo dos.

	 p:first-letter, blockquote p:first-letter{
		color: #000;
		font: 2.3em serif;
		float: left;
		margin: .2em .2em 0 0;
	 }

Y la solución, ¿si la hubiera o hubiese?

En este caso, existe y es relativamente fácil. Simplemente dejar un espacio en blanco entre el pseudo-elemento y el símbolo que tengamos que aplicar, bien sea la coma ( , ) o la llave ( { ). Si no te lo crees, aquí tienes el ejemplo tres.

	p:first-letter , blockquote p:first-letter {
		color: #000;
		font: 2.3em serif;
		float: left;
		margin: .2em .2em 0 0;
	 }

Eh!! Que aquí no acaba todo!

Otro problemilla que encontramos viene de la mano de las listas. Y ahora, ¿que pasa?. Si aplicamos un estilo al pseudo-elemento :first-letter a elementos de lista, IE de forma agradable lo propaga al marcador del propio elemento de lista (bullet en caso de lista desordenada, número o letra en caso de lista ordenada). Qué incrédulo, mira el ejemplo cuatro.

¿Y la solución para este lío?

Si aceptais pulpo como animal de compañía, diremos que con eliminar los marcadores de las listas mediante:

	 li {list-style:none}

Si no, pués na.

Otro detalle sin importancia, es que a IE7b2 le da igual que no haya espacios entre el pseudo-elemento y el caracter {. Eso sí, a su hermano pequeño si le importa, así que respetemos su espacio vital.

Y ya puestos, ¿qué pasa con la especificidad?

Pués que va a pasar, pués nada, al menos con IE. En primer lugar debemos saber que estos pseudo-elementos solo (que no es poco), afectan a elementos a nivel de bloque. Bien, si definimos unas propiedades para, por ejemplo, un párrafo y a continuación definimos otras propiedades para otro párrafo que aparece dentro de un bloque de cita (blockquote) tendremos las mismas características en los 2 párrafos (claro, eso si nos hemos dado cuenta de darle el espacio correspondiente entre el pseudo-elemento y su maravilloso símbolo. Todo resumido en el último ejemplo.