如何为不同的浏览器组合相同的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或类似工具，为样式表添加前缀。

另外值得指出的是Can I use来检查你是否还需要一些前缀。

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);