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

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

Una Kravets

À 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(), que agora têm suporte em todos os navegadores modernos, estão entre as ferramentas mais recentes para tornar sites e apps de criação mais dinâmicos e responsivos. É possível usar essas funções para controlar o dimensionamento e o redimensionamento dos 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 componentes.

Valores e unidades do CSS, nível 4

Suporte ao navegador

min()

max()

clamp()

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 max() faz a mesma coisa para o valor máximo.

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

É possível usar essas funções em qualquer lugar em que <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)).

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 os blocos de texto fiquem 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, ele usará 45ch como largura e, se 50% for maior que 75ch, ele usará 75ch.

Também é possível dividir esse valor 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.

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 o valor maior, o que significa que o elemento precisa ser 45ch ou mais largo.

Gerenciar padding

Também é possível usar max() para definir um tamanho mínimo de preenchimento. Este exemplo vem de CSS Trucks, em que o leitor Caluã de Lacerda Pataca compartilhou esta ideia: permitir que um elemento tenha mais padding em tamanhos de tela 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). Na folha de estilo, ela vai 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 de fonte, um tamanho máximo de fonte e permitir a escala entre esses tamanhos.

Antes de clamp(), projetar o dimensionamento de fonte, 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

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

Imagem de capa de @yer_a_wizard no Unsplash.