在什么情况下，速记 CSS 属性需要用空格分隔速记组件？

Question

我 99% 确定 CSS 属性值中浮点数的前导零是不必要的，但我想确定，所以我在 Codepen 上测试了以下动画（here is the JSFiddle，因为我没有帐户代码笔）。 CSS 是这样的：

div {animation:xxx infinite .99s; width: 100px; height: 100px; background: linear-gradient(to right,gold,green,blue,red,black)}
@keyframes xxx {from {margin-left: 10px} to {margin-left: 1000px}}

然后我打错了字——在这个过程中学到了一些关于 CSS 的知识！我删除了animation-duration 的“无限”animation-iteration-count 属性值和“.99s”之间的空格，并注意到它没有破坏动画（see this JSFiddle）：

div {animation:xxx infinite.99s; width: 100px; height: 100px; background: linear-gradient(to right,gold,green,blue,red,black)} // deleted space between infinite and .99s
@keyframes xxx {from {margin-left: 10px} to {margin-left: 1000px}}

我查看了 CSS 动画的 W3 文档 - 特别是 the animation property，即使示例（示例 #6）显示了带有空格分隔的普通属性值的 <single-animation>，但（我发现）没有任何地方说空格是必需的（我查看了double bar ||，但没有看到任何关于必需空格的提及）。

值得注意的是，以下内容（在 0.99 的小数点前插入“0”）确实会破坏动画 (Fiddled here)：

div {animation:xxx infinite0.99s; width: 100px; height: 100px; background: linear-gradient(to right,gold,green,blue,red,black)} // added a "0" between infinite and .99s
@keyframes xxx {from {margin-left: 10px} to {margin-left: 1000px}}

我想测试某种通用性，并使用简写 border 属性找到了 another case：

div {animation: xxx infinite0.99s; width: 100px; height: 100px; background: green; border: solid red.99px}
@keyframes xxx {from {margin-left: 10px} to {margin-left: 1000px}}

我用“0”重复上述相同的操作，得到了相同的结果。

简写 CSS 属性在什么情况下需要用空格分隔简写组件？

Answer 1

从您链接到的 CSS2 规范：

组件值是根据标记指定的，如Appendix G.2 中所述。由于语法允许expr 产生式的组件中的标记之间存在空格，因此属性值中的标记之间可能会出现空格。

简而言之，在省略空格会导致两个标记被解析为一个标记的情况下，需要空格。最明显的例子当然是border: 1px solid red，其中省略空格会导致单维标记1pxsolidred，这是无效的，因为没有这样的单位“pxsolidred”。几乎一直都是这样，这就是为什么您几乎总是看到空格分隔组件值。

在 CSS 语法中，infinite.99s 总是可以被解析为两个标记：标识 infinite 和数量 .99s，因为句点通常不能出现在标识中（除非转义）。因此，没有必要用空格分隔这两个值。