Hack CSS exclusivo del IE8

Con éste hack, o truco, conseguimos que la propiedad de estilo sólo se aplique en el internet explorer 8. Ni Firefox, ni versiones inferiores de explorer detectarán las propiedades definidas de esta manera.

selector {propiedad: valor\0/;}

La clave del truco es "\0/", que se pone tras el valor de la propiedad del estilo.

Un ejemplo:

<!-- Definición del estilo en alguna parte -->

<style type="text/css">

p.textoRojoEnIE8 {color: #ff0000\0/;}

</style>

...

<!-- Código html dentro del tag body -->

<p class="textoRojoEnIE8">

El texto de éste párrafo se verá rojo, sólo en Internet Explorer 8.

</p>

<!-- O definiendo el estilo directamente en el tag. -->

<p style="color: #ff0000\0/;">

Éste párrafo también se verá en rojo, sólo en IE8.

</p>

Fuente: Internet Explorer 8 only CSS hack

Truco CSS - fijar ancho mínimo del elemento body

No es ninguna noticia que en CSS, incluso en navegadores que cumplen la mayoría de los estándares, no funcione todo como nos esperamos y haya que recurrir a trucos, que además la mayoría de las veces parecen de lo más irracionales.

Vía un artículo de script&style me entero de un hack útil que no conocía: fijar el ancho mínimo del elemento body. Hice la prueba únicamente en FF3 (firefox 3) y funciona.

Problema:

Si tenemos una imagen de fondo de, supongamos, ~2000 px, centrada dentro del elemento body, al redimensionar estrechando la ventana del navegador, el elemento body tambien se estrechará redimensionando su imagen de fondo, con lo que es posible que por debajo de un ancho determinado se desencaje el diseño. Nos gustaría fijar un ancho mínimo, por debajo del cual el elemento body no siga estrechándose. Si probamos a asignar únicamente la regla min-width al elemento body, ésta parece no aplicarse.

// sin el hack, la imagen seguirá redimensionándose por debajo de ese ancho
body{min-width:958px;}

Si no se utiliza la regla color en el elemento html, la imagen de fondo se redimensiona, desencajando el diseño.

El hack:

Para que la regla min-width surta efecto, es necesario añadir (no me preguntéis porque, pero funciona) una regla color, asignando el valor a, por ejemplo, blanco, al elemento html.

html{color: #000;} // sin esto el min-width del body no funciona
body{min-width:958px;}

Si se utiliza, la regla min-width del elemento body hace efecto, fijando el ancho mínimo por debajo del cual la imagen de fondo deja de redimensionarse.