CODEWITHSUNDEEP
cssinternet-explorer-8commentsconditional-statements
Hossam Khe
Hossam Khe

Reputation: 3

HTML: Using conditional comments

Good day,

I want to apply two different CSS codes to fix some font-rendering issue (faux bold) in IE8, the latter cannot recognize all the font-family if they've got the same name, instead it only recognize the first font-family, so i'm attempting to use conditional comments to fix that :

First code is for older versions of IE (including IE8) :

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

Second one is for IE9, IE10 and all non-IE browsers (Chrome, Firefox, Opera, Safari...), none of them has this faux bold issue :

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

I know the first code is correct (or maybe not :p) , so i want to know if the second is correct too, because i don't get what i expect when i change compatibility mode in IE, certainly there is something wrong in the condition [if IE 9 | !IE] I also want to know the correct order (if there is one) to put those two conditional comments. Please help me with this because i'm kind a newbie in anything related to compatibility :/

Upvotes: 0

Views: 201

Answers (2)

rdleal
rdleal

Reputation: 1032

You could apply the css for IE9+ and other browsers first, and then apply the conditional comment for IE8 or less, so the rules for font-family in fonts.css would be overridden by the rules in IE8fonts.css, if the browser is less than or equal to IE8. This way you can avoid complex and unnecessary conditional comments. 

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

Hope it helps.

Upvotes: 1

&#201;tienne Miret
&#201;tienne Miret

Reputation: 6650

Conditional comments are an IE specific feature. Other browsers just treat them as normal comments. Remember that an HTML comment starts with <!-- and ends with -->. Hence <!--[anything]> is the beginning of a normal comment, and non-IE user-agent will ignore anything after that until the next occurence of -->. On the other hand <!--[anything]><!--> is a full comment and non-IE browsers will process whatever is after that.

So I suggest you use:

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

From the point of view of a regular HTML parser (non-IE), this is two regular comments enclosing a link element.

Upvotes: 0

Related Questions