对于 CSS 属性,"canonical order"意味着什么?



MDN关于CSS属性的页面(示例)和CSSWG的一些规范(示例)都引用了属性的"规范顺序"。

例如,MDN 说display的规范顺序是:

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

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

按语法

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

这是什么意思,指定的含义在哪里(如果有的话)?我还没有设法在网上找到这个词的定义,也想不出任何明显的猜测。

属性的语法是指 CSS 声明中该属性的值的语法。大多数属性采用单个值,但有些属性采用多个值,例如 box-shadowbackground-repeat ,以及速记属性。这种语法通常直接出现在"Value:"行中,但可以在散文中详细说明,例如,如果属性采用逗号分隔的此类复杂值列表。

例如,3级background速记的语法定义为零个或多个<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>值描述如下:

如果存在一个<box>值,则它将"背景原点"和"背景剪辑"都设置为该值。如果存在两个值,则第一个值设置"背景原点",第二个值设置"背景剪辑"。

每个组件之间的||分隔符意味着这些组件中的一个或多个可以按任何顺序出现。在 background 的情况下,请注意background-positionbackground-size之间没有||;这意味着这两个属性需要一起显示(并且要指定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在序列化的上下文中多次引用它。例如,在第5.4.3节中,它说:

声明的指定顺序与指定的顺序相同,但速记属性按规范顺序扩展为其普通属性。

这些长手的值被序列化是为了getPropertyValue()setProperty()setPropertyValue()setPropertyPriority(),所有这些都指"规范秩序"。

并非每个属性都有规范顺序,

因为如上所述,大多数属性无论如何都只采用一个值;"规范顺序:"行存在于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;

(有趣的是,背景模块中给出的速记到手绘映射示例似乎不遵循此顺序。

最新更新