1

I want to load this piece of CSS only in windows.

/* total width */
*::-webkit-scrollbar {
    background-color:#fff;
    width:6px
}

/* background of the scrollbar except button or resizer */
*::-webkit-scrollbar-track {
    background-color:#fff
}
*::-webkit-scrollbar-track:hover {
    background-color:#f4f4f4
}

/* scrollbar itself */
*::-webkit-scrollbar-thumb {
    background-color:#babac0;
    border-radius:16px;
    /* border:1px solid #f4f4f4 */
}
*::-webkit-scrollbar-thumb:hover {
    background-color:#a0a0a5;
    /* border:1px solid #f4f4f4 */
}

/* set button(top and bottom of the scrollbar) */
*::-webkit-scrollbar-button {display:none}

It is for a custom scroll bar and on mac the scroll bar is fine the way it is.

I need this to work in every browser in windows.

Is there a way to load a css file containing that piece of css code if the OS is Windows?

Daegarys
  • 87
  • 8
  • @Alex that seems unlikely as that addresses Internet Explorer, not windows as a whole. – Matt Ellen May 07 '19 at 10:22
  • 1
    Possible duplicate of https://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript – Chaska May 07 '19 at 10:22
  • 1
    @Alex They fix it with using a IE conditial comment wich won't work for me as i need it in chrome and firefox too. And only in windows – Daegarys May 07 '19 at 10:23
  • Fair play and good point, I've retracted my close flag. I can't help but think there is something else wrong if its OS specific, rather than browser. – Alex May 07 '19 at 10:25
  • If you haven't already, consider whether you really want a custom scrollbar as changing the appearance of native UI components can degrade user experience. https://en.wikipedia.org/wiki/Principle_of_least_astonishment – Pocketsand May 07 '19 at 10:31

1 Answers1

0

Although the same question has been asked before, this is what you need to do. Use the Navigator object provided by javascript and check for the platform value.

Something like this:

function changeStyle() {
var css = document.createElement('link');
css.rel="stylesheet";
css.type = 'text/css';

if (navigator.platform.indexOf("Win32")!=-1){ /* IF it is windows*/
css.href = 'stylewindows.css';
} else {
css.href = 'style.css';
}

document.getElementsByTagName("head")[0].appendChild(css);
return false;
}
Arindam Dawn
  • 1,199
  • 2
  • 12
  • 30