"canonical order" 对于 CSS 属性是什么意思？

Question

MDN 关于 CSS 属性 (example) and some of the CSSWG's specifications (example) 的页面参考了属性.

的 "canonical order"

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

the unique non-ambiguous order defined by the formal grammar

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

per grammar

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

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

Answer 1

属性的语法指的是 CSS 声明中所述属性的值的语法。大多数属性采用单个值，但某些属性采用固定顺序的多个值，例如 box-shadow 和 background-repeat，以及 shorthand 属性。这种语法通常直接在 "Value:" 行中看到，但可能会在散文中详细说明，例如，如果属性采用逗号分隔的此类复杂值列表。

例如，level 3 background shorthand 的语法定义为零个或多个 <bg-layer> 后跟一个 <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>值说明如下：

If one <box> value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value. If two values are present, then the first sets ‘background-origin’ and the second ‘background-clip’.

并且每个组件之间的 || 分隔符意味着 one or more of those components can occur and in any order. In the case of background, notice that background-position and background-size do not have a || between them; this means 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%;

似乎没有规范定义术语 "canonical order"，但 CSSOM 在序列化的上下文中多次引用它。例如，在 section 5.4.3 中它说：

The specified order for declarations is the same as specified, but with shorthand properties expanded into their longhand properties, in canonical order.

为了 getPropertyValue(), setProperty(), setPropertyValue() and setPropertyPriority() 的目的，这些 longhands 的值被序列化，所有这些都引用 "canonical order"。

并不是每个属性都有一个规范的顺序，因为如上所述，大多数属性无论如何都只取一个值； "Canonical order:" 行出现在 css-module-bikeshed 中单独的 propdef table 中只是因为它是一个模板。此外，CSSOM 似乎暗示只有 shorthand 属性具有规范顺序。

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

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;

（有趣的是，背景模块中给出的 shorthand-to-longhand 映射示例似乎不遵循此顺序。）

"canonical order" 对于 CSS 属性是什么意思？

What does "canonical order" mean with respect to CSS properties?

css

terminology