Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

lunes, 26 de noviembre de 2007

Utilizando medidas accesibles

Cuando se lleva a cabo un diseño con CSS pueden definirse las medidas como absolutas o relativas.

Unidades absolutas

Pixel (px), centímetro (cm) y puntos (pt).
El px varía de un sistema operativo a otro; en Windows se representan 96px por pulgada, mientras que una Mac utiliza 72px por pulgada.
En cuanto a la utilización de pt depende de la resolución de pantalla del usuario.
Si bien el diseñador obtiene un control "exacto" del diseño, utilizar estas unidades le quita accesibilidad al sitio.

Unidades relativas

En la lista de recomendados, la misma la encabeza la unidad em.
Un em es la distancia equivalente al ancho de la letra m mayúscula; el ancho de dicha letra es que el que está definido por defecto en el navegador.
Así, cuando el tamaño por defecto sea de 16px una medida de 1.5em representará una fuente de 24px.

<style type="text/css">
body {
font-size: 100%;
}
h1 {
text-size: 1.5em;
}
#contenido {
text-size: .85em;
width: 30em;
background-color: #FFFFFF;
}
</style>

Esto es el principio de los diseños elásticos, principalmente cuando los divs, por ejemplo, son declarados con este método.
Para quien necesite llevar a cabo las conversiones de px a em pueden utilizar el Em Calculator
Em Calculator es una pequeña herramienta en JavaScript la cual ayuda a realizar diseños CSS escalables y accesibles. Convierte de pixel a una unidad relativa como em, basada en el text-size.
Conversión aproximada: puntos, pixels, ems y porcentajeCaptura de pantalla tomada de ReedDesign
Share:

Publicidad

Estadísticas

A cotidiano, me siguen