I am in need of assistance. My goal is to load a specific CSS file for each browser (Chrome, Safari, Mozilla, IE). I came across a solution that includes the Safari option, but unfortunately it is not working as expected.
<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>
There is an HTML5 audio player on the page, and its color changes based on the browser. As a result, the CSS styles must be unique for each browser to maintain consistency with the player's appearance.