Question

do You have any elegant approach to benefit from CSS3 features, like border radius or gradients?

I am looking for a solution that would avoid browser-specific CSS properties and browser-specific stylesheet files. I find them both hard to maintain and too verbose.

It could be a Javascript library that would take care of cross-browser compatibilit. Thus, I could use only W3C CSS3 properties support (not browser-specific) and get rid of the library when browsers will start tu support CSS3 well.

So far, I have found these resources that seem to fulfill at least some of my expectations:

• eCSStender – JS that is told to imitate the CSS3 features on different browsers (even IE6), I haven’t tested yet, however (read about eCSStender)
• Mordernizr – JS that detects which CSS3 properties the browser supports
• … I’ll fiil it with your answers

Or maybe you have other approach that lets You take advantage of CSS3 without very verbose code?

Answer 1

You could use LESS, which has a border-radius example on their homepage:

.rounded_corners (@radius: 5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}
#header {
    .rounded_corners;
}

However, I really don’t find it that messy to use browser prefixes. For a border-radius, the only thing you need is this:

-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;

That will work in about a dozen browsers (if you include mobile browsers). Using indentation in this fashion also makes it easier not to forget to update one of the properties. When you decide do drop support for Safari 4 or whatever, you can simply search and replace the rules you want to remove from your CSS files.

Compare that to when we needed box model hacks, NS4, IE5/Mac fixes, and all of that crap.