MDN关于CSS属性的页面(示例)和一些CSSWG的规范(示例)引用了属性的"规范顺序".
例如,MDN说的规范顺序display是:
由形式语法定义的唯一非模糊顺序
CSSWG的flexbox规范说规范顺序flex是:
每个语法
每个CSS属性似乎都在MDN上列为具有规范顺序; CSSWG用作新属性规范模板的有趣CSS Foo模块级别N规范中也提到了规范顺序.
这是什么意思,指定的含义在哪里(如果有的话)？我还没有设法找到在线术语的定义,也没有想到任何明显的猜测.
属性的语法是指CSS声明中所述属性的值的语法.大多数属性取一个值,而一些属性取多个值中设定的订单,例如box-shadow和background-repeat,以及缩写属性.这种语法通常直接在"值:"行中看到,但可以在散文中详细说明,例如,如果属性采用逗号分隔的此类复杂值列表.
例如,3级background速记的语法被定义为零或更多<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'.
并且||每个组件之间的分隔符意味着这些组件中的一个或多个可以以任何顺序出现.在的情况下background,发现background-position并background-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节中它说:
声明的指定顺序与指定的顺序相同,但是以规范顺序将缩写属性扩展为其longhand属性.
这些longhands的值是序列化而言的getPropertyValue(),setProperty(),setPropertyValue()并且setPropertyPriority(),所有这些都指的是"规范秩序"为好.
并非每个属性都有规范的顺序,因为如上所述,大多数属性无论如何只需要一个值; "Canonical order:"行出现在css-module-bikeshed的单独propdef表中,因为它是一个模板.此外,CSSOM似乎暗示只有速记属性才具有规范顺序.
根据我对相关规范的理解,当简写属性的规范顺序被定义为该值的语法时,它只是意味着它的longhands应该按照语法定义的顺序被序列化.所以上面两个速记声明应该按照与下面的一组longhand声明完全相同的顺序进行序列化:
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;
(有趣的是,Backgrounds模块中给出的简写到纵向映射示例似乎不遵循此顺序.)