Despues de mi lamentable experiencia con Internet Explorer me propuse encontrar un método mas fiable para controlar en ancho minimo de una caja en los navegadores de Microsoft.

El problema

Definir el problema es sencillo, Internet Explorer no implementa el atributo min-width (ni max-width, ni min-height ni los selectores de atributos, ni pseudoclases dinámicas ni nada de nada), lo que convierte en una verdadera tortura realizar una maquetación líquida mas o menos decente.

Veamos, se llama maquetación líquida (o fluida) a aquellas que se adaptan al tamaño de la ventana del navegador, en este caso el contenido fluye ocupando siempre el espacio disponible, puedes ver un ejemplo en http://www.fuem.um.es , en la en resultados de google images o en <publicidad> mi propio portafolio. </publicidad>

En maquetaciones líquidas, la barra de desplazamiento horizontal no debería aparacer más que en casos extremos, (cuando hacemos la ventana demasiado pequeña).

Muchas veces el problema radica, ahí mismo; si dejamos que nuestro contenido fluya sin ningún tipo de reservas, y nuestro usuario es un poco tocalotodo nuestra maquetación se puede descuadrar, nuestras capas se caen y todo es un desastre.

Por ejemplo, en desarrolloweb tienen un buen artículo sobre maquetación con CSS.

Se puede ver de lo que hablo si visitais el ejemplo de maquetación líquida a tres columnas si se redimensiona la ventana del navegador de unos 280px de ancho, la columna central se cae, y a los 150px se cae incluso la columna derecha.

Para evitar este comportamiento se usa el llamado diseño semi-liquido o hibrido, que consiste en dejar que nuestro contenido fluya pero imponiendo límites. Es como si le dijeramos a nuestra web: Si la ventana es mayor a tantos px, puedes fluir libre, a tu aire; pero como llegue algun listillo y la haga más pequeña que esos px, nos plantamos y te conviertes en un diseño fijo.

Pues bien, ese ancho mínimo puede ser establecido mediante la propiedad min-width de CSS, que además de ser muy útil no esta implementada en IE.

Se me parte el corazón.

La solución con javascript

Hace algún tiempo, Microsoft se saco de la manga la palabra clave expression que permitía incluir trozos de código javascript en nuestras hojas de estilo.

De esta forma, podemos simular la propiedad min-width con algo como esto:

La expresión es una condicional, equivalente a esto otro:

En un principio, la idea de poder crear hojas de estilos dinámicas es atractiva, en teoría debe cachear (guardar la hoja de estilos en caché) y todo eso, pero...

1. Es un parche propietario
2. Reduce la accesibilidad

Que sea propietario (no estandar) implica que esta solución solo funciona en Internet Explorer, y nadie nos garantiza que esto siga ocurriendo en versiones posteriores de este navegador.

Reduce la accesibilidad porque requiere que nuestro navegador tenga habilitado javascript, algo que a pesar de ser bastante común no siempre ocurre.

En cualquier caso podemos mezclar la solución estandar con la propietaria, para abarcar el mayor número de navegadores posible:

Esto es lo que hay, si alguien quiere ver mi página con IE, sin javascript habilitado, con una resolución mínima y encima se pone a hacer el tonto con la ventanita, pues que se joda.

Evidentemente no es la mejor solución, pero es rápido para salir del paso y los daños colatelares son mínimos. Lo realemente aterrador es ver como ver como Microsoft crea un problema al no implementar min-width, y luego trata de vendernos la solución propietaria, pero termina fallando!.

Creo sinceramente que Microsoft ha hecho más por el desarrollo y la popularización de lo estandares de la W3C que cualquier otra empresa en el mundo.

Groucho Marx dijo en una ocasión:

“Encuentro la televisión muy educativa. Cada vez que alguien la enciende, me retiro a otra habitación y leo un libro.”

Pues es lo mismo, siempre que alguien me habla de las bondades de Microsoft corro a ver que pone en el estandar

En el próximo post, trataremos de simular min-width para IE, usando solo CSS, que aunque sea algo más farragoso es bastante más interesante.