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

Posted 2023-02-27

【中文标题】对于 CSS 属性，“规范顺序”是啥意思？

【英文标题】：What does "canonical order" mean with respect to CSS properties?对于 CSS 属性，“规范顺序”是什么意思？

【发布时间】：2015-05-11 21:07:21

【问题描述】：

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

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

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

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

每个语法

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

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

【参考方案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;

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

【讨论】：

挠挠头。 谢谢，我会在下班后重新阅读这篇文章，一旦我有时间关注链接并理解这一切。读完这篇文章后我立即想知道的事情（并且没有完全理解）是：为什么 MDN 列出了每个属性的规范顺序，如果大多数都没有的话？是否任何属性都具有不是“每个语法”的规范顺序；从 Web 开发人员的角度来看，规范命令有什么实际影响（如果有的话）？也许其中一些想法很愚蠢 - 我还没有机会正确消化这些，但以后会的。

@Mark Amery：没有关于 MDN 的线索，但巧合的是，display 在css-display 模块中被提升为简写形式，因此在那里有一个规范的顺序是有意义的。序列化主要是一个实现细节，所以如果它对作者有任何影响，那就是他们是否依赖它。但也不要相信我的话；）