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

How to test if transitionProperty (et. al.) takes vendor-prefixed style property names or normalized ones?

本文关键字:前缀 样式 规范化 供应商 属性 测试 何测试 transitionProperty et 是否 al      更新时间:2023-09-26

以下是设置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));
}

现在这确实有效,但我记得不久前,如果不使用transform样式属性的供应商前缀版本设置transitionProperty,浏览器就会拒绝合作,即CSS需要读取-webkit-transition-property: -webkit-transform, opacity;,浏览器才能按照我想要的方式运行。

显然,这在今天同样支持-webkit-transition-property: transform, opacity;的浏览器中仍然适用,但我们可以看到,对于是否为样式名称或在这些样式上设置的样式属性添加供应商前缀,有四种不同的组合可能性。不可想象的是,在未来的某个时刻,一些webkit浏览器会突然停止检查-webkit-前缀。

Modernizr(和Modernizr-docs)为我们提供了用于它们之间转换的基元(prefixed()等),但我不清楚如何对transitionProperty之后的样式是否需要设置前缀样式属性名称进行稳健测试。通过简单地分配无前缀的样式并查看它是否"需要",测试样式本身以查看它们是否需要加前缀是非常简单的。但我不太确定这种方法是否适用于指定样式属性名称的特殊情况。

当然,我可以做一种超可移植的过度杀伤方法,即每当出现这种情况时,设置CSS声明的所有四个组合,如果浏览器支持任何样式,就不会给它留下不愉快的地方。

我对您的应用程序了解不多,不知道这是否适用于您,但http://prefixr.com/提供一个API,你可以通过它运行CSS,如果需要的话,它会向你的CSS添加任何供应商前缀。