Is there a way to do browser specific conditional CSS inside a *.css file?

Question

Is there a way to do browser specific conditional CSS inside a *.css file? I want to define all of the styles inside of the same physical file.

Answer 1

Not sure of a way to do that exactly. We just set the CSS file based on the users browser in codebehind.

Answer 2

Only by means of hacks. Conditional comments are only defined for the markup files, not the .CSS files.

Answer 3

There is a way to do it in IE by taking advantage of bugs in the browser and @import. The best method I've seen is here, courtesy of bobince (and definitely beat out my answer, heh).

In general though, no. Even conditional comments are browser-specific to IE.

Answer 4

No. The whole purpose of using CSS files is that each file represents particular style. If you want to write scripts, you should use PHP or something like that, CSS is merely a description of a single style.

Answer 5

There's multiple hacks (see this somewhat outdated table as an example)

And there's server-side based solutions, such as conditional-css for php

But well written, well structured css should not need that many hacks, only the ocassional ie fix.

Answer 6

you can use this clever javascript file, CSS Browser Selector: http://rafael.adm.br/css_browser_selector/

it allows you to target specific browsers by using class names such as:

.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}