How to use different CSS files for different browsers?

Question

I'm using a css file that is working properly in some browsers and not in some other browsers like IE and Safari.

Is there any technique to use different .css and .js files for different browser compatibility?

Read [Different CSS files for Different Browsers](http://stackoverflow.com/questions/1706196/different-css-files-for-different-browsers) — Tushar Gupta - curioustushar, Nov 12 '13 at 13:12
For reference, it could be usefull to read over this post http://stackoverflow.com/questions/1294586/browser-detection-versus-feature-detection generally, feature detection > browser detection — sg3s, Nov 12 '13 at 13:12
This article by microsoft itself details a few methods http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx — sg3s, Nov 12 '13 at 13:18

score 3 · Answer 1 · answered Nov 12 '13 at 13:10

3

Absolutely, and this is a great article showing how to do it, that said it is generally perceived to be bad practice- and should be avoided. However, in highly complex or design orientated sites requiring a lot of legacy support it can often be unavoidable, if the caveats are known and accepted. All in all- please dont do it!

answered Nov 12 '13 at 13:10

SW4

69,876
20
132
137

4

Here's a (slightly old but relevant) article pointing out why it's bad practice: http://www.quirksmode.org/js/support.html – StackExchange What The Heck Nov 12 '13 at 13:13

score 1 · Answer 2 · answered Nov 12 '13 at 13:14

For safari you shouldn't need any special css. For IE the common use is to create a special css that overrides some styles:

<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="styleIE.css" media="all">
<![endif]-->

score 1 · Answer 3 · edited May 23 '17 at 12:22

Internet Explorer, up to version 9, supports conditional comments, which allow you to take some HTML and show it to, or hide it from, specific versions of IE. You can use that to deliver specific CSS and JavaScript files to certain versions of Internet Explorer. For example:

<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->

<!--[if lt IE 9]>
<link rel="stylesheet" href="less-than-ie-9.css">
<![endif]-->

Because IE (until version 9) was notably buggy and had significantly less standards support than other browsers, conditional comments are often used to fix it. Paul Irish and others suggest using conditional comments to include several HTML tags on your page, with classes on them identifying which version of IE is being used, so that you can keep your IE-specific CSS in the same stylesheet as the rest of your CSS. For example:

<!--[if lt IE 7]><html lang="en" class="lte-ie9 lte-ie8 lte-ie7 lte-ie6"><![endif]-->
<!--[if IE 7]>   <html lang="en" class="lte-ie9 lte-ie8 lte-ie7"><![endif]-->
<!--[if IE 8]>   <html lang="en" class="lte-ie9 lte-ie8"><![endif]-->
<!--[if IE 9]>   <html lang="en" class="lte-ie9"><![endif]-->
<!--[if !IE><!--><html lang="en"><!--<![endif]-->

(Note, however, that this prevents the X-UA-Compatible meta tag from working, unless you include an empty conditional comment before the doctype. You can see why people are keen to drop support for old versions of IE.)

Other browsers don’t support similar mechanisms. As the link in @ExtPro’s answer shows, browsers do usually have some sort of CSS parsin bug that’s unique to them, which you can use to target code at that browser. However, once you go down that road, you’re relying on buggy behaviour. For all you know, future browsers that you don’t want to target could accidentally include the same bug. In general, the best approach is to code to the standards, and work around any bugs you find in specific browsers.

It’s also worth remembering that some things (e.g. form controls) won’t look the same in different browsers, and that’s okay. It doesn’t usually confuse end users.

score 0 · Answer 4 · answered Mar 20 '15 at 09:37

I found this old question because I had same problem, so I searched. Maybe this is good solution for you. At least for me it is. So here is a code of how to use different styles.css for different browsers.

Only javascript :

<script type="text/javascript">
        var cssId = 'myCss';
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.media = 'all';

        /*----------------------------------------------------------------*/
        var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
        var isFirefox = typeof InstallTrigger !== 'undefined';
        var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
        var isChrome = !!window.chrome && !isOpera; 
        var isIE = /*@cc_on!@*/false || !!document.documentMode;

    if (!document.getElementById(cssId)){
        var output = "";
        if(isFirefox){
            output += "Firefox";
                link.href = 'firefox.css';
                head.appendChild(link);
        }
        else if(isChrome){
            output += "Chrome";
                link.href = 'chrome.css';
                head.appendChild(link);
        }
        else if(isSafari){
            output += "Safari";
                link.href = 'safari.css';
                head.appendChild(link);
        }
        else if(isOpera){
            output += "Opera";
                link.href = 'opera.css';
                head.appendChild(link);
        }
        else if(isIE){
            output += "IE";
                link.href = 'ie.css';
                head.appendChild(link);
        }
        document.body.innerHTML = output;
    }
    </script>

Hope it is helpfull.

How to use different CSS files for different browsers?

4 Answers4