Y porque un desarrollador web profesional también debe conocer los pequeños detalles, perdón, los grandes detalles olvidados. Porque a un desarrollador web profesional debemos pedirle mucho mas que reproducir fielmente un diseño photoshop, debemos pedirle conocer y cumplir con esos detalles que el resto de los mortales no ve, que están detrás, en el lado oscuro, pero que existen.
Por eso hoy quiero hablar de un tema al que mucha gente no le da la mas mínima importancia, las unidades de medida de los elementos xhtml.
Cuando en nuestras css establecemos el tamaño de los diferentes elementos, desde margins paddings widths hasta el font-size de las fuentes, podemos hacerlo en varias unidades diferentes:
En unidades relativas:
- em: Aunque originalmente la unidad ‘em’ era equivalente a la altura de la letra M mayúscula, actualmente hace referencia simplemente al tamaño de la fuente instalada.
- ex: Altura de la letra x minúscula de la fuente utilizada.
- px: Esta unidad es relativa a la resolución de pantalla de nuestro dispositivo.
O en unidades absolutas:
- in: inches — 1 inch es igual a 2.54 centimetros.
- cm: centimetros.
- mm: milimetros.
- pt: points — los puntos usados por CSS 2.1 son iguales a 1/72nd por cada inch.
- pc: picas — 1 pica es igual a 12 points.
De todas las unidades anteriores siempre se recomienda utilizar unidades relativas en lugar de absolutas, a no ser que estemos diseñando un documento muy específico del que sepamos a seguro en que tipo de dispositivo se va a visualizar. De las unidades relativas se recomienda utilizar em, puesto que como vemos en la siguiente imagen la unidad px es dependiente de la resolución de pantalla, mientras que en em las distancias son proporcionales a los tamaños de fuente, por lo que si aumentamos el tamaño de la fuente se aumentan todas las distancias proporcionalmente. Así en la imagen vemos que 1px cubre 16 puntos en un documento impreso a láser de alta resolución, mientras que el mismo 1px solo cubre 1 punto en un monitor de baja resolución.
Tampoco me quiero olvidar de los porcentajes (%), siempre relativos al tamaño de pantalla o al elemento padre. Así pues podríamos tener un tamaño de fuente en nuestro documento de 1.1em (declarada en la clase body por ejemplo), y en todos sus elementos hijos ser un 10% mas pequeña por lo tanto declarada con un tamaño del 90% respecto al 1.1em de la clase padre.
Ya para finalizar os dejo 3 enlaces referencia que he utilizado para documentarme sobre este tema.
Referencia: http://www.w3.org/TR/CSS21/syndata.html#percentage-units
Tabla de equivalencias entre puntos, pixels, ems y portentajes http://www.reeddesign.co.uk/test/points-pixels.html.
Sintesis de buenas prácticas en el maquetado web http://www.w3.org/WAI/GL/css2em.htm.
Espero tener algo mas de tiempo para seguir posteando sobre estándares y accesibilidad web donde todavía tenemos mucho de que hablar.
Un saludo y solo si fuisteis buenos que os traigan muchos regalos.