1. Las diferentes medidas
Como ya sabe, existen dos "formatos" para definir el tamaño de los caracteres:
- las medidas absolutas: cm, mm, in, pt... No es aconsejable usar esas medidas, ya que no son conformes a las recomendaciones de accesibilidad para los sitios web. Estas generan problemas de redimensión del texto en las páginas web para las personas con discapacidad visual.
- las medidas relativas: em y %. Es preferible usar estas unidades relativas, ya que se pueden redimensionar sin problemas. Para todos los navegadores, los tamaños son relativos al tamaño por defecto de los párrafos p: 1em = 100% = 16px.
2. El problema de la cascada
Las hojas de estilo se aplican en cascada. Esto implica que los tamaños también se aplican en cascada.
Veamos un ejemplo de una hoja de estilo:
body {
font-size: 1em;}
li {
font-size: .8em;
}
En esta sencilla página tenemos dos listas imbricadas:
<h1>Título de la página</h1>
<ul>
<li>Primero</li>
<li>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Segundo</li>
<li>Tercero</li>
</ul>
Este es el resultado visual:
¿Cómo se calcula el tamaño de los caracteres? El tamaño es de 1em a nivel del body, lo que determina que el tamaño mostrado y calculado sea de 16 píxeles para el texto normal. El h1 se calcula proporcionalmente a 2 em, es decir, 32
píxeles según el cálculo. Los elementos li de la primera lista son de 0.8em, es decir, 16x0.8=12.8 píxeles según el cálculo, así que se visualizarán a 13 píxeles. Los li de la segunda lista imbricada se calculan con la cascada a 16x0.8x0.8=10,24 píxeles, lo que quiere decir que se visualizarán a 10 píxeles. El tamaño en em se calcula en relación al elemento padre.
3. La nueva unidad rem
La nueva unidad rem del CSS3 realiza el cálculo en relación a la raíz de la página, en función del elemento html. La unidad rem significa root em. Podemos definir el tamaño relativo que deseemos para el elemento html con la unidad em, y luego todos los demás tamaños con la unidad rem. ¡Así no tendremos problemas con las cascadas!
Si volvemos al ejemplo anterior, ahora deberíamos indicar en la hoja de estilo:
html {
font-size: 1em;
}
body {
font-size: .8rem;
}
li {
font-size: .8rem;
}
Ya no tenemos ningún efecto de cascada en el cálculo del tamaño de los elementos. Todos los li tienen el mismo tamaño de carácter.
Twittear
No hay comentarios:
Publicar un comentario