Laboratorio de calc() en CSS

Funciones

• Escribe una expresión calc() con validación y evaluación en vivo
• ⚠️ Detecta la falta de espacios alrededor de + y −: calc(100%-2rem) es inválido y sin embargo parece correcto
• ⚠️ Comprueba las unidades: la suma exige magnitudes del mismo tipo y la multiplicación o división, un número sin unidad en un lado
• Entiende paréntesis y calc() anidado, y avisa de los que no están emparejados
• Emite el ancho del contenedor, el tamaño de fuente y la separación como propiedades personalizadas (--cw, --fs, --gap)
• Las expresiones pueden referirse a esas tres cantidades con var()
• La unidad se cambia entre px, rem, vw y % para ver cambiar el resultado
• Solo se entienden números, unidades, operadores, paréntesis y var(); no se ejecuta nada (sin eval)
• Todo se ejecuta en tu navegador y no se sube nada

Cómo se usa

1. Fija el ancho del contenedor, el tamaño de fuente y la separación, y elige una unidad
2. Escribe una expresión calc(...), dejando un espacio a cada lado de + y −
3. Lee las notas de evaluación y los mensajes de error de abajo
4. Copia el CSS generado, con las propiedades personalizadas y la regla juntas

Preguntas frecuentes

¿Por qué calc(100%-2rem) no hace nada si parece correcto?

Porque los operadores de suma y resta necesitan un espacio a cada lado. La especificación de CSS exige un espacio en blanco alrededor de `+` y `-` cuando actúan como operadores, así que `calc(100%-2rem)` es un valor inválido: el navegador descarta la declaración entera y la propiedad vuelve a su valor inicial o a auto. No hay error ni aviso, y eso es lo que lo hace tan difícil de encontrar. Escribir `calc(100% - 2rem)` lo arregla (la multiplicación y la división no necesitan espacios).

¿Por qué no vale 1px * 1px?

Porque la multiplicación en CSS multiplica también las unidades: `1px * 1px` da píxeles al cuadrado, y CSS no tiene esa unidad. Uno de los lados de una multiplicación o división tiene que ser un número sin unidad, así que lo que funciona es `1px * 2` o `6px / 2`. Es la parte de `calc()` que más se confunde con la aritmética normal.

¿Se ejecuta mi expresión como código?

No. Aquí no hay `eval`: eso ejecutaría como código lo que escriba el usuario. La validación pasa por un analizador pequeño que solo entiende números, unidades, los cuatro operadores, paréntesis y `var()`, y rechaza todo lo demás. De paso, `eval` tampoco detectaría el error de espacios de antes: leería `100%-2rem` tan contento como 98.

¿Un porcentaje es relativo a qué?

A aquello a lo que sea relativa la propiedad en la que lo uses. En `width` es la anchura del bloque contenedor; en `font-size`, el tamaño de fuente del padre. Así que lo que vale `100%` depende de en qué propiedad esté escrito. Por eso también las unidades relativas no se pueden reducir a una cifra concreta fuera de contexto: cuando hay unidades relativas de por medio, esta herramienta da el tipo de unidad y un valor de referencia en vez de inventarse un número de píxeles.