Question

With some CSS styling properties, we need all these different kinds of approaches, tricks and hacks to make things work cross browser. I never wanted to be an expert in IE, and making it work, no…I wanted to specialize in designing good looking, practical and user friendly web applications without wondering if that rounded corner is going to be round in browser x and y.

CSS3 and even CSS doesn’t work in browsers like IE7 like it’s intended to, (I don’t care for IE6), and one has to spend so much time in making things work across different browsers, that the creative concepts, and actual goal of a site goes out the window.

Is there is a solution for making/morphing CSS/CSS3 to be compatible with browsers that don’t support it. Perhaps a JavaScript library?

It would be nice to be able to change opacity like this:

.style { opacity: 0.5; }

and not like this:

.style {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}

…similar to Prefix Free which currently doesn’t support IE

So are there JavaScript libraries out there that will dynamically expand CSS as needed by a particular browser, and also enable CSS3 support, and future proofing of CSS3?

Answer 1

One idea might be looking into the LESS framework. It’s a object oriented way of doing CSS. So to set opacity, you’d do something like this:

.opacity (@opacity) {
    opacity: @opacity;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity*100)";
    filter: alpha(opacity=@opacity*100);
}

Then to use it, you’d just “call it” like a function.

.style {
    .opacity(0.7);
}

And the output would be like your second code snippet