Valores Absolutos em CSS com abs()

Você tem uma propriedade customizada CSS que pode ser positiva ou negativa dependendo do contexto, e precisa usá-la em algum lugar que aceita apenas valores positivos — como padding ou animation-delay. Antes de abs(), você recorria ao JavaScript ou escrevia uma solução verbosa com max(). Agora você pode lidar com isso diretamente no CSS.

O Que É a Função CSS abs()?

abs() é uma função matemática CSS da especificação CSS Values and Units Module Level 4. Ela recebe uma única expressão numérica e retorna seu valor absoluto — sempre não negativo, mesma unidade da entrada.

width: abs(-200px);         /* → 200px */
padding: abs(20px - 30px);  /* → 10px */
font-size: abs(-1.5rem);    /* → 1.5rem */

Funciona com números, comprimentos, porcentagens, ângulos e qualquer expressão que você escreveria dentro de calc(). As unidades são preservadas exatamente.

Sintaxe e Tipos de Valores Suportados

abs( <calc-sum> )

O argumento pode ser qualquer coisa que resolva para um valor numérico:

abs(-4)                /* número simples → 4 */
abs(-8vh)              /* comprimento → 8vh */
abs(-60%)              /* porcentagem → 60% */
abs(20% - 60%)         /* expressão → 40% */
abs(min(-20px, 10px))  /* função aninhada → 20px */

Um esclarecimento importante: abs() opera na expressão matemática que você fornece, mas valores como porcentagens ainda são resolvidos posteriormente de acordo com as regras normais da propriedade. Por exemplo, abs(25%) em background-position ainda é resolvido através da fórmula de dimensionamento dessa propriedade posteriormente.

Casos de Uso Práticos

Prevenindo Valores Negativos Inválidos de Propriedades Customizadas

Propriedades customizadas podem carregar valores com sinal que quebram certas propriedades CSS quando negativos.

:root {
  --offset: -30px; /* pode ser positivo ou negativo */
}

/* ❌ Antes: padding-top: -30px é inválido */
.card { padding-top: var(--offset); }

/* ✅ Depois: sempre resolve para 30px */
.card { padding-top: abs(var(--offset)); }

Este padrão é especialmente útil em design systems onde tokens podem ser definidos programaticamente.

Estabilizando animation-delay em Animações Simétricas

Ao calcular a distância de um índice central, a subtração pode resultar em negativo para elementos antes do centro. Um animation-delay negativo não adia o início — ele faz com que a animação comece no meio do seu ciclo, o que quebra a temporização simétrica da onda:

.bar {
  --distance: abs(var(--my-idx) - var(--center-idx));
  animation-delay: calc(var(--distance) * 0.1s);
}

Sem abs(), barras à esquerda do centro receberiam um delay negativo e pulariam para frente na animação em vez de esperar sua vez.

Cálculos de Espaçamento Responsivo

.section {
  gap: abs(10vw - 4rem); /* sempre um gap positivo, independente do viewport */
}

abs() vs. Outras Funções Matemáticas CSS

A solução alternativa com max() para valores absolutos — max(var(--x), calc(-1 * var(--x))) — funciona, mas é verbosa. Use-a apenas ao direcionar navegadores mais antigos que não têm suporte a abs().

Suporte de Navegadores e Alternativas

abs() é suportado em navegadores modernos incluindo versões recentes do Chrome, Edge, Firefox e Safari. O suporte é sólido nas versões atuais dos navegadores, mas versões mais antigas podem não tê-lo. Consulte Can I Use — abs() para dados de compatibilidade atualizados.

Para aprimoramento progressivo:

@supports not (width: abs(-10px)) {
  .element {
    padding: max(var(--val), calc(-1 * var(--val)));
  }
}

Armadilhas Comuns

abs() não funciona com palavras-chave CSS:

width: abs(auto);     /* ❌ inválido — auto não é uma expressão numérica */

Envolver calc() dentro de abs() é redundante:

width: abs(calc(50% - 100px)); /* ⚠️ funciona mas desnecessário */
width: abs(50% - 100px);       /* ✅ mais limpo */

abs() não é o mesmo que o abs() nativo do Sass — o Sass resolve em tempo de compilação com números sem unidade, enquanto o CSS abs() executa no navegador durante o layout e lida com dimensões adequadamente. Se você usa ambos, esteja ciente de que o Sass pode interceptar a chamada. Para passá-la para o CSS, você pode escrever abs(#{...}) ou usar a forma com namespace math.abs() para a versão Sass explicitamente.

Conclusão

abs() preenche uma lacuna real na matemática CSS: permite trabalhar com valores com sinal de forma segura, sem JavaScript ou soluções complicadas. Se você está construindo componentes que usam propriedades customizadas para espaçamento, temporização ou cálculos de layout, vale a pena adicionar à sua caixa de ferramentas agora que o suporte dos navegadores é sólido em motores modernos.

Perguntas Frequentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.