El podcast de CSS 008: Sizing Units
La Web es un medio responsivo, pero a veces es conveniente controlar sus dimensiones para mejorar la calidad general de la interfaz. Un buen ejemplo es limitar la longitud de las líneas para mejorar la legibilidad. ¿Cómo harías eso en un medio flexible como la Web?
En este caso, puedes usar una unidad ch
, que equivale al ancho de un carácter "0" en la fuente renderizada en su tamaño calculado.
Esta unidad te permite limitar el ancho del texto con una unidad diseñada para ajustar el tamaño del texto, lo que, a su vez, permite un control predecible, independientemente del tamaño de ese texto.
La unidad ch
es una de las pocas unidades que son útiles para contextos específicos, como este ejemplo.
Números
Los números se usan para definir opacity
, line-height
e incluso para valores de canal de color en rgb
.
Los números son números enteros sin unidades (1, 2, 3, 100) y decimales (.1, .2, .3).
Los números tienen un significado según su contexto.
Por ejemplo, cuando defines line-height
, un número es representativo de una proporción si la defines sin una unidad de compatibilidad:
p {
font-size: 24px;
line-height: 1.5;
}
En este ejemplo, 1.5
es igual al 150% del tamaño de fuente de píxeles calculados del elemento p
.
Esto significa que si p
tiene un font-size
de 24px
, la altura de la línea se calculará como 36px
.
Los números también se pueden usar en los siguientes lugares:
- Cuando se establecen valores para los filtros,
filter: sepia(0.5)
aplica un filtro sepia50%
al elemento. - Cuando se configura la opacidad,
opacity: 0.5
aplica una opacidad50%
. - En los canales de color:
rgb(50, 50, 50)
, donde los valores de 0 a 255 son aceptables para establecer un valor de color. Consulta la lección sobre colores. - Para transformar un elemento,
transform: scale(1.2)
escala el elemento en un 120% de su tamaño inicial.
Porcentajes
Cuando usas un porcentaje en el CSS, debes saber cómo se calcula.
Por ejemplo,width
se calcula como un porcentaje del ancho disponible en el elemento superior.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%;
}
En el ejemplo anterior, el ancho de div p
es 150px
, suponiendo que el diseño usa el box-sizing: content-box
predeterminado.
Si configuras margin
o padding
como un porcentaje, serán una parte del ancho del elemento superior, sin importar la dirección.
div {
width: 300px;
height: 100px;
}
div p {
margin-top: 50%; /* calculated: 150px */
padding-left: 50%; /* calculated: 150px */
}
En el fragmento anterior, margin-top
y padding-left
se calcularán como 150px
.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
transform: translateX(10%); /* calculated: 15px */
}
Si estableces un valor transform
como porcentaje, se basa en el elemento con el conjunto de transformación.
En este ejemplo, p
tiene un valor translateX
de 10%
y un width
de 50%
.
Primero, calcula el ancho: 150px
, porque ocupa el 50% del ancho de su elemento superior.
Luego, toma 10%
de 150px
, que es 15px
.
Dimensiones y longitudes
Si adjuntas una unidad a un número, se convierte en una dimensión.
Por ejemplo, 1rem
es una dimensión.
En este contexto, la unidad que se adjunta a un número se conoce en las especificaciones como un token de dimensión.
Las longitudes son dimensiones que hacen referencia a la distancia y pueden ser absolutas o relativas.
Longitudes absolutas
Todas las longitudes absolutas se resuelven en la misma base, lo que las hace predecibles en cualquier lugar que se usen en tu CSS.
Por ejemplo, si usas cm
para ajustar el tamaño de tu elemento y, luego, imprimir, debería ser preciso si lo comparas con una regla.
div {
width: 10cm;
height: 5cm;
background: black;
}
Si imprimiras esta página, la div
se imprimiría como un rectángulo negro de 10 x 5 cm.
Ten en cuenta que CSS se usa no solo para el contenido digital, sino también para diseñar el contenido impreso.
Las longitudes absolutas pueden resultar útiles a la hora de diseñar contenido impreso.
Unidad | Nombre | Equivale a |
---|---|---|
cm | Centímetros | 1cm = 96px/2.54 |
mm | Milímetros | 1 mm = 1/10 de 1 cm |
P | Un cuarto de milímetro | 1Q = 1/40 de 1 cm |
in | Pulgadas | 1 pulgadas = 2.54 cm = 96 px |
pc | Fotos | 1pc = 1/6 de 1in |
pt | Puntos | 1 pt = 1/72 de 1 in |
px | Píxeles | 1 px = 1/96 de 1 in |
Longitudes relativas
Una longitud relativa se calcula con un valor base, de manera similar a un porcentaje.
La diferencia entre estos y los porcentajes es que puedes ajustar el tamaño de los elementos contextualmente.
Esto significa que CSS tiene unidades, como ch
, que usan el tamaño del texto como base, y vw
, que se basa en el ancho del viewport (la ventana de tu navegador).
Las longitudes relativas son particularmente útiles en la Web debido a su naturaleza responsiva.
Unidades relativas del tamaño de fuente
CSS proporciona unidades útiles que son relativas al tamaño de los elementos de la tipografía renderizada, como el tamaño del texto (unidades em
) o el ancho de los caracteres de los tipos de letra (unidades ch
).
Unidad | en relación con: |
---|---|
en | En relación con el tamaño de la fuente, es decir, 1.5em será un 50% más grande que el tamaño de fuente calculado base de su elemento superior. (Históricamente, es la altura de la letra "M" mayúscula). |
p. ej. | Heurística para determinar si se debe usar la altura de x, una letra "x" o ".5em" en el tamaño de fuente procesado actualmente del elemento. |
mayúscula | Altura de las letras mayúsculas en el tamaño de la fuente calculada actual del elemento. |
ch | Avance de caracteres promedio de un glifo estrecho en la fuente del elemento (representada por el glifo "0"). |
ic | El avance de caracteres promedio de un glifo de ancho completo en la fuente del elemento, como se representa con el glifo “水” (ideograma de agua CJK, U+6C34). |
rem | El tamaño de fuente del elemento raíz (el valor predeterminado es de 16 px). |
lh | Es la altura de línea del elemento. |
rlh | Altura de línea del elemento raíz. |
Unidades relativas del viewport
Puedes usar las dimensiones del viewport (ventana del navegador) como base relativa. Estas unidades forman parte del espacio de viewport disponible.
Unidad | en relación con |
---|---|
vw | 1% del ancho de la vista del puerto. Las personas usan esta unidad para realizar trucos interesantes de fuentes, como cambiar el tamaño de una fuente del encabezado en función del ancho de la página, de modo que, a medida que el usuario cambie el tamaño, también cambie el tamaño de la fuente. |
VH | el 1% de la altura del viewport Puedes usar esto para organizar los elementos en una IU, por ejemplo, si tienes una barra de herramientas de pie de página. |
vi | El 1% del tamaño del viewport en el eje intercalado del elemento raíz. El eje se refiere a los modos de escritura. En los modos de escritura horizontales, como el inglés, el eje intercalado es horizontal. En los modos de escritura vertical, como algunos tipos de letra japoneses, el eje intercalado va de arriba abajo. |
vb | El 1% del tamaño del viewport en el eje de bloque del elemento raíz. Para el eje de bloque, esta sería la direccionalidad del idioma. Los idiomas de izquierda a derecha, como el inglés, tendrían un eje de bloque vertical, ya que los lectores en inglés analizan la página de arriba abajo. Un modo de escritura vertical tiene un eje de bloque horizontal. |
vmin | El 1% de la dimensión más pequeña del viewport. |
campaña de máx. rendimiento | El 1% de la dimensión más grande del viewport. |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
En este ejemplo, div
será el 10% del ancho del viewport, ya que 1vw
es el 1% del ancho del viewport.
El elemento p
tiene un max-width
de 60ch
, lo que significa que no puede exceder el ancho de 60 caracteres "0" en la fuente y el tamaño calculados.
Unidades varias
Hay algunas otras unidades que se han especificado para trabajar con determinados tipos de valores.
Unidades de ángulo
En el módulo de color, analizamos las unidades de ángulo, que son útiles para definir valores de grado, como el matiz en hsl
.
También son útiles para rotar elementos dentro de las funciones de transformación.
div {
width: 150px;
height: 150px;
transform: rotate(60deg);
}
Con la unidad de ángulo deg
, puedes rotar un div
90° en su eje central.
div {
background-image: url('a-low-resolution-image.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div {
background-image: url('a-high-resolution-image.jpg');
}
}
Unidades de resolución
En el ejemplo anterior, el valor de min-resolution
es 192dpi
.
La unidad dpi
significa puntos por pulgada.
Un contexto útil para ello es detectar pantallas de muy alta resolución, como las pantallas Retina en una consulta de medios, y mostrar una imagen de mayor resolución.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre las tallas
¿Cuáles de las siguientes son dimensiones válidas?
¿En qué se diferencian las unidades absolutas y relativas?
Las unidades de viewport son absolutas.