如何为不同的浏览器组合相同的 css 样式

Question

我正在使用querySelector来更改某些元素的样式。

对于某些样式，不同的浏览器有不同的版本。在这种情况下，fit-content适用于Chrome，-moz-fit-content适用于Mozilla。

如果我想在 Chrome 上运行，代码如下所示：

document.querySelector('.my-element').style.height = "fit-content";

对于 Mozilla：

document.querySelector('.my-element').style.height = "-moz-fit-content";

我的问题是：有没有办法将它们结合起来？使用上述工作方式，一次只能很好地使用一个浏览器，我想同时适用于两个浏览器。

Answer 1

应避免浏览器检测/嗅探，因为可能的答案范围很大，不可预测(且可变(。

在CSS中定义包含所需前缀的类，并将类添加(或替换(到元素MDN：className。JavaScript 将是一个单一的语句，添加一个已经列出所有供应商前缀的类。

.anotherclass {
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
}
document.querySelector('.my-element').className = 'anotherclass';

如果你愿意，你也可以使用像PrefixR或类似的工具，在你的样式表中添加前缀。

同样值得指出的是，我可以用来检查您是否仍然需要一些前缀。

Answer 2

如果您可以使用navigator.appCodeName来选择您想要的style.height，这是可能的。

例如：

if(navigator.appCodeName == "Mozilla"){
document.querySelector('.my-element').style.height = "-moz-fit-content";
}else{
document.querySelector('.my-element').style.height = "fit-content";
}

"Mozilla"是Chrome，Firefox，IE，Safari和Opera的应用程序代号。

Answer 3

可能会有所帮助，您可以检测如下所示的浏览器

window.browser = (function () {
return window.msBrowser ||
window.browser ||
window.chrome;
})();
console.log(window.browser);