0

I want to have a particular CSS style different for IE6. Basically I am using CSS sprites with a PNG file. But for IE6 I want to use the .gif version.

I dont want to use the <!-- if lte IE6 statement. I want to include it within my CSS file itself.

How do I do that?

Edit:

I need this because I want my users to include a single CSS file and not 4 lines of code. My users are absolute newbies. I don't want to confuse them. Plus the only change I want is to use .gif instead of the current .png.

Edit:

How does _background-image: sound? Is there anything wrong with that?
Alternatively, can I use a conditional statement inside a CSS file?

Community
  • 1
  • 1
Alec Smart
  • 94,115
  • 39
  • 120
  • 184
  • 3
    may i ask why you're against using conditional statements? i'm not sure if it's even possible to do what you're talking about... – Chris Drappier Jun 12 '09 at 15:28
  • 4
    Conditional comments are the recommended way of doing this, and the only valid reason I can think of going with css hacks like "* html" is if the additional download really is crippling. I would strongly avoid user-agent sniffing though. – annakata Jun 12 '09 at 15:31
  • @Chris - it's very possible, in fact there's at least a dozen hacks to do it :) – annakata Jun 12 '09 at 15:32
  • Same question - why not conditional statements? – roryf Jun 12 '09 at 15:33
  • 1
    Of course it's possible. CSS is just like any other text you could spit out conditionally. – belgariontheking Jun 12 '09 at 15:33
  • "I need this, because I want my users to include a single CSS file and not a complex 4 line code." If they can figure out where a block is and insert CSS stylesheets there, they should be intelligent enough to copy an extra three lines into that same place. – ceejayoz Jun 12 '09 at 15:34
  • @OP: by "users" do you mean "fellow developers?" What product are you creating where your users are developing html code? – belgariontheking Jun 12 '09 at 15:36
  • @annakata, I see now there are hacks, but it seems like a big furry mess to use them when you could just namespace your IE style properly with a conditional statement. @rich, I think you'll find that it's more confusing in the end to try to do all of the styles in one sheet rather than have 2. yeah, you're only trying to do one change now, but if your app is successful, that will not be the case in the future. – Chris Drappier Jun 12 '09 at 15:41
  • Is anyone else surprised by how many people seem to be unaware of CSS hacks? Now I know I'm old. – annakata Jun 15 '09 at 14:43

6 Answers6

8

If you don't want to use conditional comments, then you can use the * html hack:

h1 {
    color: green;
}

* html h1 {
    color: red; /* this will only be applied by IE 6, 5.5, 5, and 4 */
}
NickFitz
  • 34,537
  • 8
  • 43
  • 40
  • +1 for the answer Alec is looking for ... but certainly not for encouraging css hacks when IE conditional statements are far better. – Ryan Florence Jun 12 '09 at 15:32
  • reducing downloads is a valid reason, but one that should apply to fewer and fewer sites these days – annakata Jun 12 '09 at 15:36
  • 3
    Obviously conditional comments (not statements) are better, but they are specifically excluded in the original question. I reckon this is the least-harmful alternative. – NickFitz Jun 12 '09 at 15:39
4

Apparently you can put IE6 specific statements into a CSS by prefixing them with an underscore.

See http://vexxhost.com/blog/2007/03/01/only-css-hack-you%E2%80%99ll-ever-need-seriously/

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
2

As you obviously will have noticed from the answers you're getting, using conditional comments for this is so standard that people tell you to do that even when you've specifically said you don't want to.

But if you absolutely have to have the user agent determination made at the CSS file level, what I would do is write a PHP script that outputs the CSS (rather than HTML) and analyze the user agent in PHP. If the file has to be referred to as stylesheet.css or whatever, Apache rewrites or MultiViews can be used to make a PHP script available under that name.

chaos
  • 122,029
  • 33
  • 303
  • 309
1

Here's a pretty comprehensive list of unrecommended hacks: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml

Max Schmeling
  • 12,363
  • 14
  • 66
  • 109
1

You said you don't want to use conditional statements, but they are very much the recommended and best way to go. The main reason is maintinability, CSS browser hacks are often hard for the next person, or you several months down the line, to understand. Having non-hacky CSS in a completely separate file makes it far easier to manage.

I would very much recommend you don't do user agent sniffing, it is open to lots of problems, for instance many browsers report themselves as IE even when they are not (default in Opera 7 I think). The User-Agent string is not to be trusted and should only be used as a last resort.

roryf
  • 29,592
  • 16
  • 81
  • 103
  • If you don't recognise a CSS hack I don't think you've any business changing the CSS file, but regardless the maintenance issue is more concerned with getting crossfire of what CSS will and will not be applied by future browsers and exotic unintended browsers. – annakata Jun 12 '09 at 15:34
  • It's not about recognising a CSS hack it's about knowing WTF it's supposed to do. Agree about the future-proofing, hence why conditionals are recommended. There's times when I've wished Safari/Firefox had something similar... – roryf Jun 12 '09 at 18:13
0

Use a conditional comment.

<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css">
<![endif]-->

edit: Now that Wellbog has fixed your question, no, there's no way to do that with pure valid CSS.

You could conceivably use PHP or another server-side language to detect IE6 from the user agent string and serve a different CSS file, but it's much better to just use the conditional commenting technique.

What's your reason for refusing to use the existing, working, non-hacky solution Microsoft provides?

ceejayoz
  • 176,543
  • 40
  • 303
  • 368