我正在寻找

Question

<edit>我实际上已经猜到了这种情况会发生但是在发布后几秒钟我就得到了一个标志，可能重复＃34;哪个不合适！这个问题关于CSS值和关于CSS属性名称，所以它不是this或this问题的重复！！它也不是this one的重复，因为我要求提供通用的解决方案如果你仍然不相信或不确定这篇文章的内容，也许你会看看这个问题的底部：＆＃34;我不想要什么＆＃34;和＃34;谁没有完成工作＆＃34; </edit>

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

我正在寻找

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

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

但我也很欣赏
的任何提示

完成工作的JavaScript / jQuery插件或

可以让我自己解决的其他资源。

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

用例场景

＆＃13;
＆＃13;
/* 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) })();
＆＃13;
* { height: 100%; margin: 0; padding: 0; width: 100%; }
＆＃13;
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?
＆＃13;
＆＃13;
＆＃13;

或想象
之类的东西
jQuery('head').append('<style>body{background:linear-gradient(...)}</style>')

应该是

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

代替。

我不是在寻找

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

讨论如何在CSS属性名称上使用供应商前缀的主题（而不是我之后的内容）。
注意：我也完全了解作为构建过程的一部分使用的前处理器和后处理器。我的整个CSS工作流程基于＆＃34; Grunt：SASS：Autoprefixer＆＃34;所以无需就此提出任何建议！

谁没有完成工作

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

不幸的是，jQuery也是如此。

Answer 1

为了做您要求的事情，您需要一个参考来比较当前使用的浏览器与需要的前缀;比如caniuse。或者你可以使用CSS @supports rule制作一些mixins，但这可能比它的价值更麻烦。

现有解决方案autoprefixer，但需要您使用postcss。 README包含各种构建工具插件的示例。我使用SCSS和autoprefixer，我实现了梦想。

Answer 2

如果属性的值与变量匹配，您可以迭代document.styleSheets，获取"cssRules"的{{1}}和"style"属性，例如{{1} }，使用CSSStyleDeclaration将前缀添加到值

＆＃13;

RegExp

＆＃13;

.replace()

＆＃13;

Answer 3

也许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;
};

Answer 4

与elem.style.background = 'linear-gradient{...}'

不同

您可以使用elem.style.cssText = 'background:linear-gradient{...}; ...'

这种方法可以让您一次向元素添加多种样式，当然是内联的。将仅写入浏览器可以理解的属性。因此，只需采用当前的内联样式elem.getAttribute('style')（字符串，而不是样式对象）或创建空字符串|| ''并添加您自己的样式即可。

let elem = document.getElementById('elem');
let styleAdd = 'background: -prefix-linear-gradient{...}; background: linear-gradient{...};';
elem.style.cssText = (elem.getAttribute('style') || '') + styleAdd;

Answer 5

如果您不确定此主题是否与您相关，请参阅＆＃34;建议|新手的重要提示＆＃34;在第一个答案的底部。

致Ari致answer致{至少指出我正确的方向'。这个解决方案使用了Autoprefixer，你们大多数人可能会将它们与任务运行器一起用作构建设置的一部分（对我来说也是如此）。

不幸的是，我无法获得有关如何将Autoprefixer用作客户端独立版本的信息。所以我只是看看我知道他们正在做同样的任务的网站（即Autoprefixer | UI，CodePen，Sassmeister和JS Bin ）。

这样做的最佳资源是官方Autoprefixer | UI，总而言之 - 实际上并不是什么大不了的事。所以在这里我们使用一个非常基本的模型来说明......

如何使用Autoprefixer客户端

实际上我们需要autoprefixer.process( sInput ).css。

但是让我们将其引导到一个更真实的用例场景。

＆＃13;

// Autoprefixer | ready to rumble
// http://autoprefixer.github.io/assets/code.js?v=1499371172398732683
var sInput  = document.getElementById("AutoprefixerIn").innerHTML,
    sOutput = autoprefixer.process( sInput, {}, {browsers: ["> 0%"]} ).css;

document.getElementById("AutoprefixerOut").innerHTML = sOutput;
document.getElementById("console-AutoprefixerIn").innerHTML += sInput;
document.getElementById("console-AutoprefixerOut").innerHTML += sOutput;

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Autoprefixer.js | Client-Side</title>
<!-- give snippet a better appearance -->
    <style>*{margin:0;padding:0;height:100%;width:100%;}pre{border:2px solid #fff;box-sizing:border-box;overflow:auto;width:50%;}</style>

<!-- Autoprefixer | source, input -->
<!-- IE10+, FF16+, Chrome26+, Opera12+, Safari7+ | prefix for others -->
    <style id="AutoprefixerIn">
        body {
            background: linear-gradient(to bottom, #fefefe 0%,#aaaaaa 100%);
            display: flex;
        }
    </style>
<!-- Autoprefixer | destination, output -->
    <style id="AutoprefixerOut"></style>

<!-- Autoprefixer | load library -->
<!-- view-source:http://autoprefixer.github.io/ | line: 140 -->
    <script src="https://rawgit.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js" crossorigin="anonymous"></script>
    <script> // online fallback in case github is off
        window.autoprefixer || document.write('<script src="https://wzrd.in/standalone/autoprefixer@latest">\x3C/script>');
    </script>
</head>
<body>
<pre id="console-AutoprefixerIn">
    /* display unprefixed original input coming from "style#AutoprefixerIn" */
</pre>
<pre id="console-AutoprefixerOut">
    /* display dynamically generated and prefixed output coming from "style#AutoprefixerOut" */
</pre>

＆＃13;

临

Autoprefixer附带27 special hacks，这可能使它成为目前最具弹性的跨浏览器解决方案。

魂斗罗

Autoprefixer带有重载荷，为626 KB（minified）。

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

我正在寻找

用例场景

我不是在寻找

谁没有完成工作

5 个答案:

工作方式：

如何使用Autoprefixer客户端

临

魂斗罗

推荐|新手的重要说明