Question

I was wondering if any type of “transcoder” exists, that automatically adds vender specific properties to a stylesheet? For instance if I create a stylesheet like this:

div.rounded {
    border-radius: 5px;
    opacity: 0.8;
}

I can run the file through the transcoder, which outputs this:

div.rounded {
    border-radius: 5px;
    -mox-border-radius: 5px;
    -webkit-border-radius: 5px;
    opacity: 0.8;
    filter:Alpha(Opacity=80);
}

I’ve found a Javascript solution, but I’d rather “pre-compile” the stylesheets instead of depending on JS.

Answer 1

There are tools that exist for this sort of thing, one very popular one is the Compass CSS Framework, online at http://compass-style.com. It is to CSS what jQuery is to JavaScript – filling in and normalizing all of the details.

With Compass (and SASS) you can do what you’re asking pretty effortlessly:

div.rounded {
  @include border-radius; /* by default the radius is 5px */
}

The output will then be something along the lines of

div.rounded {
  -webkit-border-radius: 5px 5px;
  -moz-border-radius: 5px / 5px;
  -o-border-radius: 5px / 5px;
  -ms-border-radius: 5px / 5px;
  -khtml-border-radius: 5px / 5px;
  border-radius: 5px / 5px;
}

If a framework seems too heavy-handed for your needs, you could consider also a more basic SASS solution such as a custom mixin with arguments:

@mixin my-border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -o-border-radius: $radius;
  -ms-border-radius: $radius;
  -khtml-border-radius: $radius;
  border-radius: $radius;
}

div.rounded { 
  @include my-border-radius(5px); 
}