CSS min(), max() y clamp()

Aprende a controlar el tamaño de los elementos, mantener el espaciado adecuado y a implementar una tipografía fluida con estas funciones de CSS bien admitidas.

Una Kravets

A medida que el diseño responsivo se vuelve más detallado, el CSS evoluciona constantemente para brindar 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 los sitios web y las apps de autor sean más dinámicos y responsivos. Puedes usar estas funciones para controlar el tamaño de los elementos y cambiarlo, mantener el espaciado entre los elementos y crear una tipografía flexible y fluida.

Las funciones matemáticas, calc(), min(), max() y clamp() permiten que se usen expresiones matemáticas con suma (+), resta (-), multiplicación (*) y división (/) como valores de componentes.

Niveles 4 de valores y unidades de CSS

Navegadores compatibles

min()

max()

clamp()

Uso

Puedes usar min(), max() y clamp() en el lado derecho de cualquier expresión CSS donde tenga sentido. Para min() y max(), proporcionas 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 desde el que se realizará el cálculo y un valor máximo.

Puedes usar estas funciones en cualquier lugar donde se permita <length>, <frequency>, <angle>, <time>, <percentage>, <number> o <integer>. Puedes usarlas por sí solas (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 cosa de 45 a 75 caracteres se considera ampliamente como una longitud de línea satisfactoria para una página de una sola columna establecida en un tipo de letra con Serif en un tamaño de texto”.

Para asegurarte de que tus bloques de texto tengan entre 45 y 75 caracteres de ancho, usa clamp() y la unidad ch (avance de caracteres de 0 de ancho):

p {
  width: clamp(45ch, 50%, 75ch);
}

Esto permite que el navegador determine el ancho del párrafo. Establece el ancho en el 50% de forma predeterminada. Si un 50% es menor que 45ch, usa 45ch como ancho, y si el 50% es más ancho que 75ch, usa 75ch.

También puedes dividirlo con solo min() o max(). Si deseas que el elemento siempre tenga un ancho de 50% y no supere los 75ch de ancho 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 el texto legible con la función max(), como en width: max(45ch, 50%);. Aquí, el navegador selecciona el valor que sea más grande, lo que significa que el elemento debe ser 45ch o más ancho.

Administra el padding

También puedes usar max() para establecer un tamaño de padding mínimo. Este ejemplo proviene de CSS Tricks, en el 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 así:

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 de fuente mínimo y máximo, y permitir el escalamiento entre esos tamaños.

Antes de clamp(),, el diseño de escalamiento de fuentes 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 ajusta al 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
• Especificación de nivel 4 de valores y unidades de CSS
• Artículo de CSS Tricks sobre el ancho del elemento interno
• min(), max(), clamp() Descripción general de Ahmad Shadeed

Imagen de portada de @yer_a_wizard en Unsplash.