Conditional StyleSheets IE

working on lt-ie9 lt-ie8 lt-ie7 fallback

by Leo Lanese

HTML

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

    <div id="container">
        <h1>image type:</h1>
    </div>

 </body>
</html>

CSS

/* images public domain by the Open Clip Art Library: http://openclipart.org/ */

/* common code goes here */
#container {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}


h1:after {
   content:" .svg :)";
}

#container {
    background-image: url('http://leolanese.com/portfolio/files/mediaQueries11/images/magic.svg');
    background-repeat: no-repeat;
}


/* working on fallback using prefix for IE*/
.lt-ie9 h1:after {
   content:" fallback .png :'(";
}
.lt-ie9 #container{
    background-image: url('http://leolanese.com/portfolio/files/mediaQueries11/images/magic.png');
    background-repeat: no-repeat;
}

.lt-ie8 h1:after {
   content:" fallback .png :-p";
}
.lt-ie8 #container
{
    background-image: url('http://leolanese.com/portfolio/files/mediaQueries11/images/magic.png');
    background-repeat: no-repeat;
}

JavaScript

if ($('html').hasClass('lt-ie9')){ 
    alert("lt-ie9");
};