IE Stylsheets/ Conditional comments Not working

Question

I am trying to make a website look better in IE, so i decided to use conditional comments. So I used this conditional comment to link to the stylesheet.

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

That doesn't work, and it will either use the default stylesheet or it will display a blank page. So then i read somewhere that the comments were like this.

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

So i tried that and it did the exact same thing as the other one but the --> shows up on the page. I am still somewhat new to html, and any help would be nice.

score 4 · Accepted Answer · answered Dec 21 '12 at 04:56

4

Here is the correct format of the comment:

<!--[if IE ]>
Special instructions for IE here
<![endif]-->

here is a NOT IE comment:

<!--[if !IE ]>
According to the conditional comment this is not IE
<![endif]-->

source: http://www.quirksmode.org/css/condcom.html

edit: just noticed that their 'not' example is wrong. i have corrected it.

answered Dec 21 '12 at 04:56

mkoryak

57,086
61
201
257

Thanks, IT may have been the right code, or the fact that i tried putting the conditional statement in the body rather than the head, but at least it works now, and thanks! – Iqbal Khan Dec 21 '12 at 05:09
considering that the code i provided here was different than the code you used, id say it was the right code ;) – mkoryak Dec 21 '12 at 05:10
11

Unfortunately, it would seem that IE 10+ no longer supports conditions. Source: `https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx` – Logan Hasbrouck Sep 02 '15 at 15:13
2

The good news is, IE-specific hacks are less necessary now that newer versions of IE (and Edge) are more standards-compliant. These days it's usually better to do [feature detection](https://modernizr.com/) instead of browser-detection. – jkdev Oct 15 '15 at 00:44
@LoganHasbrouck The correct link is https://msdn.microsoft.com/en-us/library/hh801214 – borisdiakur Oct 16 '16 at 19:29

score 2 · Answer 2 · edited May 23 '17 at 11:50

2

You should use like this : Syntax :

<!--[if IE 8]> = IE8
<!--[if lt IE 8]> = IE7 or below
<!--[if gte IE 8]> = greater than or equal to IE8


<!--[if IE 8]>
<style type="text/css">
    /* css for IE 8 */
</style>
<![endif]-->

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

reference link 1

reference link 2

edited May 23 '17 at 11:50

Community

1
1

answered Dec 21 '12 at 05:05

Surinder ツ

1,778
3
16
27

score 1 · Answer 3 · answered Dec 21 '12 at 05:01

1

Also its always good to declare what versions of IE you want to pull up the conditional sheet, for example if you want IE 9 and lower it would be as stated below.

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

answered Dec 21 '12 at 05:01

MoMark media

41
2

what if he just wants all versions of IE to use the stylesheet? – mkoryak Dec 21 '12 at 05:02
That's fine just putting IE for all but there is usually some differences between versions of IE and how things display in each version so I just wanted to show how to distinguish versions. – MoMark media Dec 21 '12 at 05:05
Thank you for the help, i finally got it working, and i just wanted it or all versions for now. – Iqbal Khan Dec 22 '12 at 19:11

score 0 · Answer 4 · answered Feb 24 '21 at 06:18

HTML conditional comments were disabled in IE10. CSS conditional comments can be used to target styling in IE10+.
https://www.mediacurrent.com/blog/pro-tip-how-write-conditional-css-ie10-and-11/

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

score 0 · Answer 5 · answered Jun 07 '21 at 17:40

When faced with this problem, we went with the <script type="module"> solution. More details here.

We also wanted to access global variables we set using the ES6 code from other ES5 scripts to determine if we wanted to do something different. Obviously an export isn't going to work in this case, but you can assign variables to window.<something> and then access them like you would any other variable.

Only browsers running ES6 and supporting modules will run scripts included with type="module".

IE Stylsheets/ Conditional comments Not working

5 Answers5