Targeting IE versions greater than 9 without javascript

Question

Since IE 10+ versions don't support conditional comments, What other ways do you suggest to apply certain CSS rules to these versions. I already used this to cover IE9 and older verions:

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

Also is there any way to put CSS rules for all IE versions in one file but distinguish some of them for specific IE versions by commenting or something like that?

Edit: In this case, There's no possibility to do sever-side detection too.

Yes this question states "only JS" but there are CSS only answers covered in that Question. — rlemon, Jan 27 '14 at 18:53
**You don't target IE**. You don't target *any browser*. This breaks the web. If you need help writing a cross-browser solution that degrades gracefully, Stack Overflow will help. — Sampson, Jan 27 '14 at 19:00
@DummyBeginner like I mentioned. yes **some** of the answers are JavaScript, but if you read down there are **css only** solutions.. however I tend to agree feature detection is much better than trying to conditionally target browsers. — rlemon, Jan 27 '14 at 19:03
I'd be inclined to agree with Jonathan, especially since version 10 gives developers a lot less headaches than its predecessors. However, the question asked paints a real world situation where sadly, measures such as these have to be taken at one point or another in a project. — Igor Zinken, Jan 27 '14 at 19:03
@rlemon Do You mean `@media screen and (min-width:0\0)` ? That's nice except it mentioned only supports IE 9 & 10, not 11. What about this? — DummyBeginner, Jan 27 '14 at 19:05
There are 19 answers ranging from php to js to css. Pick one and roll with it (or at the very least try it) — rlemon, Jan 27 '14 at 19:06
@IgorZinken If you're targeting browsers, rather than features, you're doing *something* wrong. That is the general rule, and I have rarely ever seen an exception. — Sampson, Jan 27 '14 at 19:10
@JonathanSampson I really don't tend to do this myself, But think got to. Here's the case: Just used `font-face` and works fine on browsers which use any font types except `woff` because the web server is IIS and doesn't support it by default ([Why is @font-face throwing a 404 error on woff files?](http://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files)). I may not add `woff` type to IIS config too (something related to hosting guys) and the only way I have at least till near future is to change font properties for `woff` kind browsers — DummyBeginner, Jan 27 '14 at 19:26
@DummyBeginner Your host should add support for woff; if they refuse to do so, share their name with us here so we know not to use their services. — Sampson, Jan 27 '14 at 20:03
@JonathanSampson It's a local service and don't provide public services. Anyway What should I do, I think just targeting :D You see this is one of those rare exception to targeting browsers — DummyBeginner, Jan 27 '14 at 20:10
@DummyBeginner You cannot efficiently target a browser. Browsers change, constantly, and any attempt at identifying them today may be broken tomorrow. Case in point, one answer below tells you to look for "MSIE" in the user agent string - but this won't work for IE11. You may try to write a script to target IE11 too, but will it work for IE12? It's best to fix things the proper way, insisting that IIS be updated. — Sampson, Jan 27 '14 at 21:22
@JonathanSampson Thanks. But needs scripting yet. Maybe have to get along at javascript finally — DummyBeginner, Jan 27 '14 at 21:49

Igor Zinken · Answer 1 · 2014-01-27T19:05:08.263

1

If IE ignores the conditionals and JavaScript is no option, the only solution I can think of is by sniffing the user agent on the server side, assuming you are not serving a straight HTML file, but HTML generated by a backend / server side scripting language. If you see 'MSIE 10' in the user agent string, you can change the generated HTML to output a specific IE10-class in the body-tag.

Note that you must have a very good reason to do this as you cannot use feature detection when unable to run client side code...

edited Jan 27 '14 at 19:05

answered Jan 27 '14 at 18:59

Igor Zinken

806
4
13

1

Note that the user agent string changed between IE10 and IE11, and no longer mentions "MSIE \d". So any chance to *sniff* the browser/version will fail if it expects this pattern to be present. – Sampson Jan 27 '14 at 20:04

score 0 · Answer 2 · answered Jan 27 '14 at 18:59

Without Javascript

Depends on your server side set up. In PHP you can access use get_browser() after a bit of config. You can then spit back specific css, or just add a class to the body/html (not sure if adding classes to html element is valid though.

With Javascript

JS/jQuery

if ($.browser.msie && $.browser.version == 10) {
  $("body").addClass("ie_ten");
}

CSS

body.ie_ten{
    /* ie specific stuff */
}

Targeting IE versions greater than 9 without javascript

2 Answers2

Without Javascript

With Javascript

JS/jQuery

CSS