Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Best practice is to use feature detection, not browser sniffing or conditional comments. And, moreover, these conditional comments will disappear in IE10, I understand, so this will stop working soon.</p> <p>Regardless, you should check out two projects (FOSS of course): Modernizr.com (I don't think this will help directly here though) and h5bp.com (HTML5 Boilerplate dot com). The latter is chock full of great best practices and one in particular is to use conditional comments in the HTML like so:</p> <pre><code>&lt;!doctype html&gt; (you don't have to use HTML5 here, this will still work) &lt;!--[if lt IE 7]&gt; &lt;html class="no-js ie678 ie6" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if IE 7]&gt; &lt;html class="no-js ie678 ie7" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if IE 8]&gt; &lt;html class="no-js ie678 ie8" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js" lang="en"&gt; &lt;!--&lt;![endif]--&gt; </code></pre> <p>Note that this essentially sets different classes on your html element. So, if the user is using IE8, then there will be a class <code>ie8</code> AND <code>ie678</code> on the HTML element.</p> <p>Then, in your CSS, you merely need to do something like this:</p> <pre><code>.ie678 { background-image:url('img/ieback.png'); } .ie678 { background-repeat:repeat-x; } </code></pre> <p>And naturally, these two style rules will be enabled.</p> <p>Best of luck!</p> <p>PS. I mention Modernizr.com above because its all about feature detection. You <em>can</em> use it to detect whether CSS Gradients are supported, but it won't necessarily tell you if the IE filters will work. However, you could simply detect if the gradients work, if not, then use an MS-filter and hope for the best. I suspect that the Conditional Comments are more what you're after though.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload