0

I'm working on a bootstrap application that renders slightly differently in IE 11, Edge, Chrome... It's minor things (button sizes, small margins), but I can only optimize for one browser. None of them look bad, but only one of them looks perfect.

Is there a way using HTML, CSS, JavaScript, Bootstrap, witchcraft.... to tell different browsers to render things differently?

Note: Conditional comments do not work in IE since version 9.

ale10ander
  • 862
  • 4
  • 23
  • 39

2 Answers2

2

you can use javascript 

navigator.sayswho= (function(){
    var ua= navigator.userAgent, tem,
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

from:https://stackoverflow.com/a/2401861/4337247

Community
  • 1
  • 1
JMR
  • 755
  • 1
  • 8
  • 28
  • I understand the beginning, asking for the user agent (which seems like what I want to do). What is...well, the rest of this code doing? Just returning a "friendly" browser name? edit: Followed the link for an explanation. – ale10ander Jun 05 '15 at 22:32
  • 1
    But this just tells me what my browser is, yes? It doesn't actually let me render different things with that knowledge. – ale10ander Jun 05 '15 at 22:36
  • 1
    that part you can change the class/id that the tag HTML have and in that way you have different css for each different browser – JMR Jun 06 '15 at 09:25
1

I'd suggest using a plugin that uses JavaScript to detect the user's browser, and you can write CSS as needed that is specific to each browser.

Here's a popular browser detection plugin:
https://github.com/gabceb/jquery-browser-plugin

And here's an example of what your code might look like:

<style type="text/css">
#browsername {
    color: #fff;
    padding: 10px;
    text-transform: capitalize;
}
.firefox #browsername, .chrome #browsername {
    background: #f00;
}
.chrome #browsername {
    background: #357;
}
.msie #browsername {
    background: #00f;
}
.safari #browsername {
    background: #0f0;
}
.opera #browsername {
    background: #000;
}
.iphone #browsername {
    background: #ccc;
    color: #000;
}
</style>
<div id="browsername">
    <script>document.write($.browser.name + ' browser ' + $.browser.versionX + 'x' + '.');</script>
    <script>document.write($.layout.name + ' layout engine ' + $.layout.version + '.');</script>
</div>

Code example from: http://jquery.thewikies.com/browser/

jordajm
  • 764
  • 5
  • 11