ansaurus

Question

Answer 1

A:

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.

Jacob R 2010-06-22 11:31:38

Answer 2

A:

This is not CSS3 specific, but as you are asking for a concise way to handle the styles and do mention modernizr (which works by adding classes like no-borderradius to your <html> element if that feature is not available), I thought it might be helpful for a generally improved way to organize your CSS.

There is LESS that allows the use of variables, mixins or nested rules in CSS (see the link for examples). This however requires you to compile your .less files into valid .css. To avoid this, there is/will be less.js (see also: Less.js Will Obsolete CSS) which enables you to include .less files directly in your page (useful at least during development).

I think LESS does not require you to learn a lot of new syntax rules and might help to organize fallback CSS right next to the "real" style.

Wolfram 2010-06-22 11:34:02

Thanks. LESS seems certainly interesting. BTW,I wish CSS supported variables, mixins or operations. However, lack of back compatibility with CSS is a big drawback to me.

Michał Pękała 2010-06-22 11:44:50

LESS is compiled to regular CSS and you are free to use the produced CSS file instead of LESS at any point. It just helps organizing your CSS during development (and maintenance). Also, rename your .css file to .less and you have a valid LESS file. So it is easy to switch from one to another and back.

Wolfram 2010-06-25 09:44:00

ansaurus

tags:

views:

answers:

Smart approach to CSS3

related questions