css - sirve - ¿Por qué debe a+o-estar rodeado de espacios en blanco desde el método Calc()?

label value html

Question

Recientemente comencé a usar el método calc (...) dentro de CSS. Aprendí rápidamente que el código como: width: calc(100%-2) no funcionará, aunque agregar espacio en blanco antes y después de que el operador solucione el problema y el método calc funcionará correctamente.

Después de investigar un poco, encontré varias publicaciones en blogs que hacen referencia al espacio en blanco y muchos incluso han señalado la especificación ( CSS3 8.1.1 ) que dice:

Además, se requiere espacio en blanco en ambos lados de los operadores + y -. (Los operadores * y / pueden usarse sin espacios en blanco a su alrededor).

Ahora, claramente, la especificación nos dice que estos operadores deben estar envueltos en espacios en blanco, pero ¿por qué? He leído más a fondo dentro de la especificación (a través de las secciones 8.1.2-4) y si se explica en estas porciones adicionales, no entiendo el razonamiento.

En términos simples, ¿podría alguien explicar por qué se especificó que calc(100% - 1) o incluso calc(100%/2) es una sintaxis aceptable pero no calc(100%-1) ?

Answer 1

Creo que primero debes considerar cómo los CSS identifican una longitud. Una longitud se define como un signo opcional seguido de un módulo y una unidad de medida opcional (aunque muchas propiedades realmente lo requieren):

<CSSlength> := [<sign>]<module>[<unit>]

Entonces, por ejemplo, las longitudes CSS válidas son:

-3px
100em
+10pc
0
91
5%

Al definir una longitud como esta, el motor CSS analiza lo siguiente:

calc(100% -1px);

como una longitud seguida por otra longitud. En este caso, sería 100% seguido de -1px , lo que no tiene sentido para calc() en absoluto. Esto también se explica en la página relativa a la documentación de MDN .

Para poner dos longitudes en relación necesita usar un operador distinto, por lo tanto, siguiendo la lógica anterior, necesitará usar espacios en blanco:

calc(100% - 1px);

Answer 2

El - carácter es uno de los caracteres permitidos en idents de CSS. A juzgar por la resolución dada here , parece que querían evitar las ambigüedades sintácticas que podrían surgir del uso - sin espacios en blanco, especialmente con valores de palabras clave como min-content (aunque los valores de las palabras clave AFAIK todavía no están permitidos dentro de calc() - corríjanme si estoy equivocado).

Sin embargo, no todos están de acuerdo con esta resolución.

Answer 3

La Red de desarrolladores de Mozilla lo explica bastante bien:

Nota : Los operadores + y - siempre deben estar rodeados por espacios en blanco. El operando de calc(50% -8px) por ejemplo, se analizará como un porcentaje seguido de una longitud negativa, una expresión no válida, mientras que el operando de calc(50% - 8px) es un porcentaje seguido de un signo menos y una longitud . Aún más, calc(8px + -50%) se trata como una longitud seguida de un signo más y un porcentaje negativo.

Los operadores * y / no requieren espacios en blanco, pero se permite y se lo agrega para mayor coherencia.