Pick CSS for IE8 works in emulator but NOT directly on IE8

Question

I'm detecting the browser version using jQuery and setting CSS based on the browser version.

if ( getBrowserVersion() == '8' ) {
    $('head').append('<link href="/css/MSIE8.css" rel="stylesheet" id="MSIECSS8" />');
}

function getBrowserVersion() {
    var ua = navigator.userAgent, tem,
        M = ua.match(/(opera|chrome|safari|firefox|msie|wow64|trident(?=\/))\/?\s*(\d+)/i) || [];
    if ( /trident/i.test( M[1] ) ) {
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE ' + ( tem[1] || '' );
    }
}

This works when I emulate IE8 in IE11 using F12-developer tools. But it doesn't pick the CSS when I run the website directly on IE8. Any idea on how to make this work? Appreciate your help!

See this proof-safe IE8 detection which works all the time -> http://stackoverflow.com/a/21856263/1407478 (disclaimer, answer by me) — davidkonrad, May 27 '15 at 18:21
@davidkonrad hmmmm... you're testing the useragent in that answer. Not always foolproof. — Mr Lister, May 27 '15 at 18:28
What is the code for `getBrowserVersion()` as it appears that is where your problem is? In general IE specific conditional comments are the most reliable way I'm aware of to distinguish different IE versions (before IE11). — jfriend00, May 27 '15 at 18:29
@MrLister, You are right, not sure it will work in an emulator, but sure IRL. I have not so much confidence in MS developer tools anyway. — davidkonrad, May 27 '15 at 18:29
@davidkonrad I meant that the useragent can be spoofed. I often need to do this myself, for instance for websites that don't like Linux or anything except Chrome. — Mr Lister, May 27 '15 at 18:32
@jfriend00 Please find the method below function getBrowserVersion() { var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|wow64|trident(?=\/))\/?\s*(\d+)/i) || []; if (/trident/i.test(M[1])) { tem = /\brv[ :]+(\d+)/g.exec(ua) || []; return 'IE ' + (tem[1] || ''); }} — Meenakshi Sundaram, May 27 '15 at 18:34
@MrLister, and how would you spoof NOT native browser support for SVG and DATA? — davidkonrad, May 27 '15 at 18:34
@MeenakshiSundaram - please add the code for that function to your question using the "edit" link. Multiline code is not readable in comments. If you want foolproof detection of older IE versions, you should use IE conditional comments. — jfriend00, May 27 '15 at 18:38
@davidkonrad 'm not trying to pretend that my browser supports things it really doesn't. That would be silly. I can only fool the website into thinking that my browser is Chrome under Windows, so that it serves up contemporary HTML. — Mr Lister, May 27 '15 at 18:40
@MrLister, yes - so your objection didnt gave much sense after all. Feature detection is a really good way to do browser detection. MS suggest it themselves -> https://msdn.microsoft.com/en-us/library/hh273397%28v=vs.85%29.aspx — davidkonrad, May 27 '15 at 18:46
@davidkonrad And I see now that the OP uses useragent detection too. Oh well. — Mr Lister, May 27 '15 at 18:51
The most likely cause of your issue is your useragent sniffing isn't working as intended. I suggest using conditional comments instead. — Kevin B, May 27 '15 at 18:55
uhm.... google it.... or even search stackoverflow. http://stackoverflow.com/questions/21613462/conditional-comments — Kevin B, May 27 '15 at 18:58
I think I got it. Thank you all. you're right. useragent sniffing doesn't work for IE8 — Meenakshi Sundaram, May 27 '15 at 19:05

score 6 · Accepted Answer · answered May 27 '15 at 23:38

6

You should avoid all user-agent sniffing, unless it is absolutely necessary. In this case, it is not necessary. If you wish to load a custom stylesheet for Internet Explorer 8, use the features provided by the browser itself, namely Conditional Comments:

<head>
    <!--[if IE 8]>
        <link href="/css/MSIE8.css" rel="stylesheet" id="MSIECSS8" />
    <![endif]-->
</head>

This will be parsed only in Internet Explorer, versions prior to 10. And only in Internet Explorer 8 will it result in the addition of the MSIE8.css stylesheet to the document.

Generally speaking, anything more than this just complicates your project unnecessarily.

answered May 27 '15 at 23:38

Sampson

251,934
70
517
549

1

Conditional comments is the best way. An alternative, if you'd like to serve IE8 specific CSS, without loading another style sheet is to use conditional comments round the `html` tag instead: ``. Use the IE8-specific class as part of the selector, e.g.: `.ie8 .primary` (thanks [Paul Irish](http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)) – webinista May 28 '15 at 18:45
@webinista That approach was once used by the HTML5 Boilerplate, but [caused some problems](https://github.com/h5bp/html5-boilerplate/issues/1187) that users should be mindful of. As with all things, proceed with caution - there be dragons :) – Sampson May 28 '15 at 18:49
1

So -- for posterity's sake -- is using this technique on the `body` element safe, or should it only be used as you've done it above? (Balancing extra HTTP request vs not, until HTTP/2 makes this a moot point :-).) – webinista May 28 '15 at 18:55
3

@webinista Good question; to be honest, I've avoided wrapping `` or `` in conditional comments *just to be safe*. If you wish to use a class such as `.ie8` (as they are indeed super convenient), I would probably do so in an progressive-enhancement way, doing something like `document.body.className += ' ie8'` from within an IE 8 Conditional Comment. Though, that is a little more verbose than the wrapping technique. Using on `` *may* work, given the `x-ua-compatible` meta tag would have already been parsed at that point. – Sampson May 28 '15 at 19:00
@webinista Another alternative would be to insert a wrapper div only for IE8 immediately after the body tag, which would work even with Javascript disabled. `` ... ``. – shshaw Jun 01 '15 at 20:11
The nice people from the [HTML5 Boilerplate](http://bit.ly/1dIybb0) project provided what could be considered the [standard solution](http://bit.ly/1M6t5AB) to the problem and also released some [helpful docs](http://bit.ly/1KAhPva) about why they use it. A lot of projects used this in production without problems and support for it has only been [dropped](http://bit.ly/1AHSdN5) from the project when legacy browser support was given up altogether. There are some smaller [pitfalls](http://bit.ly/1Jm5lZv) though, notably [IE ignoring the `X-UA-Compatible` directive](http://bit.ly/1Q2fe40). – bfncs Jun 02 '15 at 08:04
@boundaryfunctions This is why Jonathan's solution is a good one: it avoids that pitfall. – webinista Jun 04 '15 at 17:19

Pick CSS for IE8 works in emulator but NOT directly on IE8

1 Answers1