CODEWITHSUNDEEP
coding-stylecross-browsercss
Michał Pękała
Michał Pękała

Reputation: 2389

Smart approach to CSS3

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:

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

Upvotes: 1

Views: 229

Answers (2)

Wolfram
Wolfram

Reputation: 8052

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.

Upvotes: 0

Jacob Rask
Jacob Rask

Reputation: 24368

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.

Upvotes: 1

Related Questions