CSS 转码器 : Render Vendor Specific Properties

Question

我想知道是否存在任何类型的“代码转换器”，它会自动将特定于供应商的属性添加到样式表中？例如，如果我创建这样的样式表:

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

我可以通过转码器运行文件，输出如下:

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

我找到了 Javascript solution ，但我宁愿“预编译”样式表而不是依赖 JS。

Answer 1

存在用于此类事情的工具，一个非常流行的工具是 Compass CSS Framework，在线地址为 http://compass-style.com .它之于 CSS 就像 jQuery 之于 JavaScript - 填充并规范化所有细节。

借助 Compass(和 SASS)，您可以毫不费力地完成您的要求:

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

然后输出将类似于

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;
}

如果一个框架对您的需求来说过于笨重，您也可以考虑一个更基本的 SASS解决方案，例如 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); 
}