Geek Answers Handbook

How to interpret CSS “formal syntax” found in MDN

I came across a CSS background property that has the following meaning:

 background: none repeat scroll 0% 0% #F8F8F8;

The syntax for the background property is shown in this MDN page , for example:

 Formal syntax: [ <bg-layer> , ]* <final-bg-layer> where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> and <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <background-color>

Does the order of the background property mean? And, more generally: how to interpret this " formal syntax " specified in MDN.

+8
css
source share
2 answers

The formal syntax is documented on the MDN site itself . The “more general” question that you have is probably too broad for Stack Overflow: just review the documentation and come back if you have any specific questions.

One of those specific questions you have is the question of whether the order of the values ​​for the background property matters. Most parts of the background (in particular, the bg-layer) are separated by "double bars", which require an undefined order in accordance with MDN (formal syntax). To quote specific documentation in double bars:

Double bar

Dividing two or more components into a double bar, ||, means that all entities are parameters: at least one of them must be present, and they can be displayed in any order . This is usually used to determine different shorthand values.

As a footnote, although I love and use MDN all the time, W3.org is probably the more authoritative source, where you can find, for example, the syntax of the background syntax , as well as an explanation of the syntax in CSS values ​​and level 3 units . He basically says the same thing, for example. about the "double bars":

A double bar (||) separates two or more options: one or more of them must occur in any order.

This works in practice for the background property, as you can see in this fragment, where, regardless of the order of the property, the properties are analyzed the same way:

 #a { background: 100% / 2% url('http://i.stack.imgur.com/RvUr4.png') red repeat-x; } #b { background: red repeat-x url('http://i.stack.imgur.com/RvUr4.png') 100% / 2%; } 
 <div id="a">A</div> <br /> <div id="b">B</div>
+10
source share

The order does not matter. But order matters.

TL; DR;

The order does not matter, it is what it is in this documentation on MDN and is also confirmed by the W3C specifications. I will repeat this part verbatim:

A double bar ( || ) separates two or more parameters: one or more of them must occur in any order.

But do not proceed to this conclusion!

matters . Take your background syntax example:

 [ <bg-layer> , ]* <final-bg-layer> where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> and <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <background-color>

And, since it specifies the syntax of all the possible properties for multiple backgrounds, reduce complexity by choosing one background. It looks like this:

 <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <background-color>

Using this in a piece of code and linking to the documentation mentioned in your question and another answer, you can believe that all of these properties, which are separated by a double line ( || ), can be omitted and can happen in any order. Right

Wrong.

Although MDN is a good reference, it is not complete and may sometimes omit important details. In this particular case, both of these links ...

... specify the same syntax and explain all the properties, but leave one detail.

Now take a close look at the property called box . There are two box properties, separated by a double bar ( || ). This should mean that you can either omit box or specify box in any order. But this is not entirely correct. Although you, of course, may not indicate box at all from the transcript, you cannot put them in any order if you want without getting unintended results. This is not indicated in the MDN link to background above.

But, in another background-clip link by the same MDN here:

  1. MDN ref: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

It states:

Canonical order: a unique nondual order defined by formal grammar

This means that the order is determined by the ambiguity of the properties. If the properties are not ambiguous, then order or omission does not matter. If the properties are ambiguous, then order and / or omission matters.

In your abbreviated background example, two box properties (if any) are interpreted as the first of which is background-origin , and the second is background-clip .

If you read another source of documentation here:

  1. Opera dev ref: https://dev.opera.com/articles/css3-borders-backgrounds-boxes/

It states:

There are a few things you need to know when using the new shorthand background. If only one field value is specified, both background clips and background-origin are set to this value. If two are indicated, then first is used to start, and the second is used for the clip.

  1. And W3c is here: http://www.w3.org/TR/css3-background/#the-background-origin

Indicates the following:

Please note that if 'background-clip is' padding-box,' background-origin "border-box", "background-position" is "upper left" (initial value), and the element has a non-zero border, then upper and left The background image will be cropped.

So, if you omit one of the values, it will be interpreted as both background-origin and background-clip . But, if you provide both values, then the order is important, otherwise you will get strange results. Not only this, other background-position property affects the behavior.

This can be easily demonstrated using this example in the snippet below. In the first div background image is positioned 15px from the pad, but continues across the border. Note that the first value of box is padding-box , and the second is border-box . In the second div background image is a 15px position from the border, but stops where the fill ends. Notice that the first value is border-box and the second value is padding-box . In the third div background image starts at the border and continues along the border. In this case, one value is omitted, and both background-origin and background-clip get the value of border-box .

Excerpt:

 div { width: 120px; height: 120px; display: inline-block; } #r { border: 15px #f00; border-style: dotted dashed dashed dotted; background: url(http://placehold.it/150) no-repeat 15px 15px padding-box border-box; } #g { border: 15px #0f0; border-style: dotted dashed dashed dotted; background: url(http://placehold.it/150) no-repeat 15px 15px border-box padding-box; } #b { border: 15px #00f; border-style: dotted dashed dashed dotted; background: url(http://placehold.it/150) no-repeat 15px 15px border-box ; } 
 <div id="r">Red</div> <div id="g">Green</div> <div id="b">Blue</div>

Bottomline:

Well refer to the documentation. But it’s better to even consult with several sources. This answer refers to 5 sources. Read the W3C specifications, but not just in one place, read all links to related properties to see how other properties and even order can influence one property. And do not forget to try the sample, you may never know that a surprise can wait for you!

.

+4
source share

More articles:


All Articles