说说CSS3中的calc()属性

今天有人问到“CSS3中calc()属性加(+)、减(-)运算符为何必须加空格？”

说下个人的观点：

大体上是为了消除歧义，深入的话，是由于解析器的标识的历史定义造成的，所以也算一个历史问题。

核心语法是

stylesheet  : [ CDO | CDC | S | statement ]*;

statement   : ruleset | at-rule;

at-rule     : ATKEYWORD S* any* [ block | ';' S* ];

block       : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;

ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;

selector    : any+;

declaration : property S* ':' S* value;

property    : IDENT;

value       : [ any | block | ATKEYWORD S* ]+;

any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING

              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES

              | DASHMATCH | ':' | FUNCTION S* [any|unused]* ')'

              | '(' S* [any|unused]* ')' | '[' S* [any|unused]* ']'

              ] S*;

unused      : block | ATKEYWORD S* | ';' S* | CDO S* | CDC S*;

然后看值，再看DIMENSION，再翻一下DIMENSION定义：

DIMENSION{num}{ident}

再看{ident}

ident[-]?{nmstart}{nmchar}*

nmstart[_a-z]|{nonascii}|{escape}

nmchar[_a-z0-9-]|{nonascii}|{escape}

所以calc(20px-10px)会有歧义，在解析器看来，是值20以及未知单位px-10px。而乘号和除号就没有这个问题，所以有没有空格都是可以的。

其实觉得加减号表示正负也完全说的通，甚至非常方便记忆。比如 100%/2 - 2*2em 看起来就挺好。

规定加减号有空格应该也是权衡之举吧，至少最后的结果不是很混淆。

• 0
• 0
• 0
• 0
• 0
• 0
• 0
• 0