Aprenda a controlar o dimensionamento de elementos, manter o espaçamento adequado e implementar uma tipografia fluida usando essas funções CSS compatíveis.
À 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,
Nível 4 de unidades e valores CSScalc()
,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 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 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. 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.
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.
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.
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);
}
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.
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
- Valores e unidades CSS no MDN
- Especificações de nível 4 de unidades e valores CSS
- Artigo de truques do CSS sobre a largura do elemento interno
- min(), max(), clamp() Visão geral por Ahmad Shadeed
Imagem de capa de @yer_a_assistant no Unsplash.