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?

Franci Penov · Accepted Answer · 2009-09-08 23:37:17Z

9

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.

answered Sep 8, 2009 at 23:37

Franci Penov

76.1k18 gold badges136 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gavin H · Accepted Answer · 2009-09-08 23:09:10Z

2

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

JQuery Attributes

answered Sep 8, 2009 at 23:09

Gavin H

10.5k3 gold badges38 silver badges44 bronze badges

Comments

c_harm · Accepted Answer · 2009-09-08 23:32:52Z

2

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

answered Sep 8, 2009 at 23:32

c_harm

Comments

Esteban Küber · Accepted Answer · 2009-09-09 12:56:21Z

2

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.

edited Sep 9, 2009 at 12:56

answered Sep 8, 2009 at 23:18

Esteban Küber

37k15 gold badges82 silver badges97 bronze badges

4 Comments

ChssPly76 Over a year ago

Not within "single css file" OP was asking about.

Esteban Küber Over a year ago

@ChssPly76: It was an option, not a requirement. But you are right, this option requires two files (I normally just override some things on the IE specific style sheet). Anyway, I still think this is a cleaner approach.

Franci Penov Over a year ago

Note that this will create the IE-specific style for all versions of IE, not only <IE7

Esteban Küber Over a year ago

@Franci Penov: I just wanted to give him a pointer, but you were right, so I updated the answer.

David Andres · Accepted Answer · 2009-09-08 23:15:37Z

1

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.

answered Sep 8, 2009 at 23:15

David Andres

31.9k7 gold badges48 silver badges36 bronze badges

Comments

Slee · Accepted Answer · 2009-09-08 23:36:53Z

1

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.

answered Sep 8, 2009 at 23:36

Slee

28.4k55 gold badges151 silver badges249 bronze badges

Comments

Ultima684 · Accepted Answer · 2009-09-09 01:15:41Z

0

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.

answered Sep 9, 2009 at 1:15

Ultima684

1 Comment

Esteban Küber Over a year ago

There are easier ways, look at the other answers here.

Collectives™ on Stack Overflow

CSS with if/then browser logic

7 Answers 7

Comments

Comments

Comments

4 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related