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

Acerca de este problema de CSS

Las funciones matemáticas 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” surge más comúnmente en dos escenarios: o 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 CSS Values and Units 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 que puede causar rotura del diseño o recurrir a valores predeterminados inesperados. El validador W3C detecta estos errores en atributos style en línea y bloques <style> incrustados, ayudándote a identificar expresiones que fallarán silenciosamente en producción. Corregir 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> puro (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> puro (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 de un operador:

<!-- ❌ Incorrecto: operando faltante 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: divisor es un número sin unidades -->

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

`calc()` anidado con un valor faltante

Los errores pueden ocultarse dentro de expresiones anidadas:

<!-- ❌ Incorrecto: 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 tengan operandos válidos en ambos lados, que * siempre tenga al menos un número sin unidades, y que / siempre tenga un número sin unidades a la derecha. Si estás construyendo expresiones dinámicamente (ej., a través de JavaScript o un motor de plantillas), verifica doblemente que las variables se estén interpolando correctamente y no produzcan valores vacíos o inválidos.