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

Does a transform get applied twice if I include vendor prefix alongside regular syntax?

本文关键字：应用 是否 转换 两次 前缀 常规 语法 供应商 包含 如果      更新时间：2023-09-26

假设我有一个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 前缀。所以只有第二个会起作用。

因此，我通常在代码中包含这两个语句。它似乎有效。但我想知道这是否"不好"。因为也许它会尝试运行这两个转换，特别是如果它在桌面上。不是我注意到的，因为它似乎工作正常，正如你在小提琴上看到的那样。但也许在幕后，这是糟糕的魔术或其他什么。

如果是这样，最好事先确定我是否应该使用"transform"或"-webkit-transform"并只运行一个语句 - 如果是这种情况，我将如何确定？请注意，我在这里谈论的是javascript代码(不是css(。还是像我一样同时运行两者会更好？

你当然可以这样做

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

根据 jQuery 文档，

从 jQuery 1.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 的单个翻译

> 没关系。Web 浏览器将前缀样式和非前缀样式视为相同。例如，在 Chrome 中，transform 的优先级将高于 -webkit-transform，webkit-transform将被完全忽略。然而，不知道transform是什么的浏览器会忽略它并使用-webkit-transform .(我发誓它总是Safari...

这有点像如果你color: red;紧随其后的是color: blue;.文本将是蓝色的，红色无关紧要。

同时拥有这两个语句都很好，因为浏览器只会对元素进行一次转换。 因此，如果浏览器进行第一次转换，它甚至不会尝试执行 -webkit 版本。 这就是为什么如果你必须进行倾斜和翻译，你必须链接转换。

您可以在此处查看更多示例：使用转换属性的多个 CSS 关键帧动画不起作用

相关文章：