例如,MDN说,显示的规范顺序是:
the unique non-ambiguous order defined by the formal grammar
CSSWG的flexBox规范说,flex的规范性顺序是:
per grammar
每个CSS属性似乎都列在MDN上,具有规范的顺序; CSSWG用作新的属性规范的模板的娱乐CSS Foo Module Level N规范中也提到了规范的顺序.
这是什么意思,指定的含义在哪里(如果有的话)?我没有设法跟踪网络术语的定义,也不能想到任何明显的猜测.
解决方法
例如,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'>
两个盒子值描述如下:
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.在背景的情况下,请注意background-position和background-size不具有||它们之间;这意味着the two properties need to appear together(并且为了指定背景大小,必须包括背景位置).
例如,以下两个声明是有效的和等效的:
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它说:
The specified order for declarations is the same as specified,but with shorthand properties expanded into their longhand properties,in canonical order.
这些longhands的值被序列化为getPropertyValue()
,setProperty()
,setPropertyValue()
和setPropertyPriority()
,所有这些都参考“规范”.
并不是每个财产都有规范的秩序,因为如上所述,大多数物业无论如何也只有一个价值;只是因为它是一个模板,所以“规范订单:”行存在于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;
(有趣的是,“背景”模块中给出的缩写映射示例似乎不遵循此顺序.)