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

假设我有一个div

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

现在我可以运行其中一个（或两个）句子，它将在桌面（Chrome）上运行。但在移动设备上，特别是在iOS上，某些版本要求您具有-webkit前缀。因此，只有第二种方法有效

因此，我通常在代码中包含这两个语句。这似乎奏效了。但我想知道这是否“坏”。因为它可能会尝试运行两种转换，尤其是在桌面上。我没有注意到，正如你在小提琴上看到的那样，它似乎工作正常。但也许在幕后是坏巫术什么的

---

如果是这样的话，事先确定是否应该使用“transform”或“-webkit transform”并只运行一条语句会更好吗？如果是这样的话，我将如何确定？注意，我这里讲的是javascript代码（不是css）。还是像我这样两个都跑会更好？

很好。Web浏览器认为前缀和非前缀样式是相同的。例如，在Chrome中，

transform

将具有比

-webkit transform

更高的优先级，

webkit transform

将被完全忽略。然而，一个不知道什么是

transform

的浏览器会忽略它并使用

-webkit transform

。（我发誓永远都是狩猎……）

---

这有点像你的

颜色：红色紧接着是
颜色：蓝色。文本将是蓝色的，红色不重要。
没关系。Web浏览器认为前缀和非前缀样式是相同的。例如，在Chrome中，
transform
将具有比
-webkit transform
更高的优先级，
webkit transform
将被完全忽略。然而，一个不知道什么是
transform
的浏览器会忽略它并使用
-webkit transform
。（我发誓永远都是狩猎……）

这有点像你的
颜色：红色紧接着是
颜色：蓝色。文本是蓝色的，红色不重要。
两种语句都可以，因为浏览器只对元素进行一次转换。因此，如果浏览器进行第一次转换，它甚至不会尝试执行-webkit版本。这就是为什么如果你必须做倾斜和翻译，你必须链变换

您可以在这里看到更多示例：
您可以同时使用这两个语句，因为浏览器只对元素进行一次转换。因此，如果浏览器进行第一次转换，它甚至不会尝试执行-webkit版本。这就是为什么如果你必须做倾斜和翻译，你必须链变换

您可以在这里看到更多示例：
您当然可以这样做

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

你当然可以这样做

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

据报道,

从jQuery1.8开始，.css（）setter将自动为属性名添加前缀。例如，Chrome/Safari中的.css（“user select”，“none”）将其设置为-webkit user select，Firefox将使用-moz user select，IE10将使用-ms user select

因此，请确保您使用的是1.8+，并让jQuery为您处理该属性

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

从jQuery1.8开始，.css（）setter将自动为属性名添加前缀。例如，Chrome/Safari中的.css（“user select”，“none”）将其设置为-webkit user select，Firefox将使用-moz user select，IE10将使用-ms user select

因此，请确保您使用的是1.8+，并让jQuery为您处理该属性

要回答实际问题，您应该很容易看到300px的翻译是否应用了两次。这相当于一个600px的单一翻译
是的，但这是在css中，我知道css很好。但如果是在代码中。它不是先运行第一个语句，然后当它运行到第二个语句时，它不会再次尝试运行它吗？它可能会开始运行动画，但因为浏览器没有区别（用transform替换transform）它只是继续动画。而且通常背对背的CSS修改发生得足够快，以至于它们超过了下一个渲染帧，并且无论如何都会同时应用。是的，但这是在CSS中，我理解CSS是可以的。但如果是在代码中。它不是先运行第一个语句，然后当它运行到第二个语句时，它不会再次尝试运行它吗？它可能会开始运行动画，但因为浏览器没有区别（用transform替换transform）它只是继续动画。通常，背对背的CSS修改发生得足够快，以至于它们超过了下一个渲染帧，并且无论如何都会同时应用。