224

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.

Improve this question
8
  • 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?... Commented Feb 9, 2015 at 18:51
  • For Fireofox: stackoverflow.com/questions/952861/… Commented Feb 9, 2015 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. Commented Feb 9, 2015 at 18:53
  • @War10ck: this is entirely within the embedded stylesheet. CSS only. Commented Feb 9, 2015 at 18:54
  • 1
    If you need a solution inside your CSS, I only can think in JavaScript. I found this rafael.adm.br/css_browser_selector but it's a little outdated. Commented Feb 9, 2015 at 19:03

5 Answers 5

Reset to default
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 specified for embedded stylesheet. I think you need to use media query and conditional comment for below version.

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

6 Comments

Good enough, I tested that this fix does not affect Edge browser, JIC someone wondered.
also needs @supports (-ms-accelerator:auto) for edge see below
For Edge, using @supports (-ms-ime-align:auto) instead of -ms-accelerator works for me
-ms-high-contrast:active affects Edge if the the system is in using high-contrast mode.
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.)
|
12

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/

Improve this answer

Comments

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; } }
Improve this answer

Comments

3

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 }; }
Improve this answer

Comments

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; }
Improve this answer

4 Comments

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.
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.
And yes @supports is another solution if you can't edit html tag etc
@supports (-ms-ime-align:auto){ .myclass{ /*styles*/ } }

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.