Contacta (+34) 622 045 404

Estudio de desarrollo front-end, maquetación web, diseño y programación WordPress freelance.

Fundado por Alberto Fortes, diseñador y maquetador web HTML5 responsive design, front-end developer JavaScript y programador WordPress freelance a medida desde 2006.

Especializados en outsourcing con importantes clientes finales.

ie7 y el pseudo elemento :first-letter

6 Septiembre, 2006

ie7
Ayer estube probando ie7, y la verdad es que me gustó lo que ví, parece que por fin vamos a poder disfrutar con todas las posibilidades y pijaditas del CSS.
No obstante, hay algo que me dejó un poco extrañado, se trata del pseudo elemento :first-letter que da estilo a la primera letra del objeto. En este caso:

# .col h2:hover, .col h3:hover {

color : #666;

}
# .col h2:first-letter, .col h3:first-letter {
color : #f00;
font-weight : bold;
font-size : 150%;
}

:first-letter actúa sobre la primera letra del encabezado h2 y h3 dentro de la clase columna. Además mediante :hover decimos que todo el etiquetado cambie de color cuando pasamos el ratón por encima. [ver ejemplo]
Pues bien, hasta ahora con Mozilla, Firefox, Opera Y Flock cambiaba a gris #666 todo el encabezado menos la primera letra ya que teníamos forzado su estilo con :first-letter. Con ie < 7 simplemente el hover y el first-letter no funcionaban. Con ie7 ya funciona, reconoce los hover y los pseudos elementos, no obstante hay un efecto inexperado: Al pasar el ratón por encima del encabezado ¡cambia de color todo, incluso la primera letra!. Desde luego los chicos de ie7 no dejarán nunca de sorprendernos, ahora que por fin todo parecía cuadrar y cumplir los estándares ¿nos salen con comportamientos inexperados en pseudo elementos?. En fin, habrá que seguir investigando a ver que pasa. También dejo una pregunta abierta, no será que el nuevo comportamiento del ie7 es más lógico que el de los demás navegadores, al fin y al cabo, respeta el tamaño, sólo cambia el color, como diciendo: No se olvide ud. que la primera letra pertenece al encabezado, y no por darle un estilo en reposo la conviertes en un objeto diferente... Yo realmente me inclino por esto, creo que la postura de explorer es más lógica, pero también se la podían haber ahorrado para compatibilizar de una vez por todas el código con todos los navegadores.