对于 CSS 属性，“规范顺序”是什么意思？

Question

关于 CSS 属性 (example) 的 MDN 页面和 CSSWG 的一些规范 (example) 引用了属性的“规范顺序”。

例如，MDN 说display 的规范顺序是：

由正式文法定义的唯一非歧义顺序

CSSWG 的 flexbox 规范说 flex 的规范顺序是：

每个语法

每个 CSS 属性似乎都在 MDN 上被列为具有规范的顺序；在有趣的CSS Foo Module Level N 规范中也提到了规范顺序，CSSWG 将其用作新属性规范的模板。

这是什么意思，具体的含义在哪里（如果有的话）？我没有设法在网上找到该术语的定义，也想不出任何明显的猜测。

Answer 1

属性的语法是指CSS声明中该属性的值的语法。大多数属性采用单个值，但某些属性按集合顺序采用多个值，例如box-shadow 和background-repeat，以及速记属性。此语法通常直接在“Value:”行中看到，但可以在散文中详细说明，例如，如果属性采用逗号分隔的此类复杂值列表。

例如，level 3 background shorthand 的语法定义为零个或多个<bg-layer>s 后跟一个<final-bg-layer>，其中

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

<box> 的两个值描述如下：

如果存在一个<box> 值，那么它会将“background-origin”和“background-clip”都设置为该值。如果存在两个值，则第一个设置“background-origin”，第二个设置“background-clip”。

每个组件之间的|| 分隔符意味着one or more of those components can occur and in any order。对于background，请注意background-position 和background-size 之间没有||；这意味着the two properties need to appear together（并且要指定background-size，必须包含background-position）。

例如，以下两个声明是有效且等价的：

background: url(see-through.png) center / 100% no-repeat fixed padding-box red;
background: red url(see-through.png) fixed padding-box no-repeat center / 100%;

---

似乎没有规范定义术语“规范顺序”，但 CSSOM 在序列化上下文中对其进行了多次引用。例如，在section 5.4.3 中它说：

声明的指定顺序与指定的相同，但简写属性以规范顺序扩展为它们的简写属性。

为了getPropertyValue()、setProperty()、setPropertyValue() 和setPropertyPriority() 的目的，这些长指针的值被序列化，所有这些都指的是“规范顺序”。

并不是每个属性都有一个规范的顺序，因为如上所述，大多数属性无论如何都只取一个值； “Canonical order：”行出现在 css-module-bikeshed 的唯一 propdef 表中，仅仅是因为它是一个模板。此外，CSSOM 似乎暗示只有速记属性才有规范顺序。

根据我对相关规范的理解，当简写属性的规范顺序被定义为该值的语法时，它只是意味着它的简写应该按照语法定义的顺序进行序列化。所以上面的两个简写声明应该按照与下面一组简写声明完全相同的顺序进行序列化：

background-image: url(see-through.png);
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: padding-box;
background-color: red;

（有趣的是，背景模块中给出的简写到简写映射示例似乎不遵循此顺序。）