0

I hope you can help me. I need to load a css for each browser, (chorme, safari, mozilla, ie). I have found a solution to which I add the safari option, but still it does not work.

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

on the page there is an HTML5 audio player, in each browser this player changes color, so they must be different for each one.

Emmanuel Grooviedelik
  • 11
  • 1
  • Do you mean that it works with all browsers except Safari? – SaidbakR Sep 04 '17 at 19:59
  • 2
    Possible duplicate of [How to detect Safari, Chrome, IE, Firefox and Opera browser?](https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser) – ThePHPAddicted Sep 04 '17 at 20:03

1 Answers1

2

Take a look on Modernizr and Conditionizr.

Reasons:

  1. They are good Javascript libraries
  2. You don't re-invent the wheel. DRY principle
  3. They get updated, they adapt to all major browser changes so you don't have to keep track of the evolution of all browsers

http://conditionizr.com/

https://modernizr.com/

I know this is not an exact answer and I can be downvoted, but I think is the best way to go. Which can works today for a Safari version, tomorrow can fail.

For conditionizr you have an example just for your case in 

https://github.com/conditionizr/conditionizr/blob/master/docs/DOCS.md#basic-config-setup
madtyn
  • 1,469
  • 27
  • 55