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

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

Una Kravets

À medida que o design responsivo se torna mais sutil, o CSS está em constante evolução para dar aos autores mais controle. As funções min(), max() e clamp(), agora compatíveis com todos os navegadores mais recentes, estão entre as ferramentas mais recentes para tornar a criação de sites e apps mais dinâmica e responsiva. Você pode usar essas funções para controlar o dimensionamento e o redimensionamento de elementos, manter o espaçamento entre eles 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.

Valores e unidades de CSS nível 4

Suporte ao navegador

min()

max()

clamp()

Uso

É possível usar min(), max() e clamp() no lado direito de qualquer expressão CSS em que isso faça sentido. Para min() e max(), você fornece uma lista de argumentos de valores, 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 max() faz o mesmo para o valor máximo.

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

É possível usar essas funções em qualquer lugar em que um <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> seja permitido. É 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)).

Veja 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 é amplamente considerada como um comprimento 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 os 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. Se 50% for maior que 75ch, ele usará 75ch.

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

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%);. Nesse caso, o navegador seleciona o valor maior, o que significa que o elemento precisa ter 45ch ou mais de largura.

Gerenciar padding

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 mais padding em telas maiores, mas manter 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). Na folha de estilo, ela deve ficar assim:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

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 e máximo de fonte e permitir o escalonamento entre esses tamanhos.

Antes do clamp(),, o dimensionamento de fontes exigia strings de estilo complexas. Agora, você pode deixar o navegador fazer o trabalho por 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 uma tipografia que se ajusta à largura da janela de visualização da página até atingir os valores mínimo e máximo, usando pouquíssimo código:

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

Mais recursos

• Valores e unidades de CSS no MDN
• Especificação de valores e unidades do CSS nível 4
• Artigo sobre truques de CSS na largura do elemento interno
• Visão geral de min(), max() e clamp() por Ahmad Shadeed