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

MDN关于CSS属性的页面( example)和一些CSSWG的规范( example)引用了属性的“规范”.

例如,MDN说,显示的规范顺序是：

the unique non-ambiguous order defined by the formal grammar

CSSWG的flexBox规范说,flex的规范性顺序是：

per grammar

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

这是什么意思,指定的含义在哪里(如果有的话)？我没有设法跟踪网络术语的定义,也不能想到任何明显的猜测.

解决方法

属性的语法是指CSS声明中所述属性的值的语法.大多数属性采用单个值,但某些属性在集合顺序中具有多个值,例如Box-shadow和background-repeat以及速记属性.这种语法通常直接在“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'>

两个盒子值描述如下：

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;

(有趣的是,“背景”模块中给出的缩写映射示例似乎不遵循此顺序.)

原文地址：https://www.jb51.cc/css/214319.html

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

解决方法

相关推荐