Aprende a controlar el tamaño de los elementos, mantener el espaciado adecuado e implementar tipografía fluida con estas funciones de CSS compatibles.
A medida que el diseño responsivo tiene más matices, CSS evoluciona constantemente para brindarles a los autores un mayor control. Las funciones min(), max() y clamp(), que ahora son compatibles con todos los navegadores modernos, se encuentran entre las herramientas más recientes para hacer que la creación de sitios web y apps sean más dinámicas y responsivos. Puedes usar estas funciones para controlar el tamaño y el cambio de tamaño de los elementos, mantener el espaciado entre ellos y crear una tipografía flexible y fluida.
Las funciones matemáticas,
Valores y unidades de CSS nivel 4calc(),min(),max()yclamp()permiten usar expresiones matemáticas con suma (+), resta (-), multiplicación (*) y división (/) como valores componentes.
Navegadores compatibles
min()
max()
clamp()
Uso
Puedes usar min(), max() y clamp() en el lado derecho de cualquier expresión de CSS cuando tenga sentido. Para min() y max(), debes proporcionar una lista de argumentos de valores, y el navegador determina cuál es el más pequeño o el más grande. Por ejemplo, en el caso de width: min(1rem, 50%, 10vw), el navegador calcula cuál de estas unidades relativas es la más pequeña y usa ese valor para el ancho del elemento.
La función max() hace lo mismo para el valor máximo.
Para usar clamp(), ingresa tres valores: un valor mínimo, un valor ideal a partir del cual
calcular y un valor máximo.
Puedes usar estas funciones siempre que se permita <length>, <frequency>, <angle>, <time>, <percentage>, <number> o <integer>. Puedes usarlos por su cuenta (como en font-size: max(0.5vw, 50%, 2rem)), con calc() (como en font-size: max(calc(0.5vw - 1em), 2rem)) o compuestas (como en font-size: max(min(0.5vw, 1em), 2rem)).
Los siguientes son algunos ejemplos de cómo usar estas funciones.
El ancho perfecto
Según The Elements of Typographic Style de Robert Bringhurst, "cualquier elemento de entre 45 y 75 caracteres se considera ampliamente como una longitud de línea satisfactoria en una página de una sola columna configurada en un tipo de texto con serif de tamaño de texto".
Para asegurarte de que los bloques de texto se mantengan entre 45 y 75 caracteres de ancho, usa clamp() y la unidad ch (avance de caracteres de ancho 0):
p {
width: clamp(45ch, 50%, 75ch);
}
Esto le permite al navegador determinar el ancho del párrafo. Establece el ancho en un 50% de forma predeterminada. Si el 50% es menor que 45ch, usa 45ch como ancho y, si el 50% es más ancho que 75ch, usa 75ch.
También puedes dividir esto solo con min() o max(). Si deseas que el elemento siempre tenga el ancho 50% y no exceda el ancho de 75ch en pantallas más grandes, usa width: min(75ch, 50%); para establecer el tamaño máximo.
De la misma manera, puedes establecer un tamaño mínimo para texto legible con la función max(), como en width: max(45ch, 50%);. Aquí, el navegador selecciona el valor que sea mayor, lo que significa que el elemento debe ser 45ch o más ancho.
Cómo administrar el padding
También puedes usar max() para establecer un tamaño mínimo de padding. Este ejemplo proviene de Trucos de CSS, en los que el lector Caluã de Lacerda Pataca compartió esta idea: permitir que un elemento tenga padding adicional en tamaños de pantalla más grandes, pero mantener un padding mínimo en tamaños de pantalla más pequeños. Para ello, usa calc() o max() y resta el padding mínimo de ambos lados del elemento: calc((100vw - var(--contentWidth)) / 2) o max(2rem, 50vw - var(--contentWidth) / 2). En tu hoja de estilo, debería verse de la siguiente manera:
footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Tipografía fluida
Para habilitar la tipografía fluida, Mike Riethmeuller popularizó una técnica que usa la función clamp() para establecer un tamaño mínimo y máximo de fuente, y permitir el escalamiento entre esos tamaños.
Antes de clamp(),, el diseño de la escala de fuente requería cadenas de estilo complejas. Ahora, puedes dejar que el navegador haga el trabajo por ti. Establece el tamaño de fuente mínimo aceptable (por ejemplo, 1.5rem para un título), el tamaño máximo (como 3rem) y el tamaño ideal (como 5vw). Ahora tienes una tipografía que se escala con el ancho del viewport de la página hasta que alcanza los valores mínimos y máximos limitantes, con muy poco código:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Más recursos
- Valores y unidades de CSS en MDN
- Especificaciones de unidades y valores de CSS de nivel 4
- Artículo de trucos de CSS sobre el ancho del elemento interno
- min(), max(), clamp() Descripción general de Ahmad Shadeed
Imagen de portada de @yer_a_wizard en Unsplash