如何设置供应商前缀CSS值(NOT属性名称)| 客户端

Question

<edit>我实际上已经猜到这会发生但是在发布后几秒钟我得到了一个"可能重复"的标志,这是不合适的!这个问题是关于CSS值而不是CSS属性名称,因此它不是这个或这个问题的重复!它也不是这个的重复,因为我要求一个通用的解决方案.
如果你仍然不相信或不确定这篇文章的内容,也许你会看看这个问题的底部:"我不是在寻找什么"和"谁没有完成工作" </edit>

如果需要,有没有办法通过JavaScript设置适当的供应商前缀CSS值客户端？

我正在寻找什么

例如: background: -prefix-linear-gradient{...}

我希望得到一个关于如何通过JavaScript在客户端设置供应商前缀CSS值的通用解决方案.其中供应商特定的前缀(-prefix-transform: translate{...},<edit>,</edit>等),这可能是已知的非常好,所以并不在我的问题的范围.这个问题是关于如何做这个客户端而不是构建过程的一部分.

但我也很欣赏任何提示

• 完成工作的JavaScript/jQuery插件或
• 额外的资源可以让我自己解决.

---

如你所见,我已经自己给出了答案.但我仍在寻找更好的解决方案,因为Autoprefixer带有大约626 KB的重载荷!

---

用例场景

/*
Unprefixed version of "linear-gradient" will only work for
browsers: IE10+, FF16+, Chrome26+, Opera12+, Safari7+.
So how to generate a prefixed version on the fly if necessary?
*/

var aVal = ['linear-gradient(to bottom, #fefefe 0%,#aaaaaa 100%)', 'linear-gradient(to bottom, #aaaaaa 0%,#fefefe 100%']
    style = document.getElementsByTagName('BODY')[0].style,
    i = 0;
(function toggle () {

  if ( i++ ) { i = 0; }
  style.background = aVal[ i ];
  /* here we need something like:
  style.background = parseForPrefix( aVal[ i ] );
  */
  setTimeout(toggle, 2000)

})();

* {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

Unprefixed version of "linear-gradient" will only work for<br>
browsers: IE10+, FF16+, Chrome26+, Opera12+, Safari7+.<br>
So how to generate a prefixed version on the fly if nessecary?

或者想象一下像

jQuery('head').append('<style>body{background:linear-gradient(...)}</style>')

应该是这样的

jQuery('head').append('<style>'
    + parseForPrefix('body{background:linear-gradient(...)}') +
'</style>')

代替.

---

我不想要的

例如: background: -prefix-linear-gradient{...}

讨论如何在CSS属性名称上使用供应商前缀的主题(而不是我之后的内容).
注意:我也完全了解在构建过程中使用的前处理器和后处理器.我的整个CSS工作流程基于"Grunt:SASS:Autoprefixer",因此无需对此提出任何建议!

---

谁没有完成工作

• -prefix-free在以供应商为前缀的CSS属性名称方面表现相当不错,但没有处理以供应商为前缀的CSS值.
• 不幸的是,jQuery也是如此.

Answer 1

也许Modernizr可以解决这个问题，比如

// returns: -webkit-linear-gradient(left, red, red)
Modernizr.prefixedCSSValue('background', 'linear-gradient(left, red, red)')

怎么运行的：

// prefixedCSSValue is a way test for prefixed css properties (e.g. display: -webkit-flex)
// @credits modernizr v3.6.0 | Build https://modernizr.com/download?-prefixedcssvalue-dontmin
Modernizr.prototype.prefixedCSSValue = function(prop, value) {
    var result = false;
    var elem = createElement('div'); // basically: document.createElement.apply(document, ['div'])
    var style = elem.style;

    if (prop in style) {
        var i = domPrefixes.length; // domPrefixes === [ "moz", "o", "ms", "webkit" ] or []

        style[prop] = value;
        result = style[prop];

        while (i-- && !result) {
            style[prop] = '-' + domPrefixes[i] + '-' + value;
            result = style[prop];
        }
    }

    if (result === '') {
        result = false;
    }

    return result;
};