How to install a separate stylesheet for each browser?

Question

Layout

For example, found on the Internet

<script type="text/javascript">
  if(window.opera) {
  document.write('<link rel="stylesheet" type="text/css" href="style/opera.css" />');
  }
  </script>

<script type="text/javascript">
  var detect = navigator.userAgent.toLowerCase();
  if((detect.indexOf('safari')) != -1) {
  document.write('<link href="style/safari.css" rel="stylesheet" type="text/css" />');
  }
  </script>

I try - does not work. Are there other ways for major browsers? And do I understand correctly that conditional comments do not work for ie10+?

Answer 1

Try this option:

function get_name_browser(){
    var ua = navigator.userAgent;    
    if (ua.search(/Chrome/) > 0) return 'Google Chrome';
    if (ua.search(/Firefox/) > 0) return 'Firefox';
    if (ua.search(/Opera/) > 0) return 'Opera';
    if (ua.search(/Safari/) > 0) return 'Safari';
    if (ua.search(/MSIE/) > 0) return 'Internet Explorer';
    return 'Не определен';
}

var browser = get_name_browser();
if (browser = 'Google Chrome') {
    var css = document.createElement("LINK");
    css.rel = "stylesheet";
    css.href = "./file.css";
    document.getElementsByTagName("HEAD")[0].appendChild(css);
};
if (browser = 'Firefox') {
    //И так далее
};