¿Qué es CSS clamp()?

En clamp() La función CSS permite definir un valor que puede crecer y decrecer pero nunca bajar de
un mínimo o subir de un máximo. Su firma es:

clamp(minimum, preferred, maximum)

Por ejemplo:

font-size: clamp(1rem, 2vw, 2.5rem);

Es decir:

• Mínimo: El tamaño de letra nunca será inferior a 1rem.
• Preferido (fluido): El navegador intentará utilizar 2vw (2% del ancho de la ventana gráfica).
• Máximo: El tamaño de la fuente nunca será superior a 2.5rem.

El resultado es un valor que se adapta a la anchura de la ventana gráfica pero se mantiene dentro de un rango seguro. Esto es ideal para la tipografía responsive y el espaciado, que debe ser fluido pero no romper el diseño.

Cómo evalúa clamp() sus argumentos

Los tres argumentos deben resolver el mismo tipo de valor (por ejemplo, todos deben resolver una longitud). Pueden utilizar unidades diferentes, siempre que el tipo calculado final coincida. Por eso es válido algo como esto:

font-size: clamp(16px, 1.5rem, 4vw);

Bajo el capó, el navegador calcula el valor preferido y luego lo sujeta para que nunca baje del mínimo ni suba del máximo.

Casos de uso comunes para clamp()

1. Tipografía fluida sin consultas de medios adicionales

En lugar de escribir consultas de medios separadas para los distintos títulos, puede utilizar clamp() para que los tamaños de fuente se escalen suavemente entre un mínimo y un máximo.

h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

De este modo, los encabezados resultan legibles en pantallas pequeñas y se evita que adquieran un tamaño cómico en pantallas muy anchas.

2. Espaciado sensible (márgenes, relleno, espacios)

Puede utilizar clamp() para un espaciado que se escala suavemente, mejorando el ritmo de la maquetación sin extra
puntos de ruptura:

.section {
  padding-inline: clamp(1rem, 4vw, 4rem);
  padding-block: clamp(2rem, 5vh, 6rem);
}

Esto permite que las secciones respiren más en las pantallas más grandes y se mantengan compactas en las más pequeñas.

3. Dimensionamiento de componentes con límites sensibles

Para tarjetas, botones y otros componentes de la interfaz de usuario, clamp() proporciona una forma de mantener las anchuras y alturas dentro de unos límites utilizables:

.card {
  width: clamp(260px, 60%, 480px);
}

La tarjeta puede crecer, pero sólo dentro de un rango que su diseño pueda manejar con seguridad.

4. Combinación de clamp() con propiedades personalizadas

clamp() se vuelve aún más potente cuando se combina con propiedades personalizadas CSS:

:root {
  --font-min: 1rem;
  --font-max: 2.5rem;
}

p {
  font-size: clamp(var(--font-min), 2vw, var(--font-max));
}

Esto hace que su sistema de diseño sea más fácil de ajustar: redefinir un par de variables puede ajustar grupos enteros de componentes.

¿Qué es CSS calc()?

En calc() permite realizar operaciones matemáticas en CSS. Toma una expresión y devuelve un único valor calculado. Puede sumar, restar, multiplicar y dividir valores, aunque utilicen unidades diferentes.

width: calc(100% - 2rem);

Esta opción es muy útil cuando el diseño depende de una combinación de unidades relativas y fijas.

Operaciones válidas en el interior calc()

• + (adición)
• - (resta)
• * (multiplicación)
• / (división)

Ejemplos:

.sidebar {
  width: calc(25% - 20px);
}

.main {
  width: calc(75% - 20px);
}

Aquí, cada columna tiene una anchura proporcional, pero tiene en cuenta un valor de medianil fijo.

Casos de uso comunes para calc()

1. Relaciones de disposición complejas

Los diseños a menudo necesitan «X es igual a 100% menos algo». calc() expresa esa lógica directamente:

.content {
  height: calc(100vh - 60px); /* viewport height minus fixed header height */
}

Esto es útil para diseños de altura completa en los que el contenido debe llenar el resto de la pantalla por debajo de un encabezado fijo.

2. Mezcla de diferentes unidades

Puede combinar porcentajes con píxeles, rems y unidades de ventana gráfica:

