CSS min(), max() e clamp()

Aprenda a controlar o tamanho dos elementos, manter o espaçamento adequado e implementar tipografia fluida usando essas funções CSS com suporte.

À medida que o design responsivo se torna mais sutil, o CSS está em constante evolução para dar mais controle aos autores. As funções min(), max() e clamp(), agora compatíveis com todos os navegadores modernos, estão entre as ferramentas mais recentes para tornar a criação de sites e apps mais dinâmica e responsiva. É possível usar essas funções para controlar o tamanho e o redimensionamento de elementos, manter o espaçamento entre elementos e criar tipografia flexível e fluida.

As funções matemáticas calc(), min(), max() e clamp() permitem que expressões matemáticas com adição (+), subtração (-), multiplicação (*) e divisão (/) sejam usadas como valores de componentes.

Valores e unidades do CSS, nível 4

Suporte ao navegador

min()

Compatibilidade com navegadores

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Origem

max()

Compatibilidade com navegadores

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Origem

clamp()

Compatibilidade com navegadores

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Origem

Uso

Você pode usar min(), max() e clamp() no lado direito de qualquer expressão CSS em que faça sentido. Para min() e max(), você fornece uma lista de argumentos de valores e o navegador determina qual é o menor ou maior. Por exemplo, no caso de width: min(1rem, 50%, 10vw), o navegador calcula qual dessas unidades relativas é a menor e usa esse valor para a largura do elemento.

A função min() seleciona o valor mínimo de uma lista de opções nesta demonstração do CodePen.

A função max() faz a mesma coisa para o valor máximo.

A função max() seleciona um valor de uma lista de opções nesta demonstração do CodePen.

Para usar clamp(), insira três valores: um mínimo, um ideal para calcular e um máximo.

A função clamp() mantém o valor entre os valores mínimo e máximo especificados nesta demonstração do Codepen.

É possível usar essas funções em qualquer lugar em que <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> sejam permitidos. É possível usá-los sozinhos (como em font-size: max(0.5vw, 50%, 2rem)), com calc() (como em font-size: max(calc(0.5vw - 1em), 2rem)) ou compostos (como em font-size: max(min(0.5vw, 1em), 2rem)).

Confira a seguir alguns exemplos de como usar essas funções.

A largura perfeita

De acordo com The Elements of Typographic Style (link em inglês) de Robert Bringhurst, "qualquer coisa de 45 a 75 caracteres é considerada um comprimento de linha satisfatório para uma página de coluna única definida em uma fonte de texto com serifa em um tamanho de texto".

Para garantir que seus blocos de texto tenham entre 45 e 75 caracteres de largura, use clamp() e a unidade ch (avanço de caracteres de 0 largura):

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

Isso permite que o navegador determine a largura do parágrafo. Ele define a largura como 50% por padrão. Se 50% for menor que 45ch, 45ch será usado como largura. Se 50% for maior que 75ch, 75ch será usado.

Use a função clamp() para definir uma largura mínima e máxima. Confira a demonstração no Codepen.

Também é possível dividir usando apenas min() ou max(). Se você quiser que o elemento esteja sempre na largura 50% e não exceda 75ch em telas maiores, use width: min(75ch, 50%); para definir o tamanho máximo.

Use a função min() para definir a largura máxima.

Da mesma forma, é possível definir um tamanho mínimo para texto legível usando a função max(), como em width: max(45ch, 50%);. Aqui, o navegador seleciona o valor maior, o que significa que o elemento precisa ser 45ch ou mais largo.

Use a função max() para definir uma largura mínima.

Gerenciar preenchimento

Também é possível usar max() para definir um tamanho mínimo de padding. Este exemplo é do CSS Tricks, em que o leitor Caluã de Lacerda Pataca compartilhou esta ideia: permitir que um elemento tenha um padding adicional em tamanhos de tela maiores, mas manter um padding mínimo em tamanhos menores. Para fazer isso, use calc() ou max() e subtraia o padding mínimo dos dois lados do elemento: calc((100vw - var(--contentWidth)) / 2) ou max(2rem, 50vw - var(--contentWidth) / 2). Na folha de estilo, ela vai ficar assim:

footer {
 
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Defina um padding mínimo para um componente usando a função max(). Confira a demonstração no Codepen.

Tipografia fluida

Para ativar a tipografia fluida, Mike Riethmeuller popularizou uma técnica que usa a função clamp() para definir um tamanho mínimo de fonte, um tamanho máximo de fonte e permitir a escala entre esses tamanhos.

Use clamp() para criar uma tipografia fluida. Confira a demonstração no Codepen.

Antes do clamp(),, a criação de escalonamento de fontes exigia strings de estilo complexas. Agora, você pode deixar o navegador fazer o trabalho para você. Defina o tamanho mínimo de fonte aceitável (por exemplo, 1.5rem para um título), o tamanho máximo (como 3rem) e o tamanho ideal (como 5vw). Agora você tem uma tipografia que é dimensionada com a largura do viewport da página até atingir os valores mínimo e máximo, usando muito pouco código:

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

Mais recursos

Imagem de capa de @yer_a_wizard no Unsplash.