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

Aprenda a controlar o dimensionamento de elementos, manter o espaçamento adequado e implementar uma tipografia fluida usando essas funções CSS compatíveis.

Una Kravets

À medida que o design responsivo se torna mais variado, o CSS está em constante evolução para oferecer 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âmico e responsivo. Você pode usar essas funções para controlar o dimensionamento e o redimensionamento de elementos, manter o espaçamento entre elementos e criar uma 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.

Nível 4 de unidades e valores CSS

Suporte ao navegador

min()

Compatibilidade com navegadores

  • 79
  • 79
  • 75
  • 11.1

Origem

max()

Compatibilidade com navegadores

  • 79
  • 79
  • 75
  • 11.1

Origem

clamp()

Compatibilidade com navegadores

  • 79
  • 79
  • 75
  • 13.1

Origem

Uso

Você pode usar min(), max() e clamp() no lado direito de qualquer expressão CSS em que isso fizer sentido. Para min() e max(), você fornece uma lista de valores de argumentos, e o navegador determina qual é o menor ou o 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 o mesmo 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 valor mínimo, um valor ideal para calcular e um valor máximo.

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

É possível usar essas funções em qualquer lugar em que um <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> seja permitido. Você pode 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 abaixo alguns exemplos de como usar essas funções.

A largura perfeita

De acordo com The Elements of Typographic Style, de Robert Bringhurst, "qualquer coisa de 45 a 75 caracteres é amplamente considerado um tamanho de linha satisfatório para uma página de coluna única definida em uma face 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 largura 0):

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, ele usará 45ch como a largura, e se 50% for mais largo 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 separar usando apenas min() ou max(). Se você quiser que o elemento tenha sempre a largura de 50% e não exceda 75ch de largura em telas maiores, use width: min(75ch, 50%); para definir o tamanho máximo.

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

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

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

Gerenciar padding

Também é possível usar max() para definir um tamanho mínimo de padding. Este exemplo vem de Tricks do CSS (link em inglês), em que o leitor Caluã de Lacerda Pataca compartilhou esta ideia: fazer com que um elemento tenha mais padding em telas maiores, mas mantenha um padding mínimo em telas 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). Sua folha de estilo deve ter a seguinte aparência:

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 (link em inglês), Mike Riethmeuller popularizou uma técnica que usa a função clamp() para definir os tamanhos mínimo e máximo e permitir o dimensionamento entre esses tamanhos.

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

Antes de clamp(),, o design do dimensionamento de fontes exigia strings de estilo complexas. Agora, é possível deixar o navegador fazer o trabalho para você. Defina o tamanho mínimo aceitável da fonte (por exemplo, 1.5rem para um título), o tamanho máximo (como 3rem) e o tamanho ideal (como 5vw). Agora você tem tipografia que é dimensionada com a largura da janela de visualização 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_assistant no Unsplash.