Ordering of vendor-specific CSS declarations

Question

I think I've written something like the following a thousand times now:

.foo {
    border-radius: 10px;         /* W3C */
    -moz-border-radius: 10px;    /* Mozilla */
    -webkit-border-radius: 10px; /* Webkit */
}

But only now have I thought about whether the ordering of those is important? I know that between -moz-* and -webkit-* it doesn't matter, since at most 1 of those will be read, but is it better (in terms of future-proofing, etc) to do the W3C standard first or last?

score 50 · Accepted Answer · edited Mar 05 '15 at 11:22

The best practise is undisputedly to have the unprefixed property last:

.foo {
    -moz-border-radius: 10px;    /* Mozilla */
    -webkit-border-radius: 10px; /* Webkit */
    border-radius: 10px;         /* W3C */
}

Whichever is last out of -webkit-border-radius and border-radius will be the one that's used.

-webkit-border-radius is the "experimental" property - the implementation may contain deviations from the specification. The implementation for border-radius should match what's in the specification.

It's preferable to have the W3C implementation used when it's available, to help ensure consistency between all the browsers that support it.

score 20 · Answer 2 · answered Aug 16 '11 at 15:23

Ordering is important. To future proof your code you need to make the W3C spec come last, so the cascade favors it above the vendor prefixed versions.

.foo {
    -moz-border-radius: 10px;    /* Mozilla */
    -webkit-border-radius: 10px; /* Webkit */
    border-radius: 10px;         /* W3C */
}

For example, lets say down the road Google Chrome supports the border-radius, but it also supports the -webkit-border-radius for backwards compatibility with its prior versions. When Chrome encounters this .foo class now it will first see the -webkit, then it will see the standard, and it will default to the standard (and ignore webkit).

Ordering of vendor-specific CSS declarations

2 Answers2

Linked