Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

7 Unidades CSS De las Que Tal Vez No Sepas

by
Length:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Es fácil atorarse trabajando con las técnicas CSS que conocemos bien, pero hacerlo nos pone en desventaja cuando surgen nuevos problemas.

Mientras la web continua creciendo, la demanda por nuevas soluciones continuará también creciendo. Así pues, como diseñadores web y desarrolladores front-end, no tenemos opción más que conocer nuestro conjunto de herramientas, y conocerlo bien.

Esto significa saver incluso las herramientas de especialidad - las que no son usadas tan frecuentemente, pero cuando se necesitan, son exactamente la herramienta indicada para el trabajo.

El día de hoy, te voy a presentar algunas herramientas CSS que podrías no haber conocido antes. Estas herramientas son cada unidad de medida, como pixeles o ems, ¡pero es posible que nunca hayas escuchado de ellas! Comencemos.

rem

Comenzaremos con algo que es similar a algo que con lo que probablemente ya estás familiarizado. La unidad em es definida como el font-size actual. Así qué, por ejemplo, si estableces un tamaño de fuente en el elemento body, el valor em de cualquier elemento hijo dentro del cuerpo será igual a ese tamaño de fuente.

Aquí, hemos dicho que el div tendrá un font-size de 1.2em. Eso es 1.2 veces cualquier tamaño de fon-size que haya heredado, en este caso 14px. El resultado es 16.8px.

Sin embargo, qué pasa cuando pones en casada tamaños de fuente definidos en em dentro de otro. En el siguiente snippet aplicamos exactamente el mismo CSS que arriba. Cada div hereda su tamaño de fuente de su padre, dándonos gradualmente tamaños de fuente incrementados.

Mientras que esto sería deseable en algunos casos, frecuentemente querrás simplemente depender en una sola métrica contra la cuál escalar. En este caso, deberías usar rem. La "r" en rem significa "root"; esto es igual al font-size establecido en el elemento raíz; en la mayoría de los casos siendo este el elemento html.

En los tres divs anidados en el ejemplo anterior, la fuente evaluaría a 16.8px.

Bueno para Cuadrículas

Los Rems no son solo útiles para tamaño de fuente. Por ejemplo, podrías basar un sistema de cuadrícula entero o librería de estilo UI en el tamaño de fuente HTML raíz usando rem, y utilizar escala de em en lugares específicos. Esto te daría más tamaño de fuente y escalamiento predecible.

Conceptualmente, la idea detrás de una estrategia como esta es permitir a tu interface escalar al tamaño de tu contenido. Sin embargo, no necesariamente tendría sentido para cada caso.

¿Puedo usarlo?

Presentación: unidades rem (root em) en caniuse.com

vh y vw

Las técnicas de diseño web responsivo dependen fuertemente en reglas de porcentaje. Sin embargo, el porcentaje CSS no siempre es la mejor solución para cada problema. El ancho CSS es relativo al elemento padre contenedor más cercano. ¿Y si quisieras usar el ancho o alto del viewport en lugar del ancho del elemento padre? Esto es exactamente lo que proporcionan las unidades vh y vw.

El elemento vh es igual a 1/100 de la altura del viewport. Por ejemplo, si la altura del navegador es 900px, 1vh evaluaría a 9px. De manera similar, si el ancho del viewport 750px, 1vw evaluaría a 7.5px.

Hay aparentemente interminables usos para estas reglas. Por ejemplo, una manera muy sencilla de hacer diapositivas de alto completo o cerca de alto completo puede ser logrado con una sola línea de CSS:

Imagina que quisieras un encabezado que fue establecido para llenar el ancho de la pantalla. Para lograr esto, establecerías un tamaño de fuente en vw. Ese tamaño escalará al ancho del navegador.

¿Puedo usarlo?

Característica: Unidades viewport: vw, vh en caniuse.com

vmin y vmax

Mientras que vh y vm siempre están relacionadas a la altura y el ancho del viewport respectivamente, vmin y vmax están relacionadas al máximo y mínimo de aquellos anchos y altos, dependiendo de cuál es más pequeño y más grande. Por ejemplo, si el navegador está establecido a 1100px de ancho y 700px de alto, 1vmin sería 7px y 1vmax sería 11px. Sin embargo, si el ancho fue establecido a 800px y el alto establecido a 1080px, vmin sería igual a 8px mientras que vmax sería establecido a 10.8px.

Así qué, ¿cuándo usarías estos valores?

Imagina que necesitas un elemento que siempre está visible en la pantalla. Usando un alto y ancho establecido a valor vmin menos a 100 habilitaría esto. Por ejemplo, un elemento cuadrado que siempre toca al menos dos lados de la pantalla podría ser definido así:

Si necesitarás una caja cuadrada que siempre cubriera el viewport visible (toando los cuatro lados de la pantalla en todo momento), usa las mismas reglas excepto con vmax.

Combinaciones de estas reglas proporcionan una manera muy flexible de utilizar el tamaño de tu viewport en nuevas y emocionantes formas.

¿Puedo usarlo?

Característica: Unidades viewport: vmin, vmax en caniuse.com

ex y ch

Las unidades ex y ch, similares a em y rem, dependen de la fuente y tamaño de fuente actuales. Sin embargo, a diferencia de em y rem, estas unidades también dependen en la font-family, ya que se determinan basadas en medidas específicas de fuente.

La unidad ch, o la unidad de caracter es definida siendo la "medida avanzada" del ancho del caracter cero, 0. Alguna discusión interesante sobre lo que esto significa puede ser encontrado en el blog de Eric Meyer, pero el concepto básico es que, dada una fuente momoespaciada, una caja con un ancho de N unidades de caracter, tal como width: 40ch;, siempre puede contener una cadena con 40 caracteres en esa fuente particular. Mientas que los usos convencionales para esta regla particular se relacionan a poner braile, las posibilidades aquí para la creatividad ciertamente se extienden más allá de estas simples aplicaciones.

La unidad ex está definida como la "x-altura de la fuente actual O la mitad de un em". La x-altura de una fuente dada es la altura de la minúscula x de esa fuente. Frecuentemente, esto es cerca de la marca media de la fuente.

x-altura; la altura de la minúscula x (lee más sobre La Anatomía de la Tipografía Web)

Hay muchos usos para este tipo de unidad, la mayoría de ellos siendo para micro-ajustes tipográficos. Por ejemplo, el elemento sup, que significa superscript, puede ser empujado en la línea usando posición relativa y un valor automático de 1ex. De manera similar, puedes jalar un elemento superscript hacia abajo. El navegador hace que estos utilicen reglas superscript- y subscript- vertical-align por defecto, pero si quisieras control más granular, podrías manejar el tipo más explícitamente así:

¿Puedo Usarlo?

La  unidad ex ha estado presente desde CSS1, aunque no encontrarás mucho soporte sólido para la unidad ch. Para cosas específicas sobre soporte, revisa unidades y valores CSS en el blog de Eric Meyer.

Conclusión

Mantener un ojo en el desarrollo continuo y expansión de CSS es increíblemente importante para que puedas conocer todas las herramientas de tu conjunto de herramientas. Tal vez encuentres un problema particular que requiere una solución inesperada utilizando una de estás más oscuras unidades de medición. Toma tiempo para leer las nuevas especificaciones. Suscríbete para nuevas actualizaciones de grandes recursos como cssweekly. Y no olvides, regístrate ahora para actualizaciones semanales, cursos, ¡tutoriales gratuitos y recursos como este desde Diseño Web en Tuts+!

Lecturas Posteriores

Más bondades de unidades CSS.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.