javascript - 为每个浏览器加载 CSS

Question

我希望你能帮助我。我需要为每个浏览器(chorme、safari、mozilla 等)加载一个 css。我找到了一个添加了 safari 选项的解决方案，但它仍然不起作用。

<script type="text/javascript">
 var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other';
    if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="/css/chrome.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
    document.write('<'+'link rel="stylesheet" href="css/mozilla.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="css/explorer.css" />');
} else if (BrowserDetect.browser.indexOf("safari")>-1) {
    document.write('<'+'link rel="stylesheet" href="css/safari.css" />');
}
</script> 

在页面上有一个 HTML5 音频播放器，在每个浏览器中这个播放器都会改变颜色，所以它们必须是不同的。

Answer 1

看看 Modernizr 和 Conditionizr。

原因:

1. 它们是很好的 Javascript 库
2. 您不会重新发明轮子。 DRY原则
3. 它们得到更新，它们适应所有主要浏览器的变化，因此您不必跟踪所有浏览器的演变

http://conditionizr.com/

https://modernizr.com/

我知道这不是一个确切的答案，我可能会被否决，但我认为这是最好的方法。对于 Safari 版本今天可以工作，明天可能会失败。

对于 conditionizr，您在

中有一个针对您的案例的示例

https://github.com/conditionizr/conditionizr/blob/master/docs/DOCS.md#basic-config-setup