Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

No más problemas con los “em”, puedes utilizar “rem”


  Publicado hace |  Etiquetas: , , , , , , , ,

Las formas de escribir CSS han cambiado mucho desde CSS3, ahora existen técnicas para ahorrar líneas de código, mejores practicas y propuestas para mejorar la estructura de escritura.

El problema con las unidades de medida anteriores

En este post vamos a tratar las unidades de medida, para los que utilizan aún los pixeles, quizás no tienen tanto problema pero ahora es una práctica muy vieja, repetir manualmente las medidas para cada elemento deja muy mal distribuidas las medidas y no tienen estética. Con em mejora todo, no tenemos que pensar en cuantos pixeles le pondremos a cada elemento, tan solo fijamos una medida fija en un elemento padre para heredarla, pero existe un problema muy grande, entre más padres tiene un elemento, la herencia del valor de los em se altera y esto significa manejar cuidadosamente esta unidad para no perder el valor deseado.

La solución con los rem

Para resolver esto en CSS3 tenemos la unidad “rem”, esta unidad sigue siendo em pero tiene una característica única que amarán todos los front-ends, la letra “r” significa “root”, lo que indica que el valor de esta unidad la hereda del primer padre de todos los nodos en CSS3, es decir “la raíz”

Un ejemplo sencillo de esto es:

/*Fijamos el tamaño de la raiz */
body{ font-size: 16px; }
/*Y heredamos el tamaño de la raiz */
article p{ font-size: 1rem; }

En este código tan solo heredamos en la etiqueta “p” el valor raíz, que en este caso es la etiqueta “body”, si la etiqueta article tuviera un valor establecido en el tamaño de “2em” por ejemplo, la etiqueta “p” no hereda ese valor por que establecimos que queremos el valor de la raíz.

Como ven, esto es realmente sencillo y no tenemos que volver a aprender nada, solo tienen que entender el uso de los “rem” para utilizarlos, ahora pueden disfrutar del CSS y dejar de sufrir con la herencia de los em.

El soporte de navegadores

Esta unidad no es tan nueva, desde que existe CSS3 ya la podíamos usar, por lo que navegadores como Chrome, Safari, Firefox e IE9+, ya lo soportan muy bien. Para navegadores viejos solo tenemos que usar pixeles primero y después volvemos a escribir con rem.

Coméntanos que tal te fue utilizando “rem” como unidad en tu código CSS, esperamos que te sea de utilidad.

comments powered by Disqus