How to interpret the "Formal syntax" of CSS found on MDN

css

Solution

The formal syntax is documented at the MDN site itself. The "more general" question you have is probably too broad for Stack Overflow: just go through the documentation and come back if you have any specific questions.

One such specific question you have is whether the order of the values for the `background` property matters. Most parts of the background (of specifically a bg-layer) are separated by "double bars", which require no specific order according to the MDN('s formal syntax). To quote the specific documentation on double bars:

Double bar

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

As a footnote, though I love and use MDN all the time, a probably more authorative source would be W3.org, where you can find for example the background shorthand syntax as well as an explanation of the syntax in CSS Values and Units Module Level 3. It basically says the same, e.g. about "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 snippet where regardless of order the properties are parsed the same:

#a { background: 100% / 2% url('https://i.stack.imgur.com/RvUr4.png') red repeat-x; }
#b { background: red repeat-x url('https://i.stack.imgur.com/RvUr4.png') 100% / 2%; }

<div id="a">A</div>
<br />
<div id="b">B</div>

Problem

Original source