Validación HTML: CSS: X: Un operando debe ser un número.

Acerca de este problema de CSS

Las funciones matemáticas de CSS como calc(), min(), max() y clamp() siguen reglas estrictas sobre cómo interactúan los operandos y operadores. El error “un operando debe ser un número” se produce más comúnmente en dos escenarios: o bien falta completamente un operando (ej., calc(100% - )), o ambos operandos en una multiplicación o división llevan unidades (ej., calc(10px * 5px)). La especificación de Valores y Unidades de CSS requiere que para * (multiplicación), al menos un lado debe ser un <number> sin unidades. Para / (división), el lado derecho siempre debe ser un <number> sin unidades. No puedes multiplicar dos longitudes juntas o dividir una longitud por otra longitud dentro de calc().

Esto importa por varias razones. Los navegadores descartarán toda la declaración de propiedad si la expresión calc() es inválida, lo cual puede causar rotura de diseño o recurrir a valores por defecto inesperados. El validador W3C detecta estos errores en atributos style en línea y bloques <style> integrados, ayudándote a identificar expresiones que fallarán silenciosamente en producción. Solucionar estos problemas asegura un renderizado predecible en todos los navegadores.

Cómo funcionan las reglas

Suma y resta (+, -): Ambos operandos deben tener tipos compatibles (ej., ambas longitudes, o ambos porcentajes, o una mezcla de longitud y porcentaje). Ambos deben estar presentes.
Multiplicación (*): Al menos un operando debe ser un <number> simple (sin unidades). Puedes escribir calc(10px * 3) o calc(3 * 10px), pero no calc(10px * 5px).
División (/): El operando del lado derecho debe ser un <number> simple (sin unidades y no cero). Puedes escribir calc(100px / 2), pero no calc(100px / 2px).

Ejemplos

Operando faltante

Un error común es omitir un valor en un lado del operador:

<!-- ❌ Incorrecto: falta el operando después del signo menos -->

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

<!-- ✅ Corregido: ambos operandos están presentes -->

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

Multiplicar dos valores con unidades

No puedes multiplicar dos valores que tengan unidades juntos, porque el resultado sería un tipo sin sentido como “px²”:

<!-- ❌ Incorrecto: ambos operandos tienen unidades -->

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

<!-- ✅ Corregido: un operando es un número sin unidades -->

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

Dividir por un valor con unidades

El divisor en una operación / debe ser un número sin unidades:

<!-- ❌ Incorrecto: dividiendo por un valor con unidades -->

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

<!-- ✅ Corregido: el divisor es un número sin unidades -->

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

`calc()` anidado con un valor faltante

Los errores pueden esconderse dentro de expresiones anidadas:

<!-- ❌ Incorrecto: el calc interno tiene una expresión incompleta -->

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

<!-- ✅ Corregido: todos los operandos están presentes y son válidos -->

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

Usar variables o palabras clave donde se espera un número

A veces un error tipográfico o malentendido lleva a un token no numérico donde se requiere un número:

<!-- ❌ Incorrecto: "auto" no es un operando válido en calc() -->

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

<!-- ✅ Corregido: usa un valor numérico o porcentaje -->

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

Para resolver este error, revisa cada expresión calc(), min(), max() y clamp() en tus estilos en línea y hojas de estilo. Confirma que todos los operadores tienen operandos válidos en ambos lados, que * siempre tiene al menos un número sin unidades, y que / siempre tiene un número sin unidades a la derecha. Si estás construyendo expresiones dinámicamente (ej., vía JavaScript o un motor de plantillas), verifica doblemente que las variables se están interpolando correctamente y no produciendo valores vacíos o inválidos.