Las unidades de CSS más raras que definitivamente no has usado

Como desarrollador uno tiende a dejar de lado a cosas como HTML y CSS. Es obvio, al fin y al cabo lo realmente complejo esta en los lenguajes de programación.

Pero esto hace que luego no terminemos de conocer todo lo que nos tienen que ofrecer cosas como CSS sin saber que hay mucho mas aparte de lo que normalmente estamos acostumbrados a ver, como:

padding: 10px;

margin: 1px 3px 4px 20px;

font-size: 16px;

width: 300px;
height: auto;

width: auto;
height: 600px;

Y… no tiene nada de malo. Pero a veces es interesante ver la funcionalidad no tan común. Cosas que te harán preguntarte ¿y esto qué demonio es?

font-size: 2rem;
padding: 3em 0.75em;
height: 80vh;
width: 50vw;
border: 2pc solid red;
margin: 10cm 15Q;

Si ya eres un erudito de las unidades probablemente no te sorprendan. Pero para desarrolladores mortales como yo fue una gran sorpresa ver cuantas opciones diferentes había.

Sin embargo con todo y todo hay unas que definitivamente son menos raras que otras. Si necesitas hacer un repaso de las más comunes puedes revisar: “Las unidades de CSS más comunes que debes estar usando“

Unidades absolutas

Las unidades absolutas funcionan exactamente como lo hace px. Solo que rara vez nos vemos en la necesidad de usar alguna otra de ellas.

index.html

    <body>
        <div class="box">
            <div class="child-box-1"></div>
            <div class="child-box-2"></div>
            <div class="child-box-3"></div>
            <div class="child-box-4"></div>
            <div class="child-box-5"></div>
        </div>
    </body>

styles.css

 .box {
    background-color: rosybrown;
    width: 6px;
    height: 5px;
}

.child-box-1 {
    background-color: seashell;
    width: 6cm;
    height: 5cm;
}
.child-box-2 {
    background-color: lightblue;
    width: 6mm;
    height: 5mm;
}
.child-box-3 {
    background-color:aquamarine;
    width: 6in;
    height: 5in;
}
.child-box-4 {
    background-color: lightslategrey;
    width: 6pt;
    height: 5pt;
}
.child-box-5 {
    background-color: lightcoral;
    width: 6pc;
    height: 5pc;
}

Como puedes ver todos los valores son los mismos. Pero el tamaño de cada elemento es bastante diferente. Veamos que significa cada unidad:

Unidad	Nombre	Equivalencia
px	pixeles	1px = 1/96 in
cm	centímetros	1cm = 37.8px = 25.2/64 in
mm	milímetros	1mm = 1/10 cm
in	pulgadas	1in = 2.54cm = 96px
pt	puntos	1pt = 1/72 in
pc	picas	1pc = 1/6 in
Q	cuartos de milímetro	1Q = 1/40 cm

Unidades relativas

ch

Es una unidad relativa que representa el ancho de un carácter. Pero no cualquier carácter. Sino el dígito 0.

ch viene del inglés “character” que se traduce precisamente a carácter.

Pero…¿para qué podríamos querer usar ch?

Bueno hay un buen caso de uso que puede ser que te haya pasado. Hay varios estudios relacionados a la cantidad óptima de carácteres en una línea y la regla dorada es que sea de entre 45 y 80 carácteres.

Implementar esto en un aplicativo no es tan directo como uno podría pensar al principio…bueno a menos que hubiera una unidad que nos ayudar a contar por carácteres en lugar de por otras mediciones.

index.html

    <body>
        <div class="box">
            <h1>Header</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum expedita quisquam error repellendus sint perspiciatis, accusantium nemo rem architecto laboriosam aspernatur consequuntur magnam reprehenderit dolores optio quaerat tempore. Repellat, nisi! Quisquam voluptatem, reprehenderit eum sint perspiciatis accusantium temporibus dolorem, consequatur maiores nemo, facilis amet! Consequuntur repellat eum voluptatum nisi, perspiciatis accusantium temporibus dolorem, consequatur maiores nemo, facilis amet! Quisquam voluptatem, reprehenderit eum sint perspiciatis accusantium temporibus dolorem, consequatur maiores nemo, facilis amet!</p>
        </div>
    </body>

styles.css

.box {
    background-color: rosybrown;
    width: 80ch;
}

vmin y vmax

vmin y vmax estan relacionadas intrínsecamente con el viewport (ventana gráfica). Si no recuerdas que son exactamente revisa: “ Las unidades de CSS más comunes que debes estar usando“

vmin es relativo a la dimensión más pequeña del viewport y vmax es relativo a la dimensión más grande del viewport.

1vmin = 1/100 de la dimensión más pequeña del viewport
1vmax = 1/100 de la dimensión más grande del viewport.

Esto quiere decir que por ejemplo con un monitor, vmin tomaría 1/100 del valor de más pequeño del viewport, es decir la altura, y por ende vmax tomaría el 1/100 del valor más grande, es decir el ancho. Y por supuesto para teléfonos estos valores son invertidos. (Aunque depende de la orientación del mismo).

index.html

<body>
        <div class="box">
            <h1>Header</h1>
            <p class="first">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p class="second">Voluptatum, numquam.</p>
        </div>
    </body>

styles.css

.box {
    position: relative;
    background-color: lightcoral;
    width: 50vmax;
    height: 50vmin;
}

Fijate en la imagen de abajo. Aproximadamente el recuadro abarca la mitad del ancho y la mitad del alto. Esto es porque le asignamos el 50 del vmax y del vmin respectivamente

ex

Es relativo a la altura de la actual letra minúscula “x” . Muy similar a ch, solo que en vez de basarse en el ancho de un carácter se basa en la altura.

index.html

<p class="text">x</p>

styles.css

.text {
    background-color: aquamarine;
    height: 10ex;
}

Y pues bueno ya tienes unas unidades de CSS raras agregadas a tu repertorio. No se si las uses…tal vez no, pero te sientes mas listo ¿no?