sisifodichoso

Voy a hablar aquí de los tres tipos de unidades que utilizo:

• Unidades relativas:
  • Píxeles: px . Es “relativa” puesto que el tamaño que se ve depende del tamaño del pixel de tu monitor y, por tanto de la resolución de tu pantalla. Es pues “relativa entre dispositivos”.
  • em. “Más relativa” que la anterior. 1em es la altura del tamaño de fuente del elemento en que se utiliza. Así, si definimos el ancho de un elemento con 13em,
    #mielemento {
width:13em;
}
    lo que decimos es que su ancho es 13 veces la altura de la fuente que se emplea dentro de ese div (que puede estar definida explícitamente o ser un valor heredado)
• Unidades porcentuales. No es lo mismo definir unas medidas en em, que como hemos visto se refiere a la altura de la fuente, que definirlas de forma porcentual.
  #mielemento {
width:13%;
}
  Aquí lo que decimos es que mielemento tiene una anchura del 13% de su elemento padre. Las medidas porcentuales siempre están referidas a otras medidas anteriores y no siempre al tamaño de la fuente (aunque también se pueden establecer el tamaño de las fuentes con medidas porcentuales, referidas estas al primer tamaño definido o al predeterminado).

Nunca uso unidades absolutas como pt, mm o cm
Sigue leyendo “Unidades relativas y porcentuales”…

Me acabo de enterar, ayer ( ), de la diferencia entre diseño web líquido y elástico.

• En el diseño líquido, no predefinimos en la CSS los anchos de los contenedores, por lo que la página tiende a ocupar, como si de un líquido se tratara, todo el espacio que cada pantalla proporciona. Y esto está muy bien … hasta cierto punto. Por un lado, aprovecha todas las posibilidades en cada sistema, reduce el scroll horizontal y muestra mucha información de un solo vistazo. Pero, por otro, en grandes resoluciones el resultado puede ser desastroso, con laaaargas líneas de información incómodas de leer y un diseño de aspecto desparramado.
• En el diseño elástico, los anchos de los contenedores están definidos en em, por lo que dependen y se adaptan al tamaño de fuente elegido por el usuario. En bajas resoluciones y con el tamaño de fuente predeterminado, aparecen esas bonitas barras de scroll que tanto nos gustan

Doy ahora un paso más y me decido a cambiar mi css y definir los tamaños de fuente en unidades relativas.
¿Relativas? ¿Relativas a qué?
Al principio estaba convencida de que al menos tendría que definir un tamaño de fuente en pixels para que el resto se definiera de forma adecuada con respecto a éste. Pero no es así. Los navegadores que he probado: IExplorer, Firefox (Windows yLinux) y Opera (Windows y Linux) generan un tamaño de fuente por defecto de 16px. Así que las medidas pueden ser relativas con respecto de este tamaño ya desde el prinicpio, desde la definición de fuente en la etiqueta “body”.
¿Y por qué tengo que definir un tamaño relativo de fuentes si tanto en Firefox como en Opera puedo variar siempre el tamaño de las fuentes a voluntad?
Pues porque si tenemos una definición de tamaño en pixels IExplorer no nos dejará variar el tamaño de fuente, con el consiguiente problema de accesibilidad para los usuarios de este navegador.
¿Y por qué no cambian de navegador?
Algunos no podrán, otros sencillamente no querrán … Este blog tiene un número muy pequeño de visitas, pero me gustaría que si alguien no accede a sus contenidos sea porque no desea hacerlo y no porque no pueda.
¿Y por qué los tamaños que has definido ahora acaban todos en 6 o en 2?
La explicación la encontré aquí:

• http://bidwell.textdrive.com/pipermail/ovillo/2006-March/009017.html
• http://www.thenoodleincident.com/tutorials/typography/
  
• http://madross.com/web/how_to_size_text_with_css/

Así nos enteramos de que:

• El tamaño de fuente del 76% equivale a 12px.
• Para Opera, un tamaño de 75% equivale a 11px y no a 12px. Subir el tamaño a 76% uniformiza el resultado a 12px para los tres navegadores.
• El asunto está en que la definición de body se haga en % mientras que la del resto de tamaños puede hacerse en em. Aunque las dos formas serían equivalentes, parece que así nos evitamos resultados indeseados … pero esto no lo tengo tan claro …
• Y, por supuesto hay que probar y probar porque los resultados del redondeo pueden ser bastante extraños.