6

I tried putting the IE conditional in a CSS file, but that didn't appear to work. Is there a construct for CSS so you can tell it to use this background color if the browser is IE? I also couldn't find anything on if then else conditionals, does it exist? Can someone provide an example.

Xaisoft
  • 45,655
  • 87
  • 279
  • 432

5 Answers5

17

The IE conditional(s) go in the HTML, and should be used to include an additional CSS file that will overwrite CSS as needed for IE hacks.

Example:

<head>
    <style type="text/css">
    @import url(/styles.css);
    </style>
    <!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="ie6.css" />
    <![endif]-->
</head>
Chad Birch
  • 73,098
  • 23
  • 151
  • 149
11

I've taken my cue from jQuery and use my conditional formatting to create container elements

<body class="center">
<!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
<!--[if IE 8]><div id="ie8" class="ie"><![endif]-->
    <div class="site text-left">

    </div>
<!--[if IE]></div><![endif]-->
</body>

then I can put the conditional information in css like such

.site { width:500px; }
.ie .site { width:400px; }
#ie5 .site { width:300px; }
bendewey
  • 39,709
  • 13
  • 100
  • 125
  • I use this trick, myself. It makes your CSS files tidier *and* prevents you from having to worry about selector precendence. – Ben Blank Feb 20 '09 at 20:21
  • Interesting approach, I hadn't seen this before. I personally would rather keep my markup tidy than my CSS. But to each their own! – Mark Hurd Feb 20 '09 at 20:32
  • @Mark Hurd The additional payload created by this is fairly equivalent to what would be needed if you did other conditional comments. And, if your design didn't need all version num cases you could shrink this code down too. – bendewey Feb 20 '09 at 20:40
3

There's no such conditionals in CSS, but you can use the "Holly hack" if the differences between various versions of IE aren't significant:

div.class { /* whatever */ }
* html div.class { /* IE-only */ }
greyfade
  • 24,948
  • 7
  • 64
  • 80
2

The [conditional comments](http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx) are HTML comments and thus cannot be used in a CSS context.

If you want to aim specific CSS rules just to IE, you have to use CSS hacks.

Gumbo
  • 643,351
  • 109
  • 780
  • 844
1

I would recommend to use something similar to the solution proposed by bendewey, but go for conditional classes around the html tag instead. As far as I know this was first mentioned in Paul Irish's Blog ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ )

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

and then in the css you use:

.box {background: blue;}
.ie7 .box {background: green;}

This has some advantages in comparison to the solution using an extra div. For the details check the post above.

PatrickHeck
  • 451
  • 4
  • 3