.container {
  max-width: calc(100% - 3rem);
  padding-inline: calc(1rem + 1vw);
}

Esto le permite ajustar el espaciado y el tamaño de una forma que los valores estáticos no pueden.

3. Alineación y desplazamiento precisos

calc() es útil cuando los elementos deben alinearse en relación con el tamaño de otro elemento o una combinación de factores.

.badge {
  position: absolute;
  top: calc(100% + 0.5rem); /* below its parent */
  left: 50%;
  transform: translateX(-50%);
}

En lugar de adivinar el desplazamiento de los píxeles, puede calcular la posición exacta basándose en las dimensiones existentes.

4. Utilización de calc() con propiedades personalizadas

Al igual que clamp(), calc() funciona muy bien con propiedades personalizadas:

:root {
  --sidebar-width: 280px;
}

.main {
  width: calc(100% - var(--sidebar-width));
}

Al cambiar --sidebar-width se actualiza el diseño sin necesidad de editar varias reglas.

Principales diferencias entre clamp() y calc()

A primera vista, ambas funciones tratan de números y unidades, pero representan ideas diferentes:

Puedes verlo de esta manera:

• clamp() = «Un valor que puede moverse, pero nunca más allá de estos límites».
• calc() = «Toma estos números y unidades y calcula un valor único».

Utilización conjunta de clamp() y calc()

Estas funciones no son mutuamente excluyentes. Puede anidar calc() dentro de clamp() para expresar lógica compleja con límites seguros:

font-size: clamp(1rem, calc(0.5rem + 2vw), 2.5rem);

Aquí, el valor preferido es en sí mismo un cálculo basado en la anchura de la ventana gráfica más un tamaño base. El mínimo y el máximo garantizan la legibilidad.

Un «lugar especial» donde no se debe utilizar clamp() o calc()

Aunque clamp() y calc() son potentes, hay situaciones en las que son innecesarios o pueden empeorar las cosas. Un «lugar especial» particularmente importante en el que hay que pensar detenidamente es el tamaño de la fuente raíz.

Tamaño de fuente raíz (html { font-size: ... }) y preferencias del usuario

Puede ser tentador utilizar clamp() en el tamaño de fuente raíz para que todo el sitio escale con fluidez:

html {
  font-size: clamp(14px, 1.5vw, 18px);
}

Esto parece atractivo, pero tiene un inconveniente importante: puede interferir con las preferencias del usuario. Muchos usuarios, especialmente los que tienen baja visión, aumentan el tamaño de la fuente por defecto en el navegador o en el sistema operativo. Cuando se controla agresivamente el tamaño de la fuente raíz con clamp() o la compleja lógica de calc(), se puede:

• Reducir la eficacia de sus ajustes personalizados.
• Hacer el texto más pequeño de lo que el usuario espera en algunas pantallas.
• Causar problemas de accesibilidad a las personas que dependen de valores por defecto más grandes.

Por este motivo, muchos desarrolladores preocupados por la accesibilidad prefieren:

• Deje html { font-size } como navegador por defecto (normalmente 16px).
• Utilice rem unidades en todo el diseño.
• Aplique clamp() a componentes o títulos específicos, no a la raíz.

En otras palabras, el «lugar especial» donde debe tener mucho cuidado al utilizar clamp() o calc() es el tamaño de fuente raíz, porque afecta directamente a la accesibilidad y al control del usuario.

Otras situaciones en las que conviene evitarlos

1. Animaciones y transiciones críticas

Puede utilizar calc() y clamp() en propiedades animadas, pero si la lógica es demasiado compleja, puede ser difícil de predecir y depurar. Para animaciones básicas, los valores simples son más fáciles de trabajar y razonar.

2. Compatibilidad con navegadores muy antiguos o heredados

En entornos que deben admitir navegadores antiguos (por ejemplo, aplicaciones empresariales heredadas que ejecutan versiones obsoletas), clamp() y calc() pueden no ser totalmente compatibles. En esos casos, es posible que:

• Proporcione primero un valor alternativo sencillo.
• A continuación, anúlelo con calc() o clamp() para los navegadores modernos.

.box {
  width: 100%;               /* fallback */
  width: calc(100% - 2rem);  /* enhanced */
}

