How to target only IE (any version) within a stylesheet?

Question

I have an inherited project and there are places where it's an utter mess. This is one of them. I need to target only IE (any version) without changes to HTML and without JavaScript or any other technology except CSS.

#nav li {
    float: left;
    height: 54px;
    background: #4f5151;
    display: table;
    border-left: 1px solid grey;
}

To be clear: Inside the embedded stylesheet and without adding ID's or classes to the tags in the html, I need to apply the border style only if the user is using IE. How can I do this?

Edit: found a solution for Firefox, editing question to reflect this.

You're question is a little confusing. Are you referring to vendor prefixes for CSS properties or are you referring to identifying a user's browser through UA sniffing and then applying the stylesheet only if it matches?... — War10ck, Feb 09 '15 at 18:51
For Fireofox: http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css — nikoskip, Feb 09 '15 at 18:51
To target IE you have to modify your HTML file and add conditional comments, for IE10 you will also need some Javascript because it comes with 0 support for conditional comments. **EDIT** there are some CSS hacks to target some versions of IE, but that's also the problem - those are hacks. — Ramiz Wachtler, Feb 09 '15 at 18:53
@War10ck: this is entirely within the embedded stylesheet. CSS only. — user4593252, Feb 09 '15 at 18:54
If you need a solution inside your CSS, I only can think in JavaScript. I found this http://rafael.adm.br/css_browser_selector/ but it's a little outdated. — nikoskip, Feb 09 '15 at 19:03
What was the solution for Firefox? I'm intrigued because I can't think of a way to possible due this without JavaScript or without editing the HTML source... — War10ck, Feb 09 '15 at 19:13
That @-moz-document hack works but I had been coding it wrong. O.o — user4593252, Feb 09 '15 at 19:29
@MatthewG: not exactly since I need a .css embedded stylesheet solution.However, it's close enough that I'm considering whether or not to delete this question on that basis. — user4593252, Feb 09 '15 at 19:31

score 487 · Answer 1 · edited May 26 '16 at 17:02

487

Internet Explorer 9 and lower : You could use conditional comments to load an IE-specific stylesheet for any version (or combination of versions) that you wanted to specifically target.like below using external stylesheet.

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

However, beginning in version 10, conditional comments are no longer supported in IE.

Internet Explorer 10 & 11 : Create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12 : Can use the @supports rule Here is a link with all the info about this rule

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

Inline rule IE8 detection

I have 1 more option but it is only detect IE8 and below version.

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

As you specefied for embeded stylesheet. I think you need to use media query and condition comment for below version.

edited May 26 '16 at 17:02

Community

1
1

answered Feb 09 '15 at 21:00

Jay Patel

5,783
1
17
20

16

Good enough, I tested that this fix does not affect Edge browser, JIC someone wondered. – j4v1 Jan 28 '16 at 14:45
also needs @supports (-ms-accelerator:auto) for edge see below – Phyllis Sutherland Jun 28 '17 at 19:11
7

For Edge, using @supports (-ms-ime-align:auto) instead of -ms-accelerator works for me – SeventhSteel Sep 23 '17 at 14:25
`-ms-high-contrast:active` affects Edge if the the system is in using high-contrast mode. – ShortFuse May 07 '19 at 12:00
The `@supports` solution is really great: feature detection is the way to go. I was willing to target Edge due to its lack of support of `width: max-content`: `@supports not (width: max-content)` does it neatly, and will be nicely ignored when Edge ends up supporting it. (It should happen in 2019 Fall, since it should then switch to Chromium for rendering.) – Frédéric Jun 30 '19 at 10:09

score 12 · Answer 2 · edited Mar 01 '23 at 21:48

When using SASS I use the following 2 media queries to target IE 6-10 & Edge.

@media screen\9
    @import ie_styles
@media screen\0
    @import ie_styles

https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/

I also target later versions of Edge using @supports (add as many as you need)

@supports (-ms-ime-align:auto)
    @import ie_styles
@supports (-ms-accelerator:auto)
    @import ie_styles

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

score 8 · Answer 3 · answered Dec 09 '19 at 15:04

8

For targeting IE only in my stylesheets, I use this Sass Mixin :

@mixin ie-only {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @content;
  }
}

answered Dec 09 '19 at 15:04

Ilham Moutaharik

81
1
2

ShortFuse · Answer 4 · 2019-05-07T13:15:44.733

After experiencing issues with sites breaking on Edge when using High Contrast Mode, I came across the following work by Jeff Clayton:

https://browserstrangeness.github.io/css_hacks.html

It's a crazy, weird media query, but those are easier to use in Sass:

@media screen and (min-width:0\0) and (min-resolution:+72dpi), \0screen\,screen\9 {
   .selector { rule: value };
}

This targets IE versions expect for IE8.

Or you can use:

@media screen\0 {
  .selector { rule: value };
}

Which targets IE8-11, but also triggers FireFox 1.x (which for my use case, doesn't matter).

Right now I'm testing with print support, and this seems to be working okay:

@media all\0 {
  .selector { rule: value };
}

score 1 · Answer 5 · answered Nov 12 '17 at 04:50

1

Another working solution for IE specific styling is

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

And then your selector

html[data-useragent*='MSIE 10.0'] body .my-class{
        margin-left: -0.4em;
    }

answered Nov 12 '17 at 04:50

Sahib Khan

557
4
19

Unfortunately, per the original post, the html could not be edited. I've looked a little into your proposed solution and it has merit if you can plan for this ahead of time. – user4593252 Nov 15 '17 at 17:55
You might be right as per the post, but non of the solutions work for latest IE versions. The conditional styling is no more supported. – Sahib Khan Nov 16 '17 at 05:47
And yes @supports is another solution if you can't edit html tag etc – Sahib Khan Nov 16 '17 at 05:49
@supports (-ms-ime-align:auto){ .myclass{ /*styles*/ } } – Sahib Khan Nov 16 '17 at 05:50

How to target only IE (any version) within a stylesheet?

5 Answers5

Linked

Related