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

Question

我99％肯定CSS属性值的浮点数的前导零不是必需的，但我想确保，所以我在Codepen上测试了以下动画（here is the JSFiddle，因为我没有Codepen帐户）。该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-iteration-count属性为animation-duration价值和“.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}} 

我去W3文档CSS动画 - 特别是the animation property，即使示例（示例＃6）显示<single-animation>与空格分隔的长手属性值，无处（我发现）是否需要空格（并且我抬头看double bar ||，我没有看到任何提及所需空间）。

值得注意的是，以下的（这将插入一个“0”之前的0.99小数点）不打破动画（Fiddled here）：我想考某种共性，发现another case

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属性：

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属性要求用空格分开longhand组件？

Answer 1

从您链接到CSS2规范：

成分值令牌来规定，如Appendix G.2描述。由于语法允许生产的组件中的标记之间存在空格，因此属性值中的标记之间可能会出现空格。

总之，在忽略空格会导致两个标记被解析为一个标记的情况下，需要空格。当然，这是一个明显的例子，border: 1px solid red，忽略空格将导致单个维度令牌1pxsolidred，由于没有这样的单位“pxsolidred”，所以这是无效的。几乎所有的时间都是如此，这就是为什么你几乎总是看到空间分隔组件值的原因。

在CSS语法，infinite.99s总是可以被解析为两个标记：所述IDENT，infinite，和数量，.99s，因为一个周期不能正常出现在的ident（除非逃脱）。因此，没有必要用空格分隔这两个值。