Cómo posicionar tus sprites

Como ya he comentado antes, en A list apart y en WebSite Optimization explican mejor que yo cómo posicionar tus sprites para conseguir el efecto deseado, por lo que no seré yo quien os repita de nuevo la información (algo que he odiado siempre es la asombrosa capacidad que tienen algunos para copiar los artículos originales de otros sin aparente sentimiento de culpa).

Por lo que en esta entrada pasaré a valorar todos esos detalles inesperados que se os podían haber pasado por alto en un primer momento a la hora de implantar vuestra maravillosa técnica de sprites.

El primer detalle es quizá uno de los más importantes: debéis tener en cuenta el formato de vuestras imágenes y los navegadores con los que se verá vuestra página. Si vuestras imágenes son PNG's nativas, probablemente tendréis añadido este filtro desarrollado por Microsoft para solucionar la cagada incompatibilidad de IE6 con imágenes PNG. No es que IE6 sea directamente incompatible con los PNG, sino que no soporta bien el canal alfa de estas imágenes. Para quienes no sepáis qué es el canal alfa, os diré que es una característica de las imágenes PNG que hace que puedan ser translúcidas (es decir, con una transparencia parcial) en vez de ser o totalmente transparentes o totalmente opacas como los GIF.

Pues bien, lo que le ocurre a IE6 es que no soporta bien las imágenes translúcidas, pero no se queda ahí el asunto, porque si utilizáis el filtro de Microsoft que ya mencioné antes para solucionar el problema, no podréis poner imágenes PNG en background. El filtro alpha image loader es completamente incompatible con el reposicionamiento de imágenes en background. Por lo que no tendréis más remedio que quitarlo y probar soluciones alternativas, de las cuales algunas están expuestas aquí: Blog de Christopher Schmitt

Mi recomendación personal es que no intentéis ensuciar la estructura de la página añadiendo divs exóticos, especialmente si trabajáis para un portal complejo con contenido HTML autogenerado y toneladas de divs por defecto. El título de este blog es "diseño con estándares para la vida real" y mi elección personal es intentar hacer una web lo más semántica posible dentro de las restricciones lógicas que las prisas y la vida real imponen a nuestro trabajo. En lugar de intentar complejas operaciones de reposicionamiento, os aconsejo trasladar los PNG a GIF utilizando las ideas de Andrew en el comentario número 20 del artículo de Schmitt, colocando estos GIF de background en una hoja de estilos alternativa sólo para IE6, o bien bajo un comentario condicional.

Otro detalle (y que podría parecer una tontería):

Cuando copiéis en vuestra CSS sentencias del tipo:

clase-sprites {
background: url(../img/menu_sprites.png)left no-repeat;
}

Aseguraos de que no habéis hecho lo mismo que yo, porque vuestra imagen no se verá en IE6 ni en IE7. Os preguntaréis qué he hecho, ¿verdad? Me ahorré un espacio después del paréntesis. Eso bastó, en contra de las especificaciones del W3C para que el contenido de mi fantástico sprite no se viera en ninguna versión de IE. Dejad siempre vuestras CSS bien aireadas, como aquí:

clase-sprites {
background: url(../img/menu_sprites.png) left no-repeat;
}

Otro detalle más que hace que los png sean inútiles en IE es que concretamente en la versión de IE7 no son clicables, por lo que os recomiendo una vez más que paséis los PNG a GIF aunque sea una solución estéticamente más desagradable (y recemos para que cada vez menos gente utilice IE6, al menos así nos quitaríamos el mayor de nuestros males).