Question

以下是设置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样式属性的供应商前缀版本（即CSS）设置transform时拒绝合作的浏览器需要阅读-webkit-transition-property: -webkit-transform, opacity;以使浏览器按照我想要的方式运行。

显然，今天仍然可以使用同样支持-webkit-transition-property: transform, opacity;的浏览器，但是我们可以看到有四种不同的组合可能性，无论是否为供应商前缀设置的样式名称或样式属性。那些风格。在未来的某些时候，某些webkit浏览器会突然停止检查-webkit-前缀，这是不可想象的。

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

当然，我可以做超便携式矫枉过正的方法，即在出现这种情况时设置CSS声明的所有四种组合，如果它支持，浏览器就没有空间找到令人不快的东西任何风格。

Answer 1

我对您的应用程序了解不足以了解这是否适合您，但http://prefixr.com/等网站提供了一个可以运行CSS的API，如果它们是CSS，则会添加任何供应商前缀必需的。

如何测试transitionProperty（et.al.）是否采用供应商前缀样式属性名称或规范化属性名称？

1 个答案: