CODEWITHSUNDEEP
csscross-browser
craigmoliver
craigmoliver

Reputation: 6562

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

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.

Upvotes: 19

Views: 27711

Answers (8)

Jeff Clayton
Jeff Clayton

Reputation: 7301

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!

Upvotes: 7

Brad Elfman
Brad Elfman

Reputation: 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.

Upvotes: 0

Ara_Abc
Ara_Abc

Reputation:

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
}

Upvotes: 5

spiral
spiral

Reputation: 608

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.

Upvotes: 0

Malcolm
Malcolm

Reputation: 41498

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.

Upvotes: 0

Dan Lew
Dan Lew

Reputation: 87440

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.

Upvotes: 7

AaronSieb
AaronSieb

Reputation: 8266

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

Upvotes: 3

Jeremy Cron
Jeremy Cron

Reputation: 2392

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

Upvotes: 0

Related Questions