CSS arraigado: tamaños de letra flexibles con REM
Las mejores prácticas para definir los tamaños de fuente se analizan en toda la web desde su creación. Además de los candidatos tradicionales, como px, em y %, rem representa una alternativa bastante nueva, tomando lo mejor de las otras unidades y combinándolas en una sola.
Pasado estándar: Tamaño de fuente por em o %
Hasta alrededor de 2008, definir los tamaños de fuente de la manera más flexible posible se consideraba una buena práctica. Para lograr esto, las unidades em o % donde se implementa, en relación con el estándar del navegador, que generalmente se define en 16px.
Esta combinación flexible sirvió para la mejor experiencia del usuario, ya que muchos navegadores no tenían zoom de página y IE6 no podía hacer zoom en el texto definido a través de px en absoluto. Al menos no sin alterar la configuración del sistema.
Un problema común es que con em así como % la herencia de los tamaños de letra tiene que ser relativa a algo. Los valores porcentuales son relativos por naturaleza, generalmente relacionados con su elemento principal. La unidad em no difiere mucho:
- En una propiedad de modelo de caja como
margin-bottom,emse relaciona con el tamaño de fuente del elemento en sí. Los cambios en el tamaño de la fuente provocan cambios en el margen, lo que podría ser un efecto deseado. - Por otro lado, las definiciones de tamaño de fuente usando
emsiempre se relacionan con el tamaño de fuente de su elemento principal. Poniendo un0.875emen juego conduce a una mayor disminución con cada anidación. Cuantas más anidaciones tenga, más pequeña será la fuente.
Me acuerdo de Las aventuras de Alicia en el país de las maravillas. Demasiado grande, demasiado pequeño, no se puede encontrar el ajuste perfecto.
La emancipación temporal de px
En febrero de 2009, el desarrollador alemán Jens Grochtdreis publicó una publicación titulada «Die leidige Sache mit der Schriftskalierung«, que podría haberse llamado algo así como «Annoying Facts On Font Scaling» si se hubiera publicado en inglés. Grochtdreis aconsejó a los lectores que busquen px. En ese momento, los navegadores modernos ya podían hacer zoom de forma nativa y la importancia de IE6 estaba en declive.
Un año después, el desarrollador alemán Gerrit van Aaken apoyó a Grochtdreis en su publicación «Warum ich Pixel para CSS-Schriftgrade verwende«, «Por qué uso píxeles para tamaños de letra CSS». No menos interesante que el artículo fue la discusión que comenzó justo debajo de la publicación. En el curso de esta disputa, un pequeño comentario, a saber #22 mencionó una unidad con el nombre de remque era casi totalmente desconocido hasta entonces.
«EM raíz»: remha nacido una nueva estrella
Desde algún momento de 2011, rem empezó a hacerse más conocida, lenta pero constantemente. Esto no es una sorpresa ya que rem combina las ventajas de px y em. No es menos flexible que su hermano mayor. empero soluciona las desventajas en términos de herencia, como rem siempre se relaciona con el elemento raíz <html>No a <body>.
Para obtener el valor de remdividimos el tamaño de picel deseado por el valor base 16. En CSS, así es como se vería correctamente una definición de tamaño de fuente:
html { font-size: 100%; } /* Browserdefault, 16px */
h1 { font-size: 1.75rem; } /* 28/16 = 1.75 */
h2 { font-size: 1.375rem; } /* 22/16 = 1.375 */
p { font-size: 0.875rem; } /* 14/16 = 0.875 */
De esta manera podemos construir rápidamente una cascada de tamaños de letra. Si llega un momento en el que desea que sus fuentes se vean más grandes o más pequeñas, solo necesita cambiar la base. La relación entre el texto del párrafo y los encabezados siempre será la misma.
Alternativa para navegadores más antiguos: px
Si esto suena demasiado bueno para ser verdad para tus oídos, tienes razón. Hay exactamente un inconveniente: los navegadores más antiguos. El servicio http://caniuse.com/rem te muestra qué esperar. Y, sinceramente, lo que puedes esperar es bastante:
Las desventajas de este método están asociadas, como siempre, con los nombres de los navegadores, esta vez, como siempre, IE anterior a la versión 9 y Opera Mini. Estos dos y posiblemente otros concursantes mayores hacen que la implementación de un respaldo basado en píxeles sea obligatoria. Dado el ejemplo anterior, esto podría verse así:
html { font-size: 100%; }
h1 {
font-size: 28px;
font-size: 1.75rem;
}
h2 {
font-size: 22px;
font-size: 1.375rem;
}
p {
font-size: 14px;
font-size: 0.875rem;
}
Los navegadores modernos leerán y sobrescribirán el px valor con el del rem unidad durante el curso de la cascada, mientras que los navegadores más antiguos se apegarán a la px instrucción e ignore la segunda línea. Justo como pensábamos que era…
Enlaces relacionados:
- Unidades En Defensa De Rem – Hora de la tecnología
- ¿Puedo usar unidades Rem? – caniuse.com
Artículo escrito por Peter Müller
(dpe)
#CSS #arraigado #tamaños #letra #flexibles #con #REM
