Question

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

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

由形式语法定义的唯一非模糊顺序

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

每个语法

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

这是什么意思，指定的含义在哪里（如果有的话）？我还没有设法找到在线术语的定义，也没有想到任何明显的猜测。

Answer 1

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

例如，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似乎暗示只有速记属性才具有规范顺序。

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

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;

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

Answer 2

我相信他们会引用层次结构......就像CSS规则的应用顺序一样。在每种情况下，他们都会参考代码的语法，换句话说，就是他们编写代码的方式。

“规范顺序”对CSS属性意味着什么？

2 个答案: