Using Conditional Comments the right way

Question

I want to know, when using conditional comments, what is the correct way (pay attention to the closing div tags)

This way, with one closing div for both conditional divs

<!--[if IE]> <div id="IEdiv"> <![endif]--> <!--[if !IE]><!--> <div id="AllOtherDiv"> <!--<![endif]--> <div>The Content</div> </div>

OR

This way, with a closing div for each conditional div, and repeating the SAME html

<!--[if IE]> <div id="IEdiv"> <div>The Content</div> </div> <![endif]--> <!--[if !IE]><!--> <div id="AllOtherDiv"> <!--<![endif]--> <div>The Content</div> </div>

NOTE: You might wonder why I don't just use conditional stylesheets if the inner HTML is the same, but I use inline styles on the conditional divs(I have to) and the inline style for IE is different (necessary because IE sucks so bad with it's css support... )

Thank you

the more traditional route here would be to use one class regardless of browser, and have an IE conditional comment that loads up an IE-specific stylesheet which overrides the standard style rules. This way, if you have javascript on the page, it can find this div via the class name, whether you're in IE or Firefox or Chrome — jackwanders
– jackwanders, Commented Aug 16, 2012 at 19:31

BoltClock · Accepted Answer · 2012-08-16 19:32:14Z

Neither is technically right or wrong, but repeating the contents seems quite a waste if it's going to be the same across browsers. Just conditionalize the start tag as in your first example. HTML comments are designed to allow such a technique.

HTML5 Boilerplate happens to do this with the <html> start tag, by the way, except with classes and slightly different conditional comments, but you can use any attribute you want as long as you target browsers correctly:

<!--[if lt IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html lang="en-us" class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

David Passmore · Accepted Answer · 2012-08-16 19:34:05Z

<!--[if IE]> <div id="IEdiv"> <![endif]--> <!--[if !IE]><!--> <div id="AllOtherDiv"> <!--<![endif]--> <div>The Content</div> </div>

is the right way to do it because you see this on many websites:

<!--[if IE9]> <html class="ie9"> <![endif]--> <!--[if IE8]> <html class="ie8"> <![endif]--> <!--[if lte IE7]> <html class="ie7"> <![endif]--> <!--[if !IE]><!--> <html> <!--<![endif]--> content.... </html>

Collectives™ on Stack Overflow

Using Conditional Comments the right way

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related