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 oferecer os autores aumentaram o controle. Os métodos min(), max() e clamp(), com suporte em todos os navegadores mais recentes, estão entre as ferramentas mais recentes para tornar à criação de sites e apps mais dinâmicos e responsivos. Você pode usar essas para controlar o dimensionamento e o redimensionamento dos elementos, manter o espaçamento entre elementos e criar 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 de CSS nível 4

Suporte ao navegador

min()

max()

clamp()

Uso

É possível usar min(), max() e clamp() no lado direito de qualquer CSS expressão que faria sentido. Para min() e max(), você fornece um lista de argumentos de posição 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 e um ideal calcular e um valor máximo.

Você pode usar essas funções em qualquer lugar que <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> são permitidos. Você podem usá-los por conta própria (como em font-size: max(0.5vw, 50%, 2rem)), com calc() (como em font-size: max(calc(0.5vw - 1em), 2rem)) ou composta (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 os elementos da tipografia Estilo por Robert Bringhurst, "qualquer coisa de 45 a 75 caracteres é amplamente considerada como uma comprimento satisfatório de linha para uma página de coluna única configurada 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 ch (avanço de caracteres de 0 largura) unidade:

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. em vez disso, e se 50% for maior que 75ch, ele usará 75ch.

Também é possível dividir usando apenas min() ou max(). Se você quiser que elemento sempre tenha 50% de largura e não exceda 75ch de largura em telas maiores telas, 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 o método max() função, 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 padding. Este exemplo vem de Truques do CSS, onde o leitor Caluã de Lacerda Pataca compartilhou esta ideia: deixar um elemento ter Padding adicional em tamanhos de tela maiores, mas manter um padding mínimo em telas menores os tamanhos de tela. Para fazer isso, use calc() ou max() e subtraia o valor mínimo padding dos dois lados do elemento: calc((100vw - var(--contentWidth)) / 2); ou max(2rem, 50vw - var(--contentWidth) / 2). Na sua folha de estilo, ele deve fica assim:

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

Tipografia fluida

Para ativar a tipografia fluida, faça o seguinte: 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 de clamp(), projetar o dimensionamento de fonte, exigia strings de estilo complexas. Agora, pode deixar o navegador fazer o trabalho por você. Defina a fonte mínima aceitável (por exemplo, 1.5rem para um título), tamanho máximo (como 3rem) e tamanho ideal (como 5vw). Agora você tem uma tipografia que se adapta ao tamanho da página largura da janela de visualização até atingir os valores máximo e mínimo, usando código muito pequeno:

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

Mais recursos

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

Imagem da capa de @yer_a_wizard em Desbravar.