如果我将供应商前缀包含在常规语法中，是否会应用两次转换？

说我有一个div如果我将供应商前缀包含在常规语法中，是否会应用两次转换？

<div id='box'></div>

而且在JavaScript/jQuery的我走了：

$('#box').css('transform','translateX(300px)'); 
$('#box').css('-webkit-transform','translateX(300px)');

https://jsfiddle.net/foreyez/7fuL77h3/

现在我可以运行（或两者）的句子，它会在运行桌面（Chrome）。但在移动设备上，尤其是iOS，某些版本要求您使用-webkit前缀。所以只有第二个会起作用。

因此，我通常在我的代码中包含这两个语句。它似乎工作。但我想知道这是否“坏”。因为它可能会尝试运行这两种转换，特别是如果它在桌面上。不是我注意到，因为它看起来工作正常，你可以看到小提琴。但也许在幕后它是坏的魔咒或什么的。

如果是这样会是更好的做法预先确定我是否应该使用“变换”或“-webkit-改造”，只是运行一个说法 - 如果是这样的话，我将如何确定？注意我在这里说javascript代码（不是css）。或者像我在做的那样运行，会更好吗？

来源

2016-02-05 foreyez

这很好。 Web浏览器认为前缀和非前缀样式相同。例如，在Chrome中，transform将具有比-webkit-transform更高的优先级，并且webkit-transform将被直接忽略。然而，一个不知道transform的浏览器会忽略它并使用-webkit-transform。（我发誓它总是Safari ...）

这有点像如果你有color: red;紧接着color: blue;。文本将是蓝色的，红色并不重要。

来源

2016-02-05 21:01:19

是的，但这是在CSS中，我明白的CSS是好的。但如果它在代码中。它不是首先运行第一个语句，然后当它到达第二个语句时是不是会尝试再次运行它？ – foreyez

它可能开始运行动画，但由于浏览器没有区别（用变换替换变换），它只是继续动画。 –

也经常背对背的CSS修改发生得足够快，以至于它们击败了下一个渲染框架，并且无论如何将被同时应用。 –

你很好，因为浏览器只会做一次元素的转换。因此，如果浏览器进行第一次转换，它甚至不会尝试执行-webkit版本。这就是为什么如果你必须扭曲并翻译它，你必须链接变换。

您可以在这里看到更多的例子：Multiple CSS keyframe animations using transform property not working

来源

2016-02-05 21:04:04 Avitus

你当然可以做这样的

$('#box').css({ 
    'transform' : 'translateX(300px)', 
    '-webkit-transform' : 'translateX(300px)' 
});

来源

2016-02-05 21:11:34 LGSon

按照jQuery docs，

对于jQuery 1.8，名为.css（中）setter会自动处理属性名称的前缀。例如，在Chrome/Safari中将.css（“user-select”，“none”）设置为-webkit-user-select，Firefox将使用-moz-user-select，IE10将使用-ms-user -选择。

因此，请确保您使用的是1.8+，并让jQuery为您查找属性。

要回答实际问题，您应该很容易看到300px的翻译是否应用了两次。这将相当于600px的单一翻译

来源

2016-02-05 21:19:11

如果我将供应商前缀包含在常规语法中，是否会应用两次转换？

回答

相关问题