Grow your CSS skills. Land your dream job.

Ordering CSS3 Properties

Published by Chris Coyier

When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first:

.not-a-square {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Why is this method of ordering properties so commonly taught? Here is what it would look like "the wrong way":

.not-a-square {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

Even doing it "the wrong way", won't the border radius be the same no matter what, forever? A quick investigation might lead you to conclude that it will, and this ordering of properties is rather nonsense.

  1. The Long Long Ago: None of the properties are supported, order doesn't matter.
  2. The Past: Only vendor prefixes are supported, order doesn't matter.
  3. The Now: Both vendor prefixes and actual property are supported. If prefix is last, it will override actual property, but both are the same anyway.
  4. The Future: Only actual property is supported, order doesn't matter.

Here's a simple chart with this concept at work.

Woah there, Cowboy

The fact is, the ordering of CSS3 properties is important, and the above is fundamentally flawed. "The Now" is exactly the problem. We are at a crucial juncture in browser history where some browsers are supporting both the vendor prefixed version and the actual CSS3 property. Right now it's specifically WebKit that is doing this, and the way they have implemented it is that if you list the vendor prefix after the actual property, the vendor prefix will override and be the property that renders.

Why does that matter? In the simple border-radius example we saw above, either way, the corners on that element will have a border-radius of 10px. There is no difference in how the vendor prefix and "real" property handle rounded corners when you set only one value. The problem is that there is a difference between the implementations of the properties when passing more than one value.

.not-a-square {
   /* These do totally different things */
   border-radius: 30px 10px; 
   -webkit-border-radius: 30px 10px;
}

The spec or "real" version will render the top left and bottom right corners at 30px and the top right and bottom left corners at 10px. The vendor prefix will render all four corners with elliptical corners 30px wide and 10px tall.

So if you've been blindly including the real border-radius at the end of your property lists using identical values, and then switch from Safari 4 to Safari 5, you'd see a dramatic change in how the above code was styling your boxes.

You could fix this up by fiddling with the values to make sure they do the same thing... but if you are going to fiddle with anything, you might as well fiddle with the real property as that will be supported version in the future. Listing the real property last is definitely the way to go. Because it will be based entirely on the spec, it will match other browsers implementations, and will be the only supported version as time goes on and vendor prefixes are removed.

Border radius isn't the only example here. Note the dramatically different syntaxes for background-image gradients. Now there is no "real" spec version of these values yet, but when there is, the implementation will be different than what we are using now. That should be listed last in the ordering of the properties to future proof that as well.

Thanks to @mattwiebe and @snookca for helping me understand this better.

Comments

  1. thanks for the tip!!

  2. w1sh
    Permalink to comment#

    Had no idea. Thanks for this.

  3. Permalink to comment#

    good tips chris thanks a lot

  4. Bego
    Permalink to comment#

    wonderful things can be done using css3, but what a waste of bandwidth.

    Chris, did you know that it allways takes a second or so ’til your headings fonts change? That looks odd, too.

    • Not entirely true! CSS3 is to CSS as salt is to cooking. Appropriately used, it can really make something go from mediocre to amazing. Overused and it ruins all of the other effort you put into it.

    • NICE! That’s a pretty cool metaphor.

    • Bego
      Permalink to comment#

      Lars. I agree that it adds this little extra.

      I just find it frustrating that we need to write four(!) properties to get rounded corners while CSS is actually slim.

    • Permalink to comment#

      I’m sure knows this, Bego – it’s an accepted flaw that everyone else seems to be able to deal with! Slight loading time for customized typography that doesn’t involve image replacement and isn’t times new roman? I’m down.

    • Permalink to comment#

      I agree with Jack.

      Its like complaining about images loading. Both the font and images need time to load. That being said, fonts can be gzipped, which helps considerably.

    • Bego
      Permalink to comment#

      I love Chris’ work, learned a lot from his screencasts and certainly didn’t want to complain. It’s just that sometimes things work differently in web design if you don’t sit at your own Mac (speaking about download times and browser compatibility).

      Anyway, I now understand: It’s not a bug, it’s a feature. :-)

    • Yeah, pretty much. While I agree the bandwidth is somewhat “wasted”, we’re talking such minor degrees of milliseconds its next to null. Writing the four separate properties is more time wasted than bandwidth, though, so I agree.

      All in all though, if your design skills are up to snuff, a few extra lines padding your CSS files should not make an iota of a difference. :)

    • Khalid
      Permalink to comment#

      Maybe on your screen, but I see the correct font immediately.

    • Permalink to comment#

      It’s called FOUT. If it really get’s on your nerves try using Webkit instead of Firefox.

    • Permalink to comment#

      Prefix or Posthack by Eric Meyer is a good read on this subject and why its not actually a waste of bandwidth.

  5. There is an official gradient spec, it’s similar to mozilla’s syntax: http://dev.w3.org/csswg/css3-images/#linear-gradients

  6. Chris, I had no idea! Thanks so much for the heads-up. Did you figure this out in the course of your redesign, with its snazzy asymmetrical tabs? Or did you already know it?

    On another note, I am so tired of filling out this entire comment form in Safari, then finding out (because I forgot since the last time) that it doesn’t work. If you get a little spare time (hah! I know that’s an elusive creature), could you look into it?

    • Maybe can you screencast this problem for me Jessi? Like with screenr.com or something? I use Safari all the time and I’m sure others do too, and I’ve only ever heard this from you! I’m sure it’s very real, I just don’t have anything to go off of to start troubleshooting.

    • Hi Chris,

      If no one else has seen or mentioned this, obviously, it’s just my problem, in which case, I apologize for pestering you!

      Don’t spend any time on it. I’ll see if I can troubleshoot it myself, and if/when I figure it out, I’ll report back.

    • Testing, testing, with the new Safari 5.0.2.

    • Hey, it works now! Apple fixed it. The description of the update said something about fixing a bug that could prevent users from submitting forms.

      Odd that no one else ran into it…

  7. Permalink to comment#

    The correct way is:

    .not-a-square {
    -moz-border-radius: 10px;
    border-radius: 10px;
    }

    Webkit supports the version without the vendor prefix. It has for a few weeks. Both Chrome (5 & 6) and Safari.

    • Right, but, Safari 4, for example, will still need it, so if you are trying to support as wide of an array of browsers as possible, you’ll still want to use -webkit-

    • Permalink to comment#

      I’m glad you pointed this out because I was thinking the same thing as @mingos. It didn’t even register that ignoring the webkit browser extensions would drop support for Safari 4. Thanks!

  8. Nick
    Permalink to comment#

    Great post!

    I’ve been ordering my CSS3 properties like this anyways but nice to see such an in-depth explanation as to why this is good practice.

  9. Awesome! I’ve been doing it the ‘right’ way, but did not think it through with those elliptical corners. That would positively make me crazy!

    I have been using the <a href="http://incident57.com/less/"Less.js the last week or so to write some css. Really makes those browser-prefixes less tedious.

    • Permalink to comment#

      Yeah, LESS is great, although I use the PHP version. Guarantees it’ll work even if someone decides to disable JavaScript ;)

      Oh, there’s also a problem with LESS: M$IE hacks don’t get parsed correctly. Neither does some fancy CSS3 stuff in some corner cases.

  10. oops…missed a bracket Less.js

  11. Permalink to comment#

    Very timely – I was just working on something with border-radius and box-shadow today. I never realized the difference! Fortunately, I’ve already been including the “real” property at the end anyway.

  12. Permalink to comment#

    Quick and short post. It would be nice to see more quick tips for css3 and html5

  13. andrei
    Permalink to comment#

    Your arguments make a lot of sense and (probably) I could have figured this out on my own but, not giving too much importance to this aspect, of making order in my css sheet, and typing fast always makes me overlook such details.

  14. Thanks it’s very Important Track CSS3 ! I Will Used In MyWord :)

  15. I agree with the salt analogy, and sprinklings of CSS3 will give a design project that little bit extra. LT

  16. Permalink to comment#

    Related to this, I find it irritating that Firebug likes to automatically sort new css properties alphabetically.

  17. Permalink to comment#

    I used to write the wrong way … wow
    thanks for clearing that out!

  18. I agree with many of the above comments, like:
    – the salt anology is a good one
    – a very nice, helpful, short tip
    – I too had no idea and have been doing this wrong

    Thanks

  19. Permalink to comment#

    Me parece interesante este blog sobre diseño web y realmente las aplicaciones son las mejores.

  20. Ugh… now to change all my stylesheets. I swear that the only reason my CSS has gotten messy was because of all the CSS3 best practices changing.

    I think I’m gonna start using PHP to serve CSS3 stuff from now on to prevent problems like these. Similar to LESS but without all the bells and whistles.

  21. Should ::-moz-selection and ::selection also be ordered like this or doesn’t it make any difference?

  22. Permalink to comment#

    Great tip, I need to do some changes on my site..

  23. Permalink to comment#

    Great article! I’m from Brazil, I’ve been following your works for a while and I’m always learning new things from you, congratulations.

  24. Permalink to comment#

    Massa

  25. Thanks for the quick tip.

  26. Mehdi
    Permalink to comment#

    Great tip.

  27. On Opera All Works, FF4 – All Works, this bug only on Safari/Chrome!

  28. Great! this is very interesting. we can save our more time by using this css

  29. Permalink to comment#

    Nice One ..Never know that before

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".