0

这是设置 CSS 的 JS 代码的摘录：

function hyphen_style(style) {
    return style.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
}


var css = "#debug_element_highlighter_container * {"+
hyphen_style(Modernizr.prefixed('transitionDuration')) + ": 2s, 2s;" + 
hyphen_style(Modernizr.prefixed('transitionProperty')) + ": transform, opacity;" + 

... 

// append a style tag to head 
var head = document.getElementsByTagName("head")[0];
var style = document.createElement("style");
style.type = "text/css";
if (style.styleSheet){
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

现在这确实有效，但我确实记得不久前我有浏览器拒绝合作而不transitionProperty使用样式属性的供应商前缀版本transform，即需要读取 CSS 以-webkit-transition-property: -webkit-transform, opacity;使浏览器以我的方式行事想。

显然，这在今天仍然适用于同样支持-webkit-transition-property: transform, opacity;. 不难想象，在未来的某个时候，某些 webkit 浏览器会突然停止检查-webkit-前缀。

Modernizr（和 Modernizr 文档）为我们提供了prefixed()用于在它们之间进行转换的原语（等等），但我不清楚如何稳健地测试时尚之后的样式是否transitionProperty需要设置前缀样式属性名称。通过简单地分配不带前缀的样式并查看它是否“需要”来测试样式本身以查看它们是否需要添加前缀是非常简单的。但我不太确定这种方法是否适用于指定样式属性名称的特殊情况。

当然，我可以使用超便携的矫枉过正的方法，即在出现这种情况时设置所有四种 CSS 声明组合，如果浏览器支持任何样式。

4

1 回答 1

0

我对您的应用程序了解得不够多，不知道这是否适合您，但是http://prefixr.com/等网站提供了一个 API，您可以通过该 API 运行 CSS必需的。

于 2013-02-10T18:25:01.697 回答