CSS with if/then browser logic

Question

For browsers < IE7, I want to use a certain style attribute, while for other browsers I'd like to use another. Can I do this using a single css file, or do I have to do if then logic to include an ie hack css file?

Answer 1

Well you could use javascript to detect the browser and apply a class based on that. For example, see:

JQuery Attributes

Answer 2

You can use CSS Expressions to some extent.

See http://gadgetopia.com/post/2774 for some examples. These don't get around conditional CSS attributes per se, but they do allow you to dynamically vary the values of CSS attributes.

Answer 3

You could use conditional comments:

<!--[if lt IE 7]>
  <style>
    /*your style for IE <=6*/
  </style>
<![endif]-->

<![if !IE | (gte IE 7)]>
  <style>
    /*your style for other browsers*/
  </style>
<![endif]>

I've found it to be the cleanest solution for this kind of thing.

Answer 4

You could use CSS hacks. But you shouldn't.

Answer 5

on the jQuery tip check out this plugin: http://jquery.thewikies.com/browser/

a plugin to do what ghills suggests, this is a nice clean way to go.

Answer 6

Here's an example how you can include an IE6-specific CSS to override specific CSS classes for IE 6 or lower:

<link rel="stylesheet" type="text/css" href="/css/screen.css" title="MySiteStyle" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/screen-ie6.css" title="MySiteStyle" media="screen" />
<![endif]-->

Alternatively, you can do it on per-element basis like this:

<!--[if (!IE) | (gt IE 6)]>
<div class="header">
<![endif]--> 
<!--[if lte IE 6]>
<div class="ie6_header">
<![endif]-->

MSDN has some more details about IE Conditional Comments support.

Answer 7

The following page will show you 6 CSS hacks specifically for IE7. You shouldn't use them, but they're the easiest way for getting the exact right look for your website.