Está claro que nunca jamás se debe optar por usar trucos para dar un tratamiento diferente a los CSSs para igualar la apariencia del site en diferentes navegadores.

Bueno, vale, pero cuado no queda más remedio… cuando llevas dos horas colocando un margen de una foto que no ves la manera de que sea cross-browser… cuando ya no puedes perder más tiempo con eso… pues al final hay que usar estos hacks que te permiten aplicar reglas diferentes según el navegador del que se trate (lo dejas bien comentado y adios remordimientos) .

Para Internet Explorer en general nos pueden valer las condicionales comentadas:

<!--[if IE]>
Esto se mostrará si el navegador es Internet Explorer
<![endif]-->
<!--[if IE 5.5]>
Esto se mostrará si el navegador es Internet Explorer versión 5.5
<![endif]-->
<!--[if IE 6]>
Esto se mostrará si el navegador es Internet Explorer versión 6
<![endif]-->

Para IE 6 exclusivamente:

* html .miclasecss{
/* esto sólo funcionará en Internet Explorer 6	*/
}

y tambien:

p{
margin:10px;
_margin-left:20px; /* Sólo Internet Explorer */
}

Para Firefox:

p.myStyle{
color:red;
}

p > .myStyle{
color:blue; /* Sólo para Firefox */
}

Para IE7 y no IE6:

html[xmlns] .myStyle{
/* Firefox e IE7 lo procesan pero le doc debe ser XHTML para que funcione */
}

Para Safari, Opera y Google Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0){
#div {margin-left: 10px;}
}

Hubo un tiempo en el que los gráficos de los juegos estaban basados en sprites (merece la pena detenerse a estudiar lo optimizado que estaba el uso de los recursos para estos juegos).

Aparecieron las aceleradoras gráficas y los juegos pasaron a aprovechar todas las ventajas de los nuevos avances en hardware.

Con la llegada de los juegos para móviles resurgieron de nuevo los juegos 2D basados en sprites.

Hace un tiempo que descubrí una técnica muy similar a la usada en juegos para usar sprites en páginas web mediante CSS, pero hoy he visto esta herramienta online muy sencilla, con generador de código incluido para agilizar al máximo el proceso de creación de estos sprites.

Con esta técnica podemos ahorrarnos todos los ‘related requests’ de las llamadas a cada objeto gráfico de nuestra página, simplemente cargando el fichero gráfico que contiene todos los sprites (que además podemos dejar cacheado).

La home de Yahoo! es un ejemplo de página que usa esta técnica. Más información en alistapart