7

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.

5 Answers 5

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.

5
  • 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
    Commented Dec 21, 2012 at 5:09
  • considering that the code i provided here was different than the code you used, id say it was the right code ;)
    – mkoryak
    Commented Dec 21, 2012 at 5: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 Commented Sep 2, 2015 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 instead of browser-detection.
    – jkdev
    Commented Oct 15, 2015 at 0:44
  • @LoganHasbrouck The correct link is msdn.microsoft.com/en-us/library/hh801214 Commented Oct 16, 2016 at 19:29
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

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]-->
3
  • what if he just wants all versions of IE to use the stylesheet?
    – mkoryak
    Commented Dec 21, 2012 at 5: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. Commented Dec 21, 2012 at 5:05
  • Thank you for the help, i finally got it working, and i just wanted it or all versions for now.
    – Iqbal Khan
    Commented Dec 22, 2012 at 19:11
0

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
}
0

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".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.