Show content if <noscript> OR <!--[if lte IE 7]> conditional comment is met, without duplicating content?

Question

I'm developing a Javascript-driven interactive tool that does not support IE6 or IE7.

If someone turns up using old IE, or, using a browser with Javascript disabled, we give them some simple static content as a fallback: plain images and text.

I could just do this by duplicating that static content, one copy in a <noscript> block, and one copy in a conditional comment, like this...

<!--[if lte IE 7]>
<div id="some-id">
<p> Some content </p>
<img src="url.com" alt="Screenshot of awesome tool" title="This is what you're missing" />
<p> Some more content </p>
<div id="some-more"> ... etc ... </div>
</div>
<![endif]-->

<noscript><![if !(lte IE 7)]> 
<div id="some-id">
<p> Some content </p>
<img src="url.com" alt="Screenshot of awesome tool" title="This is what you're missing" />
<p> Some more content </p>
<div id="some-more"> ... etc ... </div>
</div>
<![endif]></noscript>

...but if possible, it's better to avoid duplicating content like this. No unnecessary weight, easier to update, no risk of any search engine bot interpreting hidden duplicated content as keyword spamming, etc etc. Plus, avoiding duplication is just a generally good practice.

(Plus, we could lose the horrible <![if !(lte IE7)]> in the <noscript> tag... it's there in case someone has IE6 or IE7 with Javascript disabled, so they don't see content twice... I've heard of some corporate systems who have legacy custom-built systems tied to old versions of IE doing this as a horrible way to make old IE slightly more secure...)

If I wrap the conditional content in the <noscript>, or vica versa, it will be 'AND' logic - only shown when both conditions are satisfied (IE6 / 7 with Javascript disabled).

Is there any way to make it work by 'OR' logic - so there is one block of content, and that one block of content is shown if no Javascript, OR if IE less than version 7? Or some clever simple reliable way using Javascript to switch the <noscript> on if the browser has Javascript enabled and is an old version of IE (ideally, without waiting for document ready)?

Since I'm already using conditional comments, strict standards compliance isn't a big deal, e.g. if there was a way that involved script in an attribute of the <noscript> tag, that would be fine. jQuery syntax is fine, too.

A simple, clean way to offer one block of fallback content to old IE or noscript browsers would be a very useful thing.

Answer 1

I think I've cracked it without needing any javascript (and, using only valid HTML!), after idley browsing to this question which has an answer showcasing the <!--[if !(IE)]><!--> Anyone but IE <!--<![endif]--> trick:

<!--[if gt IE 7)]><!--> <noscript> <!--<![endif]-->
<div> Content here </div>
<!--[if gt IE 7)]><!--> </noscript> <!--<![endif]-->

The noscript tags, therefore the noscript condition, are only read if it's not old IE. So old IE shows the content regardless of whether javscript is active, and non-old-IE only shows the content if the noscript condition is met.

---

To clarify...

Non-IE browsers skip over the comments, reading it as:

<!-- blah blah --> <noscript> <!-- blah blah -->
<div> Content here </div>
<!-- blah blah --> </noscript> <!-- blah blah -->

IE 8+ sees the conditional comments, meets the criteria, and reads everything. This immediately closes the comments and shows the <noscript> tags:

<!-- --> <noscript> <!-- -->
<div> Content here </div>
<!-- --> </noscript> <!-- -->

Old IE sees the conditional comments, fails the criteria, and so skips everything until it hits the [endif]. With no <noscipt> tag, it always shows the fallback content:

<!--[STOP READING]...[START READING]-->
<div> Content here </div>
<!--[STOP READING]...[START READING]-->