sábado, 17 de enero de 2009

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.