Cross-Browser CSS3 Rule

Question

I have a stupid question,

If I want to add round corner for an element in browsers which support some stuff of CSS3, I have to repeat style several time for each browser, because it is different ?

For ex :

         -moz-border-radius: 12px; /* FF1+ */
         -webkit-border-radius: 12px; /* Saf3+, Chrome */
          border-radius: 12px; /* Opera 10.5, IE 9 */

It means, that I have to add 3 styles for this radius border, doesn't it ?

Answer 1

Disclaimer: hopefully you've found this a year after my writing it and it's now completely wrong, and we have a standard, yay!

For now, yes this is correct...you need all the rules.

Unfortunately, this is a result of a spec being implemented while in flux, but that's how the web has evolved this far, sometimes the spec drives development, more often with the web, browsers do neat stuff and it's a spec later.

Hopefully once the spec is finalized, we'll have only border-radius: 12px;. Since Firefox and Chrome push automatic updates (not sure about Safari?) this is much more likely to happen, as opposed to IE users who may never upgrade.

Answer 2

Compass provides Sass mixins for many CSS3 properties meaning you can write something like:

.foo {
    @include border-radius(4px, 4px);
}

which will generate the following CSS:

.foo {
    -webkit-border-radius: 4px 4px;
    -moz-border-radius: 4px / 4px;
    -o-border-radius: 4px / 4px;
    -ms-border-radius: 4px / 4px;
    -khtml-border-radius: 4px / 4px;
    border-radius: 4px / 4px;
}

This is great because you have to write less code, but it provides rules that target a wide range of browsers.