在什么情况下 shorthand CSS 属性需要用空格分隔普通组件?

Under what circumstances do shorthand CSS properties REQUIRE separation of longhand components by spaces?

我 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 的知识!我删除了 "infinite" animation-iteration-count 属性 值和 animation-duration 的“.99s”之间的 space,并注意到它没有破坏动画(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 and even though the example (Example #6) shows a <single-animation> with space-separated longhand property values, nowhere (that I found) does it say spaces are required (and I looked up the double bar || 但我没有看到任何提及所需的 spaces).

值得注意的是,以下内容(在 .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}}

我想测试某种普遍性,发现 another case 使用 shorthand 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”重复了上面的操作,得到了相同的结果。

在什么情况下 shorthand CSS 属性 REQUIRE 用 spaces 分隔普通组件?

从 CSS2 规范你 link 到:

Component values are specified in terms of tokens, as described in Appendix G.2. As the grammar allows spaces between tokens in the components of the expr production, spaces may appear between tokens in property values.

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

在 CSS 语法中,infinite.99s 始终可以解析为两个标记:标识 infinite 和数量 .99s,因为句点不能通常出现在一个标识中(除非转义)。因此,没有必要用 space.

分隔这两个值