Pourquoi faut-il que + ou – soit entouré d’espaces blancs dans la méthode Calc ()?

Récemment, j’ai commencé à utiliser la méthode calc (…) dans CSS. J’ai rapidement appris que le code tel que: width: calc(100%-2) ne fonctionnerait pas, bien que l’ajout d’espace avant et après l’opérateur - corrigera le problème et la méthode calc fonctionnera correctement.

Après avoir fait quelques recherches, j’ai trouvé que de nombreux articles de blog mentionnent que l’espace blanc est requirejs et que beaucoup ont même indiqué la spécification ( CSS3 8.1.1 ) qui stipule:

De plus, des espaces sont requirejs des deux côtés des opérateurs + et -. (Les opérateurs * et / peuvent être utilisés sans les entourer.)

Maintenant, clairement, la spécification nous dit que ces opérateurs doivent être enveloppés dans des espaces blancs, mais pourquoi? J’ai lu plus loin dans la spécification (par les sections 8.1.2-4) et si cela est expliqué dans ces parties supplémentaires, je ne comprends pas le raisonnement.

En termes simples, peut-on expliquer pourquoi il a été spécifié que calc(100% - 1) ou même calc(100%/2) est une syntaxe acceptable mais non calc(100%-1) ?

Le caractère - est l’un des caractères autorisés dans les identifiants CSS. A en juger par la résolution donnée ici , il semble qu’ils voulaient éviter les ambiguïtés syntaxiques pouvant résulter de l’utilisation - sans espace, en particulier avec des valeurs de mots-clés telles que min-content (bien que les valeurs de mots-clés si j’ai tort).

Cependant, tout le monde n’est pas d’accord avec cette résolution.

Le Mozilla Developer Network l’ explique assez bien:

Note : Les opérateurs + et - doivent toujours être entourés d’espaces. L’opérande de calc(50% -8px) par exemple sera analysé en pourcentage suivi d’une longueur négative, une expression invalide, tandis que l’opérande de calc(50% - 8px) est un pourcentage suivi d’un signe moins et d’une longueur . Encore plus loin, calc(8px + -50%) est traité comme une longueur suivie d’un signe plus et d’un pourcentage négatif.

Les opérateurs * et / n’ont pas besoin d’espaces, mais leur ajout pour la cohérence est autorisé et recommandé.

Je pense que vous devriez d’abord considérer comment les CSS identifient une longueur. Une longueur est définie comme un signe facultatif suivi d’un module et d’une unité de mesure facultative (bien que de nombreuses propriétés l’exigent réellement):

  := [][] 

Ainsi, par exemple, les longueurs CSS valides sont les suivantes:

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

En définissant une longueur comme celle-ci, le moteur CSS parsing les éléments suivants:

 calc(100% -1px); 

comme une longueur suivie d’une autre longueur. Dans ce cas, il serait 100% suivi de -1px , ce qui n’a aucun sens pour calc() du tout. Ceci est également expliqué dans la page relative à la documentation MDN .

Pour mettre en relation deux longueurs, vous devez utiliser un opérateur distinct, donc, en suivant la logique ci-dessus, vous devrez utiliser des espaces blancs:

 calc(100% - 1px);