2

We use css rule like this...

-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;  /* this must be at last ? */

Why should I not use it at first like this...

border-radius: 8px; /* why not to use at first ? */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;

Update

Can anyone show me an example of error occuring using it at first?

Navin Rauniyar
  • 10,127
  • 14
  • 45
  • 68
  • Explained here: http://stackoverflow.com/questions/8461252/why-do-browsers-need-vendor-prefixes-for-css3-what-is-stopping-them-from-just-u Basically, once the standard becomes official, it will override the experimental prefix css. – Jason Lydon Apr 24 '13 at 03:10
  • 1
    @Jason: That question seems to be asking why vendor prefixes are used at all, as opposed to why the unprefixed property should come last. A better duplicate would be http://stackoverflow.com/questions/12528398/ordering-in-vendor-based-css3-vs-standard-css3-syntax – BoltClock Apr 24 '13 at 03:16
  • Check this demo http://codepen.io/css-tricks/pen/pqgKH – Rajender Joshi Apr 24 '13 at 03:21
  • "Can anyone show me an example of error occuring using it at first?" Have you seen Sonu Joshi's comment? – BoltClock Apr 24 '13 at 04:01
  • Now go to this link about more http://css-tricks.com/ordering-css3-properties/ – Rohit Azad Malik Apr 24 '13 at 04:08
  • @BoltClock I didn't see any changes between them. – Navin Rauniyar Apr 28 '13 at 01:11

2 Answers2

7

The idea is that once the rule is standardized that will overrule the other styles. Since the standard rule is on the bottom, it will be used instead of a vendor specific rule if the browser knows how. This allows for standardization while still supporting current implementations.

In your second example the vendor specific rules would override the standardized rule if the browser supports both. Vendor specific implementations may defer from the spec, and its better to be on the unified spec once its finalized to allow for easier cross browser changes.

Ben McCormick
  • 25,260
  • 12
  • 52
  • 71
0

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.

The Long Long Ago: None of the properties are supported, order doesn't matter. The Past: Only vendor prefixes are supported, order doesn't matter. 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. The Future: Only actual property is supported, order doesn't matter.

More about

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
  • if both are supported they may not actually be the same in all cases. The point of the vendor prefixes is that they are not standardized and may not match the spec. So this really does matter. – Ben McCormick Apr 24 '13 at 12:53