如何设置供应商前缀CSS值（NOT属性名称）|客户端 [英] How to set vendor prefixed CSS values (NOT property names) | client-side

问题描述

< edit> 我实际上已经猜到这会发生但是在发布后几秒钟我得到了一个可能重复的标志，这是不合适的！这个问题关于CSS值和关于CSS属性名称，因此它不是 this 或这个问题！它也不是这一个，因为我是要求通用的解决方案。

如果你仍然不相信或不确定这篇文章的内容，也许你会看看这个问题的底部：我不是在寻找什么和谁没有完成工作< / edit>

<edit> I actually guessed this would happen but just some seconds after posting I got a flag for "possible duplicate" which is not appropriate! This question is about CSS values and NOT about CSS property names and so it's not a dup of this or this question!!! Its also not a dup of this one because I'm asking for a generic solution.
If you are still not convinced or unsure about what this post is not about, maybe you take a look at the bottom of this question: "What I'm NOT Looking For" and "Who Is NOT Getting The Job Done" </edit>

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

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

我很想获得一个关于如何通过JavaScript在客户端设置供应商前缀CSS值的通用解决方案。除此之外，问题是如何做客户端而不是构建过程的一部分（例如POSTcss）。

I would love to get a generic solution on how to set vendor-prefixed CSS values client-side via JavaScript. Besides this the question is about how to do this client-side and not as a part of the build process (eg POSTcss).

但我也赞赏关于任何提示

But I also appreciate any hints on

• 完成工作的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>')

而不是。

例如： -prefix-transform：translate {...}

讨论如何在CSS属性名称上使用供应商前缀的主题eno嗯（而不是我追求的）。

注意：我也完全了解作为构建的一部分使用的前处理器和后处理器过程即可。我的整个CSS工作流程基于Grunt：SASS：Autoprefixer，因此无需就此提出任何建议！

The topic how to use vendor prefixes on CSS property names is discussed enough (and not what I'm after).
NOTE: I'm also totally aware of pre-&post-processors used as part of the build process. My whole CSS workflow is based on "Grunt : SASS : Autoprefixer" so no need to give any suggestions on that!

• - prefix-free 在以供应商为前缀的CSS属性名称方面表现相当不错，但没有处理以供应商为前缀的CSS值。


• 不幸的是，这也是jQuery的情况。

• -prefix-free is doing a pretty good job on vendor-prefixed CSS property names but doesn't take care of vendor-prefixed CSS values.
• Unfortunately, this is also the case with jQuery.

推荐答案

也许 Modernizr 可以解决此问题，例如

maybe Modernizr can fix this, like

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

---

工作原理：

---

How it works:

// 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;
};

这篇关于如何设置供应商前缀CSS值（NOT属性名称）|客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！