3. Cuando basta con simples valores estáticos

A veces no es necesario que un diseño sea fluido para una propiedad concreta. Añadir o sólo hace que el CSS sea más difícil de entender. Si un valor nunca cambia a través de los puntos de interrupción, un valor fijo simple es a menudo la mejor opción.

Por qué debe utilizar clamp() y calc() en la mayoría de los demás lugares

Fuera de algunos casos especiales, clamp() y calc() puede mejorar drásticamente la calidad de su CSS.

1. CSS más limpio y expresivo

En lugar de múltiples consultas de medios como:

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem;
  }
}

Puedes escribir:

h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

Esto es más conciso, más fácil de mantener y proporciona transiciones más suaves entre tamaños en lugar de saltos bruscos en los puntos de ruptura.

2. Capacidad de respuesta real de los fluidos

El diseño responsive clásico solía significar «apilado en pantallas pequeñas, de lado a lado en pantallas grandes». Los patrones de diseño modernos prefieren un comportamiento más fluido. clamp() y calc() permiten definir reglas como:

• «El relleno crece con el ancho de la ventana gráfica, pero nunca supera este valor».
• «La barra lateral es el 25% de la anchura menos un espacio fijo».
• «Los botones se hacen más grandes en las pantallas grandes, pero siguen siendo utilizables en las pequeñas».

Ejemplo que combina ambos:

.button {
  padding-inline: clamp(0.75rem, 1rem + 1vw, 2rem);
  padding-block: clamp(0.5rem, 0.5rem + 0.5vw, 1rem);
  font-size: clamp(0.9rem, 1vw + 0.8rem, 1.2rem);
}

Esto hace que el botón se sienta «correcto» en una amplia gama de tamaños sin microajustar cada punto de rotura.

3. Diseños de futuro

Los dispositivos no dejan de cambiar: plegables, monitores ultraanchos, tabletas grandes, teléfonos pequeños. Escribir valores fijos para todos ellos no es realista. Al expresar relaciones en lugar de números fijos, tu CSS se adapta mejor a los nuevos dispositivos.

clamp() y calc() le ayudan a codificar reglas como «crezca con la ventana gráfica, pero manténgase dentro de este rango seguro» o «tenga este tamaño en relación con ese elemento». Estas reglas envejecen mejor que los puntos de ruptura fijos.

4. Mejores sistemas de diseño y tematización

Cuando se combinan:

• Propiedades personalizadas (var(--token))
• clamp() y calc()
• Nombres de clases semánticas (por ejemplo, .heading-xl, .space-lg)

se obtiene un sistema de diseño fácil de escalar y tematizar. Cambiando un par de fichas se puede ajustar el espaciado, la tipografía y el diseño de forma controlada y predecible.

5. Menos trucos de maquetación, CSS más intencionado

Antes de que estas funciones fueran habituales, los desarrolladores solían recurrir a valores de prueba y error y a números mágicos. calc() y clamp() le permiten describir la relación directamente:

.layout {
  /* instead of a random 732px that just "happens" to work */
  max-width: calc(1200px - 2 * 24px);
}

Esto hace que su CSS sea más auto-documentado: en el futuro usted (u otro desarrollador) puede mirar el código y entender de dónde vienen los números.

Conclusión

clamp() y calc() son dos de las herramientas más potentes del CSS moderno. No son
intercambiables, pero se complementan:

• Utilice clamp() para crear valores fluidos con límites mínimos y máximos seguros.
• Utilice calc() para expresar matemáticas de trazado, combinar unidades y definir relaciones precisas.
• Tenga mucho cuidado al utilizarlos en el tamaño de fuente raíz, donde más importan las preferencias del usuario y la accesibilidad.
• Utilícelos ampliamente para la tipografía, el espaciado, el tamaño de los componentes y la lógica de diseño en casi todas partes.

Una vez que te sientas cómodo con estas funciones, te darás cuenta de que muchos de tus viejos patrones de media-query-heavy pueden ser reemplazados por un puñado de expresivas y flexibles reglas CSS - y tus diseños se adaptarán más suavemente a lo que sea que traiga el futuro de los dispositivos. Otros comandos que realmente deberías conocer son vw y vh, lee más sobre ello aquí.

Wikipedia: Pinza (función)