Verificação HTML: CSS: X: Um operando deve ser um número.

Sobre este problema de CSS

Funções matemáticas CSS como calc(), min(), max() e clamp() seguem regras rigorosas sobre como operandos e operadores interagem. O erro “um operando deve ser um número” ocorre mais comummente em dois cenários: ou um operando está completamente em falta (por exemplo, calc(100% - )), ou ambos os operandos numa multiplicação ou divisão têm unidades (por exemplo, calc(10px * 5px)). A especificação CSS Values and Units requer que para * (multiplicação), pelo menos um lado deve ser um <number> sem unidade. Para / (divisão), o lado direito deve sempre ser um <number> sem unidade. Não pode multiplicar dois comprimentos juntos ou dividir um comprimento por outro comprimento dentro de calc().

Isto é importante por várias razões. Os navegadores descartarão toda a declaração da propriedade se a expressão calc() for inválida, o que pode causar quebras no layout ou recurso a valores padrão inesperados. O validador W3C deteta estes erros em atributos style inline e blocos <style> incorporados, ajudando-o a identificar expressões que falharão silenciosamente em produção. Corrigir estas questões garante renderização previsível em todos os navegadores.

Como funcionam as regras

Adição e subtração (+, -): Ambos os operandos devem ter tipos compatíveis (por exemplo, ambos comprimentos, ou ambas percentagens, ou uma mistura de comprimento e percentagem). Ambos devem estar presentes.
Multiplicação (*): Pelo menos um operando deve ser um <number> simples (sem unidade). Pode escrever calc(10px * 3) ou calc(3 * 10px), mas não calc(10px * 5px).
Divisão (/): O operando do lado direito deve ser um <number> simples (sem unidade e não-zero). Pode escrever calc(100px / 2), mas não calc(100px / 2px).

Exemplos

Operando em falta

Um erro comum é omitir um valor num lado de um operador:

<!-- ❌ Errado: operando em falta após o sinal de menos -->

<div style="width: calc(100% - );"></div>

<!-- ✅ Corrigido: ambos os operandos estão presentes -->

<div style="width: calc(100% - 50px);"></div>

Multiplicar dois valores com unidades

Não pode multiplicar dois valores com unidades juntos, porque o resultado seria um tipo sem sentido como “px²”:

<!-- ❌ Errado: ambos os operandos têm unidades -->

<div style="width: calc(10px * 5px);"></div>

<!-- ✅ Corrigido: um operando é um número sem unidade -->

<div style="width: calc(10px * 5);"></div>

Dividir por um valor com unidades

O divisor numa operação / deve ser um número sem unidade:

<!-- ❌ Errado: dividir por um valor com unidades -->

<div style="height: calc(500px / 2em);"></div>

<!-- ✅ Corrigido: divisor é um número sem unidade -->

<div style="height: calc(500px / 2);"></div>

`calc()` aninhado com um valor em falta

Erros podem esconder-se dentro de expressões aninhadas:

<!-- ❌ Errado: calc interno tem uma expressão incompleta -->

<p style="margin-top: calc(2rem + calc(100% * ));"></p>

<!-- ✅ Corrigido: todos os operandos estão presentes e válidos -->

<p style="margin-top: calc(2rem + calc(100% * 0.5));"></p>

Usar variáveis ou palavras-chave onde é esperado um número

Às vezes um erro tipográfico ou mal-entendido leva a um token não-numérico onde é necessário um número:

<!-- ❌ Errado: "auto" não é um operando válido em calc() -->

<div style="width: calc(auto * 2);"></div>

<!-- ✅ Corrigido: usar um valor numérico ou percentagem -->

<div style="width: calc(100% * 2);"></div>

Para resolver este erro, revise cada expressão calc(), min(), max() e clamp() nos seus estilos inline e folhas de estilo. Confirme que todos os operadores têm operandos válidos em ambos os lados, que * tem sempre pelo menos um número sem unidade, e que / tem sempre um número sem unidade à direita. Se está a construir expressões dinamicamente (por exemplo, via JavaScript ou um motor de templates), verifique duas vezes que as variáveis estão a ser interpoladas corretamente e não estão a produzir valores vazios ou inválidos.