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

Sobre este problema de CSS

As 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” surge 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 contê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 ser sempre 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 de propriedade se a expressão calc() for inválida, o que pode causar falhas de layout ou recurso a valores predefinidos 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 estes problemas 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 do 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, 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

Os 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

Por 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: use um valor numérico ou percentagem -->

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

Para resolver este erro, reveja todas as expressões 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 do lado direito. Se estiver 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 produzem valores vazios ou inválidos.