Pourquoi un + ou - doit-il être entouré d'espaces à partir de la méthode Calc ()?

Question

Récemment, j'ai commencé à utiliser le calc(...) la méthode dans le CSS. J'ai vite appris que le code tel que: width: calc(100%-2) ne fonctionnera pas, même si l'ajout d'un espace blanc avant et après l' - opérateur de résoudre le problème et le calc méthode va fonctionner correctement.

Après avoir fait un peu de recherche, j'ai trouvé plusieurs posts de blog de référence que le blanc de l'espace est nécessaire, et de nombreux ont même fait de la spécificationCSS3 8.1.1) qui stipule:

En outre, l'espace est requise sur les deux côtés de l' + et - des opérateurs. (*Et / operaters peut être utilisé sans les espaces autour d'eux.)

Maintenant, clairement, le spec nous dit que ces opérateurs doivent être enveloppé dans un espace blanc, mais pourquoi? J'ai lu plus loin dans la spécification (par le biais de sections 8.1.2-4) et si c'est expliqué dans ces parties, je ne comprends pas le raisonnement.

En termes simples, quelqu'un pourrait-il expliquer pourquoi il a été précisé qu' calc(100% - 1) ou même calc(100%/2) est acceptable de la syntaxe, mais pas calc(100%-1)?

Answer 1

L' - personnage est un des caractères autorisés en CSS idents. À en juger par la résolution donnée ici, il semble qu'ils voulaient éviter des ambiguïtés syntaxiques qui pourraient résulter de l'utilisation de - sans les espaces, en particulier avec les valeurs de mots clés tels que l' min-content (autant que je sache, bien que les valeurs de mots clés ne sont pas encore autorisés dans l' calc() - corrigez-moi si je me trompe).

Pas tout le monde est d'accord avec cette résolution, bien que.

Answer 2

Le Mozilla Developer Network , l'explique très bien:

Remarque: L' + et - les opérateurs doivent toujours être entouré par des espaces. L'opérande de calc(50% -8px) par exemple sera analysé comme un pourcentage suivie d'une longueur négative, une défaillance de l'expression, tandis que l'opérande de calc(50% - 8px) est un pourcentage suivi d'un tiret et d'une longueur. Encore plus loin, calc(8px + -50%) est considérée comme une longueur suivie par un signe plus et un pourcentage négatif.

L' * et / - opérateurs ne nécessite pas d'espace, mais de l'ajouter à des fins de cohérence est autorisé et recommandé.

Answer 3

Je pense que vous devriez d'abord examiner comment CSSs identifier une longueur. Une longueur est définie comme étant un signe optionnel, suivi par un module et une option de l'unité de mesure (bien que de nombreuses propriétés ont réellement besoin):

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

Ainsi, par exemple, CSS valide les longueurs sont:

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

La définition d'une longueur de ce genre, le moteur CSS analyse le suivant:

calc(100% -1px);

une longueur d'un suivi par un autre de longueur. Dans ce cas, il serait 100% suivie par -1px, ce qui n'est pas logique d' calc() . C'est aussi expliqué dans le rapport MDN page de documentation.

Afin de mettre les deux longueurs en relation, vous devez utiliser un opérateur distinct, par conséquent, à la suite de la logique ci-dessus, vous aurez besoin d'utiliser des espaces:

calc(100% - 1px);