Question

我想知道是否有任何类型的＆＃34;转码器＆＃34;是否存在，会自动将商家特定属性添加到样式表？例如，如果我创建一个这样的样式表：

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，但我宁愿＆＃34;预编译＆＃34;样式表而不是依赖JS。

Answer 1

有这样的工具存在，一个非常受欢迎的工具是Compass CSS Framework，在线http://compass-style.com。它是CSS的jQuery是什么 - 填写并规范化所有细节。

使用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); 
}

CSS Transcoder：渲染供应商特定属性

1 个答案: