Search code examples
htmlconditional-comments

HTML / Conditional Comments - Do conditional comments behave as expected across browsers?


Do conditional comments behave as expected across browsers? Can they cause rendering bugs or other issues?

Are there any errors in the formatting/syntax of this CC?

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="718" height="227" id="swf">
    <param name="movie" value="images/swf.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/swf.swf" width="718" height="227">
    <!--<![endif]-->
        <img src="images/alt.jpg" border="0" width="718" height="227">
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

Solution

  • Conditional CSS comments are specific to IE on windows. See what wikipedia has to say.

    If used correctly, they will be interpreted as regular comments in other browsers. It really depends on how you are using them.

    The example you posted will not work correctly, as you are supposed to wrap the whole conditionals in an HTML comment.

    Wrong:

    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/swf.swf" width="718" height="227">
    <!--<![endif]-->
        <img src="images/alt.jpg" border="0" width="718" height="227">
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
    

    Right:

    <!--[if !IE]>
    <object type="application/x-shockwave-flash" data="images/swf.swf" width="718" height="227">
    <![endif]-->
        <img src="images/alt.jpg" border="0" width="718" height="227">
    <!--[if !IE]>
    </object>
    <![endif]-->