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 ment, like this...

<!--[if lte IE 7]>
<div id="some-id">
<p> Some content </p>
<img src="url" 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" 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 ments, strict standards pliance 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.

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 ment, like this...

<!--[if lte IE 7]>
<div id="some-id">
<p> Some content </p>
<img src="url." 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." 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 ments, strict standards pliance 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.

• javascript
• html
• internet-explorer
• noscript
• conditional-ments

• 2 Why don't you put your "noscript" content into the <noscript> tag and show it by using javascript, if browser is (IE6 / 7)? You'll just have to detect the browser via JS for that. But you don't have duplicate content. – pebbo Commented Oct 28, 2012 at 12:22
• @pebbo I was thinking that would probably be the only logically possible way assuming no HTML tricks I'm unaware of (I edited something like that in just after posting) - but I'm not sure of the best, most clean, most reliable way to 'activate' a <noscript> with JS, that works reliably on old IE, during pageload. Turn it into a div? Remove wrapper? Or is there a better way? – user56reinstatemonica8 Commented Oct 28, 2012 at 12:24
• I think it would be totally ok, if you do something like $('body').html($('noscript').html()) in your javascript, if it detected IE6/7. – pebbo Commented Oct 28, 2012 at 12:34

1 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 ments, reading it as:

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

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

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

Old IE sees the conditional ments, 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]-->