CODEWITHSUNDEEP
csscross-browser
Jeremy
Jeremy

Reputation: 9283

CSS with if/then browser logic

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?

Upvotes: 5

Views: 3780

Answers (7)

Esteban K&#252;ber
Esteban K&#252;ber

Reputation: 36832

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.

Upvotes: 2

Ultima684
Ultima684

Reputation:

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.

Upvotes: 0

Franci Penov
Franci Penov

Reputation: 75981

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.

Upvotes: 9

Slee
Slee

Reputation: 28248

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.

Upvotes: 1

c_harm
c_harm

Reputation:

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

Upvotes: 2

David Andres
David Andres

Reputation: 31781

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.

Upvotes: 1

Gavin H
Gavin H

Reputation: 10482

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

JQuery Attributes

Upvotes: 2

Related Questions