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

I don't think there's a better CSS browser selector than the one referred to above by Rafael Lima, so I won't add the link here or examples which are in same post and taken from Rafael Lima's page.

The caveat is that it can only be used outside the CSS selector and doesn't target specific lines of CSS, but it is more robust than standard methods and easier to read.

Answer 2

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 3

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

Answer 4

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 5

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
}

Answer 6

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