La necesidad de utilizar unidades relativas en vez de absolutas al desarrollar una página web accesible es el “punto 1″ de cualquier manual de diseño accesible. Tan obvio, que al menos el 75% de las webs que se dicen accesibles (incluyendo algunas de organismos de ámbito estatal) se lo saltan a la primera de cambio.
Así, en la realidad nos encontramos frecuentemente con sitios web que proclaman accesibilidad pero que incumplen de raíz esta cuestión. Y no porque no usen unidades relativas, que las usan, sino porque todas ellas las usan dentro de un contenedor CSS que, ni cortos ni perezosos, definen así: content {width:980px;}. A partir de ahí, todo lo relativo queda supeditado a ese absoluto, y el invento no puede funcionar….
La solución lógica es utilizar prioritariamente la unidad “em”, que sin ser tan predecible en su visualización como lo es el pixel, es al menos bastante más controlable que la utilización sistemática de los porcentajes (no digo que no se usen porcentajes, pero sí digo que con los em tendremos algo más de control).
Es fácil utilizar em? SÍ, es tan fácil como usar pixels, si tienes claras tres cosas fundamentales:
- ¿Cuánto mide un EM?. Según la definición formal, un em es “una unidad relativa que representa la altura de la fuente de un elemento”. Toma ya. Se entiende bien, no? Aquí empezamos a tropezar y a cogerle manía al em. Así que cortemos de raíz con este problema y hagamos una afirmación arriesgada pero que nos servirá para empezar bien nuestra relación con los em: Un EM mide 16 pixels. A que así es más fácil? ya hemos solucionado el problema de todas esas webs que empezaban su CSS con aquel content {width:980px;}. No tenemos mas que cambiarlo por content {width:61.25 em;}
- ¿Cuándo falla la regla 1?. Lo siento, no podía ser todo tan fácil, la regla 1 tiene excepciones y un EM no siempre mide 16 pixels. Si el estilo está definido para un elemento que está DENTRO de otro elemento en el cual se ha definido el tamaño de texto en em, la referencia ya no es a 16px sino a ese tamaño de textos. Por ejemplo, si el texto del elemento padre es tamaño 8px (0.5em hasta ese momento), dentro de ese elemento los estilos que definamos tendrán la equivalencia 1em=8px, y no 1em=16px.
- ¿Cómo evitar ese encadenamiento de dependencias?. Semánticamente, esa dependencia del elemento padre puede tener sentido, pero operativamente es un infierno. La mejor solución es además una buena práctica de CSS: separar los estilos de LAYOUT de los estilos de TEXTO:
Mal:
.tituloA { float:left; width:20em; text-align:right; font-size:0.625em; color:red; }
Bien:
.titulo { float:left; width:20em; text-align:right; }
.texto1 { font-size:0.625em; color:red;}
El resultado es aparentemente el mismo, pero en caso de que la maquetación se complique, y ese divisor tenga otros divisores dentro, si su clase incluye tamaño de fuente, esos divisores serán ya difíciles de manejar en su anchura, padding, margin… ya que todo usará ems relativos a ese 0.625
