Podcast de CSS - 008: Unidades de tamaño
La Web es un medio adaptable, pero a veces quieres controlar sus dimensiones para mejorar la calidad general de la interfaz. Un buen ejemplo de esto es limitar las longitudes de línea para mejorar la legibilidad. ¿Cómo lo harías en un medio flexible como la Web?
En este caso,
puedes usar una unidad ch, que es igual al ancho de un "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 sin importar el tamaño del texto.
La unidad ch es una de las pocas unidades que son útiles para contextos específicos como este ejemplo.
Numbers
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 (0.1, .2 y .3).
Los números tienen significado según su contexto.
Por ejemplo, cuando defines line-height,
un número es representativo de una proporción si lo defines sin una unidad de soporte:
p {
font-size: 24px;
line-height: 1.5;
}
En este ejemplo, 1.5 equivale al 150% del tamaño de fuente de píxeles procesados 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 utilizar en los siguientes lugares:
- Al establecer valores para los filtros:
filter: sepia(0.5)aplica un filtro sepia50%al elemento. - Cuando se establece la opacidad:
opacity: 0.5aplica una opacidad50%. - En canales de color:
rgb(50, 50, 50), donde los valores entre 0 y 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 un 120% de su tamaño inicial.
Porcentajes
Cuando usas un porcentaje en 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 use el valor predeterminado box-sizing: content-box.
Si estableces margin o padding como porcentaje,
serán una parte del ancho del elemento superior,
independientemente de 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 en 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 cuál será el ancho: 150px porque es el 50% del ancho de su elemento superior.
Luego, toma 10% de 150px, que es 15px.
Dimensiones y longitudes
Si vinculas una unidad a un número, esta se convierte en una dimensión.
Por ejemplo, 1rem es una dimensión.
En este contexto, la unidad adjunta a un número se denomina token de dimensión en las especificaciones.
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 dondequiera que se usen en tu CSS.
Por ejemplo, si usas cm para ajustar el tamaño del elemento y, luego, imprimirlo,
debería ser preciso si lo comparaste con una regla.
div {
width: 10cm;
height: 5cm;
background: black;
}
Si imprimiste esta página, 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 darle estilo al contenido impreso.
Las longitudes absolutas pueden ser realmente útiles a la hora de diseñar para la impresión.
| Unidad | Nombre | Equivale a |
|---|---|---|
| cm | Centímetros | 1cm = 96px/2.54 |
| mm | Milímetros | 1 mm = 1/10 de 1 cm |
| Q | Cuartos de milímetro | 1Q = 1/40 de 1 cm |
| in | Pulgadas | 1in = 2.54cm = 96px |
| pc | Picasa | 1 unidad = 1/6 de 1 in |
| pt | Puntos | 1 pt = 1/72 de 1 pulgada |
| px | Píxeles | 1 px = 1/96 de 1 in |
Longitudes relativas
Una longitud relativa se calcula con respecto a un valor base, similar a un porcentaje.
La diferencia entre estos y los porcentajes es que puedes ajustar el tamaño contextualmente a los elementos.
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 receptiva.
Unidades relativas del tamaño de fuente
CSS proporciona unidades útiles relacionadas con el tamaño de los elementos de la tipografía renderizada,
como el tamaño del texto (em unidades) o el ancho de los caracteres de tipografía (ch unidades).
| Unidad | en relación con: |
|---|---|
| em | En relación con el tamaño de la fuente, es decir, 1.5 em será un 50% más grande que el tamaño de fuente calculado base de su elemento superior. (Históricamente, la altura de la “M” mayúscula). |
| p. ej. | Heurística para determinar si se debe usar la altura x una letra "x" o ".5em" en el tamaño de fuente calculado actual del elemento. |
| límite | Altura de las letras mayúsculas en el tamaño de fuente calculado actual del elemento. |
| ch | Promedio de avance de caracteres de un glifo estrecho en la fuente del elemento (representado con el glifo "0"). |
| ic | Promedio avance de caracteres de un glifo de ancho completo en la fuente del elemento, según se representa con el símbolo "水" (Ideograma de agua CJK, U+6C34) glifo. |
| rem | El tamaño de fuente del elemento raíz (el valor predeterminado es 16 px). |
| lh | Es la altura de línea del elemento. |
| rlh | El alto de línea del elemento raíz. |
Unidades relativas de la vista del puerto
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 viewport. Esta unidad se usa para crear trucos geniales con fuentes, como cambiar el tamaño de la fuente de un encabezado en función del ancho de la página para que, a medida que el usuario cambie, también cambiará el tamaño de la fuente. |
| VH | el 1% de la altura de la viewport. Puedes usar esto para organizar los elementos en una IU, por ejemplo, si tienes una barra de herramientas en el pie de página. |
| vi | El 1% del tamaño del viewport en el eje de intercalado del elemento raíz. Axis se refiere a los modos de escritura. En modos de escritura horizontal, como inglés, el eje intercalado es horizontal. En los modos de escritura vertical, como en algunos tipos de letra japoneses, el eje intercalado se extiende de arriba abajo. |
| vb | Es 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 LTR, como el inglés, tendrían un eje de bloque vertical, ya que los lectores que hablan inglés analizan la página de arriba abajo. Un modo de escritura vertical tiene un eje de bloque horizontal. |
| vmin | Es el 1% de la dimensión más pequeña del viewport. |
| Campañas de máx. rendimiento | Corresponde al 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 porque 1vw es el 1% del ancho del viewport.
El elemento p tiene un max-width de 60ch
lo que significa que no puede superar el ancho de 60 “0”. caracteres en la fuente y el tamaño calculados.
Unidades varias
Hay algunas otras unidades que se especificaron para tratar con tipos de valores particulares.
Unidades angulares
En el módulo de color,
Analizamos las unidades de ángulo,
que son útiles para definir valores de grado,
como el tono 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 de deg, puedes rotar un elemento 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 esto es detectar
pantallas de muy alta resolución,
como las pantallas Retina en una consulta de medios y proporcionar una imagen de mayor resolución.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre el tamaño
¿Cuáles de las siguientes opciones son dimensiones válidas?
¿En qué se diferencian las unidades absolutas y relativas?
Las unidades de viewport son absolutas.