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
Valores e unidades do CSS, nível 4calc()
,min()
,max()
eclamp()
permitem que expressões matemáticas com adição (+), subtração (-), multiplicação (*) e divisão (/) sejam usadas como valores de componentes.
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>
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.
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.
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.
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);
}
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 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
- Valores e unidades do CSS no MDN (em inglês)
- 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.