CSS3中的背景速记顺序

Question

There are questions in the HTML5 microsoft certification about the correct order of selectors in the CSS3 background shorthand... but I searched, searched... but not found somewhere a valid reference to what is the real order precedence in that shorthand (if any)...

the W3C recommendation on this matter is not very explicit on this subject (at least, is not evident to find that information)....

is ancient CSS2 "see, I rap" ( CIRAP ) acronim was more or less catchy... but even there W3C didn't clearly exprimed a order?!...

What is the meaning for this kind of questions in certifs, if no one knows the standard? What is, finally, the correct order to take in CSS3?

their examples are confusing... by ex, the following makes believe that the order is CIRAPCOS

Another example shows equivalence:

 div { background: padding-box url(paper.jpg) white center } div { background-color: white; background-image: url(paper.jpg); background-repeat: repeat; background-attachment: scroll; background-position: center; background-clip: padding-box; background-origin: padding-box; background-size: auto auto } 

then the specification mentions:

Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of 'background- image ', 'background- position ', 'background- size ', 'background- repeat ', 'background- origin ', 'background- clip ' and 'background- attachment ' to that property's initial value, then assigns any explicit values specified for this layer in the declaration. Finally 'background- color ' is set to the specified color, if any, else set to its initial value.

so, this is how we obtain IPSROClACo

Answer 1

Is is explicitely written :

Value:

[ <bg-layer> , ]* <final-bg-layer>

Where:

<bg-layer> = 
       <bg-image> 
    || <position> [ / <bg-size> ]? 
    || <repeat-style> 
    || <attachment> 
    || <box>{1,2} 
<final-bg-layer> = 
       <bg-image> 
    || <position> [ / <bg-size> ]? 
    || <repeat-style> 
    || <attachment> 
    || <box>{1,2} 
    || <'background-color'>

An example, which give us IPSRABC :

background: 
    url("content.jpg") 
    left top / 200px 70px
    no-repeat
    scroll
    content-box content-box
    white;
/* or */
background-image: url("content.jpg") ;
background-position: left top;
background-size: 200px 70px;
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: content-box;
background-origin: content-box;
background-color: white;

If you want a mnemonic for it, here is one (and ya, I'm fully opened to any better sentence !) :

I pee a sir, Abby ! See ? (IPSRABC)

Note : you can put background-repeat before background-position / background-size , which give you IRPSABC .

Answer 2

Q: What are the correct order of selectors values in the CSS3 background shorthand?

A: any order

---

MSDN documentation for background states...

Up to five of the following space-delimited values, in any order :

• color - Any of the range of color values available to the background-color property.
• image - Any of the range of image values available to the background-image property.
• repeat - Any of the range of repeat values available to the background-repeat property.
• attachment - Any of the range of attachment values available to the background-attachment property.
• position - Any of the range of position values available to the background-position property.

The MSDN documentation lacks the updated CSS3 shorthand properties, but the answer remains...any order

---

Digging further, even MDN documentation for background (which does include CSS3 syntax) states...

One or more of the following, in any order :

<'background-attachment'> See background-attachment

<'background-clip'> See background-clip

<'background-color'> See background-color

<'background-image'> See background-image

<'background-origin'> See background-origin

<'background-position'> See background-position

<'background-repeat'> See background-repeat

<'background-size'> See background-size. This property must be specified after background-position, separated with the '/' character.

---

A basic example of this: jsfiddle example

.box1 {
    background-image: url(//placehold.it/100/f00);
    background-position: center center;
    background-color: red;
}
.box2 {
    background: 
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */
        red /* background-color */;
}
.box3 {
    background: 
        center center /* background-position */
        url(//placehold.it/100/f00) /* background-image */
        red /* background-color */;
}
.box4 {
    background: 
        red /* background-color */
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */;
}

Answer 3

The correct order specified by Microsoft is:

• color
• position
• size
• repeat
• origin
• clip
• attachment
• image

Answer 4

I have learnt NOT to use the background shorthand property at all, because of the following reasons:

1. Mixed Implementation across browsers and editors
2. It sets missing properties to their initial values - this will overwrite any previously set values
3. Some properties share the same values, and this causes a lot of confusion.

In this particular case, choose clarity and consistency over performance. I should also mention that the performance gains are negligible.

Source: Todd McLeod