Uninstallme

Los diseños elásticos en CSS son aquellos en los que se utilizan unidades relativas para las medidas de fuentes y capas contenedoras de manera que, manteniendo la apariencia y ventajas de los diseños fijos frente a los diseños líquidos, permiten redimensionar el tamaño de todos los elementos de la página al aumentar o disminuir el tamaño de fuente en el navegador.

Este comportamiento es posible gracias a la utilización de emes como unidad de medida para definir las dimensiones de todos los elementos de la página. Las emes son una unidad relativa, es decir, no se puede decir que tengan una equivalencia en píxeles de por sí, sino que su valor depende del tamaño de fuente del elemento en base al que son declaradas.

Por suerte, el tamaño de fuente por defecto en todos los navegadores (creo que esto no siempre ha sido así), es de 16 píxeles, con lo que a partir de esto se puede decir que 1em = 16px.

Calcular tamaños relativos a 16 píxeles no es nada apetecible, sin embargo, calcular tamaños en base a 10 píxeles es tan sencillo como dividir la medida en píxeles por 10, de manera que lo que en píxeles son 400, en emes sean 40.

Con el objetivo de establecer el valor de 1em en 10px, surge esta conocida regla:

body{ font-size: 62.5%; } // 100% = 16px => 62.5% = 10px

Y ya tenemos la equivalencia deseada de 1em con 10px en todos los navegadores. En todos menos en Internet Explorer (todas las versiones, incluso el “superestándar” Internet Explorer 8 )

Toda esta explicación e introducción, probablemente innecesaria, viene a cuento de una nueva herramienta on line que he visto unas cuantas veces durante los últimos días en mis feeds. Se trata de PXtoEM.com, que se basa en la anterior regla para hacer la conversión de píxeles a emes.

Si no somos demasiado pejigueros, la regla del 62.5% es aceptable cuando sólo se van a usar emes para los tamaños de fuente, pero no es válida para hacer un diseño elástico, ya que en el momento que se empiecen a usar imágenes de fondo en capas, las cosas empezarán a no cuadrar en Internet Explorer.

¿Cuál es el problema en Internet Explorer?

Cómo comentan en un mail en la lista de correo de css-discuss.incutio.com, Internet Explorer ignora el decimal en el porcentaje (62.5%), con lo que la equivalencia conseguida es de 9.92px en vez de 10px.

Se puede comprobar utilizando una imagen de fondo en una capa a la que damos las dimensiones de la imagen de fondo. En esta página test, hay una capa con una imagen de fondo de 300 x 200 píxeles (el borde es interior). El estilo para esta página contiene solamente dos reglas:

body{ font-size: 62.5%; background: #ccc;}
.capa-test{width: 30em; height: 20em; background: url(fondo.gif) 0 0 no-repeat;}

Si vemos esta página con cualquier versión de Internet Explorer, veremos que la imagen de fondo no aparece completa, le faltan los bordes derecho e inferior.

Captura de Internet Explorer 6

Captura de Internet Explorer 7

Captura de Internet Explorer 8 Beta 2

La solución peligrosa.

Hay una solución que funciona, basada en establecer el tamaño de fuente del elemento HTML en 62.5%, el del BODY en 100% para los navegadores que no son Explorer y en 101% para Explorer, lo que supone tener que usar hacks o selectores para uno u otro navegador con los riesgos que esto conlleva. No sabemos si una futura versión de Opera, Firefox o cualquier otro navegador, soportará estos selectores CSS usados como filtros.

La solución más simple.

Si el problema de Internet Explorer es que ignora el decimal en el porcentaje, simplemente podemos solucionarlo buscando una medida redonda. Esta medida es 125%, que equivale a 20 píxeles.

Dando al BODY un font-size de 125% y al bloque contenedor de todos los elementos de la página un tamaño de fuente de 0.5em (la mitad de 20), conseguimos la equivalencia buscada de 1em = 10px sin usar hacks ni medidas erróneas.

En esta otra página test se puede ver el resultado y comprobar que Internet Explorer interpreta correctamente el tamaño de fuente. En este ejemplo se ha añadido una capa que contiene a la capa con la imagen de fondo, a la que se le ha dado un tamaño de fuente de 0.5em:

body{font-size: 125%; background: #ccc;}
#contenedor{font-size: .5em;}
.capa-test{width: 30em; height: 20em; background: url(fondo.gif) 0 0 no-repeat;}

Los resultados en Internet Explorer usando esta técnica:

Captura de Internet Explorer 6

Captura de Internet Explorer 7

Captura de Internet Explorer 8 Beta 2

Actualización (12/01/2009)

No es necesario dar un tamaño de fuente de 0.5em a la capa contenedora más externa, ya que podemos dar diréctamente el tamaño de 125% al elemento HTML y el de 0.5em al BODY. De esta forma nos ahorramos dar un tamaño de fuente para cada capa que se genere fuera del bloque contenedor, como suele ser el caso de ventanas modales, capas que contienen iconos de cargando, etc.

La CSS quedaría finalmente así:

html{ font-size: 125%; }
body{ font-size: .5em; }

Se puede ver el resultado en esta página.

Fuentes y más información

• Consumer Eroski (Visto aquí)
• Internet Explorer Win Bugs
• IE-Win percentages bug with CSS font-size