Gracias por seguir Google I/O. Mira contenido a pedido.

Se usó la API de Cloud Translation para traducir esta página.

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

Aprende a controlar el tamaño de los elementos, mantener el espaciado adecuado e implementar tipografía fluida con estas funciones de CSS compatibles.

Una Kravets

A medida que el diseño adaptable se vuelve más matizado, CSS evoluciona constantemente para brindar los autores aumentaron el control. La min(), max() y funciones clamp(), compatibles con todos los navegadores modernos, se encuentran entre las herramientas más recientes para crear crear sitios web y aplicaciones más dinámicos y responsivos. Puedes usar estas para controlar el tamaño y el cambio de tamaño de los elementos, mantener el espaciado y crear una tipografía flexible y fluida.

Las funciones matemáticas, calc(), min(), max() y clamp() permiten usar expresiones matemáticas con suma (+), resta (-), multiplicación (*) y división (/) como valores de componentes
Valores y unidades de CSS nivel 4

Navegadores compatibles

`min()`

Navegadores compatibles

Origen

`max()`

Navegadores compatibles

Origen

`clamp()`

Navegadores compatibles

Origen

Uso

Puedes usar min(), max() y clamp() en el lado derecho de cualquier CSS. expresión en la que tendría sentido. Para min() y max(), debes proporcionar un de valores de una lista de valores y el navegador determina más pequeña o 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 utiliza ese valor para el ancho del elemento.

. La función min() selecciona el valor mínimo de una lista de opciones en esta Demostración de CodePen.

La función max() hace lo mismo para el valor máximo.

. La función max() selecciona un valor de una lista de opciones en esta Demostración de CodePen.

Para usar clamp(), ingrese tres valores: un valor mínimo y un valor ideal para y un valor máximo.

. La función clamp() mantiene su valor entre el mínimo especificado y máximo en esta demostración de CodePen.

Puedes usar estas funciones en cualquier lugar donde un objeto <length>, <frequency>, Se permite <angle>, <time>, <percentage>, <number> o <integer>. Tú pueden usarlas 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 compuesta (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 los elementos de tipografía Estilo por Robert Bringhurst, "cualquier contenido de 45 a 75 caracteres se considera ampliamente longitud de línea satisfactoria para una página de una sola columna configurada en un formato de texto con serif en un tamaño de texto.

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

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

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

. Usa la función clamp() para establecer un ancho mínimo y máximo. Consulta la demostración en CodePen.

También puedes dividirlo solo con min() o max(). Si quieres que el elemento siempre tenga un ancho de 50% y no supere los 75ch de ancho en dispositivos de pantallas, usa width: min(75ch, 50%); para establecer el tamaño máximo.

. Usa la función min() para establecer un ancho máximo.

De la misma manera, puedes establecer un tamaño mínimo para texto legible con el elemento max() como en width: max(45ch, 50%);. Aquí, el navegador selecciona es mayor, lo que significa que el elemento debe ser 45ch o más ancho.

. Usa la función max() para establecer un ancho mínimo.

Administra el padding

También puedes usar max() para establecer un tamaño mínimo de padding. Este ejemplo proviene de Trucos para CSS, donde el lector Caluã de Lacerda Pataca compartió esta idea: “Dejar que un elemento tenga padding adicional en tamaños de pantalla más grandes, pero mantén un padding mínimo en pantallas más pequeñas tamaños de pantalla. Para ello, usa calc() o max() y resta el valor mínimo padding desde 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);
}

Establece un padding mínimo para un componente con la función max(). Consulta la demostración en CodePen.

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

. Usa clamp() para crear una tipografía fluida. Consulta la demostración en CodePen.

Antes de que clamp(), diseñara el escalamiento de fuente, se requerían cadenas de estilo complejas. Ahora, puedes dejar que el navegador haga el trabajo por ti. Cómo establecer la fuente mínima aceptable Tamaño (por ejemplo, 1.5rem para un título), tamaño máximo (como 3rem) y el tamaño ideal (como 5vw). Ahora tienes una tipografía que se ajusta a la escala de la página ancho del viewport hasta que alcance los valores mínimos y máximos limitantes, con muy poco código:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Más recursos

Imagen de portada de @yer_a_wizard en Salpicaduras.