为什么在Calc()方法中必须用空格包围+或 - ?

为什么在Calc()方法中必须用空格包围+或 - ?

问题描述:

最近我开始在CSS中使用calc(...)方法。我很快知道,代码如: width:calc(100%-2)将无法工作,虽然在 运算符将解决这个问题,并且calc方法将正常工作。

Recently I've started using the calc(...) method within CSS. I quickly learned that code such as: width: calc(100%-2) will not work, though adding white-space before and after the - operator will fix the problem and the calc method will function properly.

进行一些研究后,我发现多个博客文章引用白色空间,许多人甚至指出了规范( CSS3 8.1.1 )状态:

After doing a bit of research I found multiple blog posts reference that the white-space is required and many have even pointed to the specification (CSS3 8.1.1) which states:


此外,+和 -
运算符两侧都需要空格。 (*和/操作符可以在它们周围没有空格
的情况下使用。)

In addition, whitespace is required on both sides of the + and - operators. (The * and / operaters can be used without whitespace around them.)

现在,这些运算符必须被包裹在空白中,但是为什么?我已在规范中进一步阅读(通过第8.1.2-4节),如果在这些额外部分中解释,我不理解推理。

Now, clearly, the spec tells us that these operators must be wrapped in white-space, but why? I've read further within the spec (through sections 8.1.2-4) and if it's explained in these additional portions, I'm not understanding the reasoning.

可以解释为什么指定 calc(100% - 1)或甚至 calc(100%/ 2)是可接受的语法,但不是 calc(100%-1)

In simple terms, could someone explain why it was specified that calc(100% - 1) or even calc(100%/2) is acceptable syntax but not calc(100%-1)?

- 字符是CSS标识中允许的字符之一。根据此处提供的决议,似乎他们想要防止语法模糊性可能由于使用 - 而不使用空格,特别是使用 min-content 等关键字值(尽管AFAIK关键字值 t calc() - 如果我错了,请更正。)

The - character is one of the allowed characters in CSS idents. Judging by the resolution given here, it seems they wanted to prevent syntactic ambiguities that could arise from using - without whitespace, especially with keyword values such as min-content (although AFAIK keyword values aren't yet allowed within calc() — correct me if I'm wrong).

不是每个人都同意这个决议。

Not everyone agrees with this resolution, though.