CSS to target only IE10 and BELOW only (not IE11)?

Question

Is there a straightforward way of targeting CSS for IE10 and below? IE11 works fine (the CSS I'm using is now supported) but I need to add specific CSS for anything below.

I know I can use this up to IE9:

<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->

But conditional comments are not supported in IE10, and I don't want to target IE9 in the content meta tag as I want to use 11/Edge by default (I don't want to be stuck in the past!).

Using IE specific media queries isn't an option as that will apply the CSS to IE11 as well which I don't want to do. The reason I want to target anything below IE11 only is that I have a set of 'backup' CSS that I want to apply when the default 'proper' CSS (which works with IE11, Chrome, Firefox etc.) can't be applied.

I also tried doing it backwards - having the backup CSS as the default and then having the good CSS specifically target:

IE11+ using _:-ms-fullscreen :root

Chrome using @supports (-webkit-appearance:none)

Firefox using @supports (-moz-appearance:meterbar)

But this didn't work, as IE11 was still picking up parts of the default CSS. Chrome and Firefox displayed the specific CSS correctly but then had all sorts of other issues with the rest of the site styles.

Any ideas on how I can specifically target IE10 without also targeting IE11?

Thanks

30 sec on google and found these link. please check css-tricks.com/ie-10-specific-styles and impressivewebs.com/ie10-css-hacks and keithclark.co.uk/articles/…. ty — Leo the lion
– Leo the lion, Commented Aug 6, 2015 at 12:16
I have already tried those - the first two use JavaScript and I'm looking for a CSS answer, and the third one effects IE11 as well as it is using a media query. No need for the down vote. — Lyall
– Lyall, Commented Aug 6, 2015 at 12:29
sorry but i did not gave you down vote. i just gave you link. — Leo the lion
– Leo the lion, Commented Aug 6, 2015 at 12:30

Christophe · Accepted Answer · 2015-08-06 12:26:37Z

2

Don't check for browser but rather the feature you are trying to use. Modernizr allows to check if a specific feature is supported in your current browser or not -> http://modernizr.com/

Also checking for browser in IE 11 won't work like you would expect, they changed the agent name from IE to Mozilla (read more)

Here is more info regarding @support and modernizr -> http://demosthenes.info/blog/964/A-Browser-Native-Modernizr-Using-supports-in-CSS (scroll down a bit)

answered Aug 6, 2015 at 12:26

Christophe

4,8285 gold badges46 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lyall Over a year ago

Thanks for these - I was hoping not to have to delve into Modernizr (was looking for a quick win) but I'll look into this a bit more. I know the feature I want to use is not supported in IE10 which is why I want to apply the alternate CSS (box-shadow instead of border-image). Thanks

Lyall Over a year ago

Using the @supports not is looking like what I'm after! Will give that a go, thanks!

Christophe Over a year ago

Never settle for the quick win. Do it right the first time :D and you are welcome ;)

Lyall Over a year ago

Added modernizr and using .borderimage and .no-borderimage before the relevant CSS works perfectly! Thanks

Anthony Collins · Accepted Answer · 2015-11-05 14:37:42Z

-1

Just used this on a website I'm doing for a client to target IE10 and 11:

var doc = document.documentElement;

doc.setAttribute('data-useragent', navigator.userAgent);

var userAgent = $('html').attr('data-useragent');

if ( userAgent.indexOf('MSIE 10.0') >=0 || userAgent.indexOf('Trident') >=0  ) {
    /* YOUR CODE */
}

This adds the attribute data-useragent to the HTML element and populates it with the navigator.userAgent (a good way to identify the browser). Then it uses the 'if' argument to detect a particular string in that attribute, for example IE10 has MSIE 10.0 and IE11 has Trident.

Hope this helps somebody!

answered Nov 5, 2015 at 14:37

Anthony Collins

499 bronze badges

Collectives™ on Stack Overflow

CSS to target only IE10 and BELOW only (not IE11)?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related