HTML: Using conditional comments

Question

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 :/

Wouldn’t it be better to solve the original problem? I don’t think IE 8 has a problem with properly declared bold typeface. Whatever the original problem is in detail, it may well occur with other browsers too, so using IE version sniffing isn’t the right approach. — Jukka K. Korpela
– Jukka K. Korpela, Commented Mar 7, 2013 at 4:10

rdleal · Accepted Answer · 2013-03-07 01:58:37Z

1

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.

edited Mar 7, 2013 at 1:58

answered Mar 6, 2013 at 23:41

rdleal

1,0227 silver badges16 bronze badges

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

Comments

Étienne Miret · Accepted Answer · 2013-03-06 23:37:11Z

0

Conditional comments are an IE specific feature. Other browsers just treat them as normal comments. Remember that an HTML comment starts with . Hence . On the other hand  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.

answered Mar 6, 2013 at 23:37

Étienne Miret

6,6795 gold badges29 silver badges41 bronze badges

Collectives™ on Stack Overflow

HTML: Using conditional comments

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related