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

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 2

I have been working on this for many, especially recent browsers -- most versions of Firefox, Webkit, and versions of Internet Explorer. More recently, versions of Safari and Chrome are able to be separated. Some of these I have put on browserhacks.com

It is always best to start with the best CSS you can do first, but these are available for when your time is short and something is needed... yesterday.

Currently for reference, Internet Explorer is version 11, Safari is version 8, Firefox is up to 36 in Development/Aurora versions, and Chrome is up to 41 in Development/Canary versions at the time of this posting.

These are very specific, if they are altered by removing any parts they will not work correctly.

To target any version of Firefox [NOT on iOS! See Below]:

/* Firefox (any) */

_:-moz-tree-row(hover), .selector { color:red; }

To detect new versions of Chrome:

(THIS IS NOT FOR Chrome on iOS!!! --- the developers used the Safari engine on iPads and iPhones instead of Chromium or Mozilla - so you use the Safari hack for iOS versions of those browsers instead)

/* Chrome 29 and newer */

@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
    .selector { color:red; }
}

If you wish to do it you can also target Chrome a little farther back with a combination hack I worked out (this is odd CSS but it works - copy it exactly as you see here):

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
   .selector {-chrome-:only(; 
       color:red; 
   );} 
}

To detect new versions of Safari was just as difficult to work out as Chrome, this one using a nested pair of media queries:

/* Safari 6.1-10.0 */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
   .selector { color:red; } 
}}

Safari updated in late March of 2017 so this one works for 10.1:

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) 
{ @media {
   .selector { color:red; } 
}}

For versions (7.1 and up) you can use this one:

/* Safari 7.1+ (10.1 is the current version as of April 2017) */

_::-webkit-full-page-media, _:future, :root .selector { color:red; }

To target newer versions of Internet Explorer:

/* Internet Explorer 11 */

_:-ms-fullscreen, :root .selector { color:red; }


/* Internet Explorer 10+ AND Microsoft Edge */

_:-ms-lang(x), .selector { color:red; }


/* Internet Explorer 9-11 */

_::selection, .selector { color:red\0; }

/* Microsoft's Edge Browser */

@supports (-ms-ime-align:auto) { .selector { color:red; } }

These are the basics, but to see more of my creations to target many different browser versions see my blog:

https://jeffclayton.wordpress.com

or my live CSS hack test pages:

https://browserstrangeness.bitbucket.io/css_hacks.html MIRROR: https://browserstrangeness.github.io/css_hacks.html

Enjoy!