6

I'm trying to create a single CSS file that applies one style if the browser is using webkit, and another if not. I read how to check if it is using Webkit with:

@media (-webkit-min-device-pixel-ratio:0)

However, I can't figure out how to check if it's not using Webkit. I tried adding not in front of the media query, but it doesn't seem to work. Anyone have a solution or a better way to do it? Thanks.

NickEntin
  • 431
  • 4
  • 16
  • Did you try `@media not (-webkit-min-device-pixel-ratio:0)`? – Linus Caldwell Mar 14 '13 at 04:52
  • Yep. Then tried in Chrome and Firefox. The styles inside that don't apply to either. – NickEntin Mar 14 '13 at 05:15
  • 2
    That's not how you *check for webkit*, that's how you check for *min-device-pixel-ratio*, which happens to be a `-webkit` prefixed vendor query. You can [reverse it by understanding what it's testing](http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/), but keep in mind boolean checks for browsers is not a context that works in CSS/media per se. If you want to provide a web-kit uber stylesheet, you would perhaps be better with Javascript loading based on a sniff test or server-side sniffing and include, which is more on the level of what you're up to, I think. – Jared Farrish Mar 14 '13 at 05:18
  • Are you looking for some specific feature related to html/html5 css/css3 or specific browser? – Sahil Popli Mar 14 '13 at 05:22
  • Jared, thanks for the info. I was hoping for a CSS3 answer, but I'm already using jQuery on the page, so I suppose I'll just do it through that. – NickEntin Mar 14 '13 at 05:24
  • 1
    Here's a rather humorous and foul-mouthed rant from the (always awesome Peter-Paul Koch](http://www.quirksmode.org/blog/archives/2012/11/what_the_hells.html) about the wretched state of media query parsing rules and syntax. It really is that bad, too. – Jared Farrish Mar 14 '13 at 05:30
  • Haha that's kind of sad... – NickEntin Mar 14 '13 at 05:44
  • Ok so even the jQuery isn't working for me... What can I use as an alternative to $.browser (or any way to check if -webkit-background-clip is available)? – NickEntin Mar 14 '13 at 05:45
  • 1
    If you're trying to detect particular support for features (by extension some that are webkit-only), you can use [Modernizer](http://modernizr.com/). Things like this evolve, so making presumptions and trying to lockout or wall-in vendor(s) is futile. Progressive enhancement is the best option, but time-consuming and at times more trouble than it's worth. So you could construct your *cascading stylesheets* to inherit to a point the styles you want all browser to have, then overselect to those with the ability to utilize your additional tools. This is how CSS is meant to work, building up. – Jared Farrish Mar 14 '13 at 06:03

3 Answers3

14

I still stand by my comments, but this was the best I could come up with. Once again, not is is not not wrong right. You try to figure that one out.

So:

html, body {
    background: blue;
}
@media all -webkit-device-pixel-ratio {
    body {
        background: black;
        color: red;
        font: bold 28px monospace;
    }
}
@media not -webkit-device-pixel-ratio {
    body {
        background: lime;
    }
}

http://jsfiddle.net/userdude/pyvYA/4/

EDIT

This has also been suggested as working:

@media screen and (-webkit-min-device-pixel-ratio:0) {}

The really fancy thing is that Chrome takes you a not and raises you all. It, of course, sees nothing wrong with matching both, while Firefox dutifully only looks a bit lime.

Good times. You can probably tweak the order and have the all override the not by moving it after; just keep in mind it's inheriting that because, you know, Chrome does what it wants.

Try Modernizr out, with yepnope.js and selectivzr.js. Those are pretty well executed.

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
  • That is both one of the most confusing answers I've received and one of the most interesting. Thanks for your help! :) – NickEntin Mar 14 '13 at 06:44
  • @boltclock - Why did you edit the media queries without checking that they actually continue to work? The first works *the same as before*, but the latter breaks in Firefox. – Jared Farrish Mar 14 '13 at 17:11
  • What do you mean by breaking? Is `not (-webkit-device-pixel-ratio)` applied or ignored by Firefox? The parens are supposed to be there. – BoltClock Mar 14 '13 at 17:18
  • Check it in Firefox; it does not apply. When I looked into it, I found that the `()` with `not` should *not* be there (I think it was the QuirksMode `not` rant page, link in the comments up top) for this type of test. I'm not that cognizant of the media query rules, but when I update to what you edited it to, Firefox no longer shows the lime background. – Jared Farrish Mar 14 '13 at 17:23
  • Oh yeah, `not` needs a media type to work. I don't see why Firefox would ignore `not all and (-webkit-device-pixel-ratio)` though - maybe it's the `-webkit-` prefix that's interfering, or because it's a non-standard media feature. `not all and (grid)` works in Firefox, but not `not all and (asdf)`. As for WebKit, what the hell, it's WebKit, it can do whatever it pleases. Sorry for the trouble. – BoltClock Mar 14 '13 at 17:31
  • @BoltClock - And I'll entirely agree if it's posed that particular "logic" for detecting non-webkit browsers isn't *right*, so to speak. Evidence A is that Chrome still applies it either way, so it kind've stiffs that whole deal. Yet another reason logical deduction in stylesheets is a dumb idea. – Jared Farrish Mar 14 '13 at 17:31
  • 1
    From the looks of it, this seems to be a hack that relies on 1) WebKit interpreting media features without the `()` as media features and 2) other browsers interpreting media features without the `()` as media types (e.g. all, print, screen, projection). Now this all makes sense. You can find the syntax in the spec: http://www.w3.org/TR/css3-mediaqueries – BoltClock Mar 14 '13 at 17:35
  • @BoltClock - Looking at the spec last night, there was a very short sentence calling out that *unknown* queries and *invalid* (maybe a different term) mean different things, which inferred to me that an error is different if it's a wholly wrong thing, as opposed to something just middling errant. Using vendor placeholder pseudo-elements is another good example, whereby the other browsers just sniff and walk past that whole statement if one invalid selector is in the list. – Jared Farrish Mar 14 '13 at 17:35
  • 1
    [This answer](http://stackoverflow.com/questions/13634326/how-to-avoid-media-query-overlap/13649011#13649011) may also be of interest. To clarify your last comment (which I'd somehow missed earlier), an unknown media type is one that isn't recognized by the browser, while an invalid/malformed media query is one that is syntactically wrong. In both cases, though, a browser is expected to ignore the individual media query and continue parsing the rest of the `@media` rule. – BoltClock Mar 25 '13 at 06:56
  • @BoltClock - Thanks. That's applicable to vendor-specific media queries too? – Jared Farrish Mar 25 '13 at 12:54
  • I imagine those would fall under the category of "unknown media features" just like prefixed style properties would be unknown to a browser that doesn't use that prefix. Clearly though in this case, the browsers have it all mixed up. – BoltClock Mar 25 '13 at 12:56
  • @BoltClock - That was quick. I've got to get to work, but I'll see if I can read over this later and think about it a bit more. Need coffee. I appreciate it. – Jared Farrish Mar 25 '13 at 13:00
  • @BoltClock, I keep coming back to the conclusion that media queries are just not well-executed. Why? I have no idea. Like regular expressions, I try to keep mine simple enough to write with a crayon. A big crayon. Anyhow, on another note, [this answer](http://stackoverflow.com/a/15629322/451969) I wouldn't mind hearing what you think about that selector and, if you know, why `.last()` selects the `:eq(0)` every time, no matter which way the selectors are listed. – Jared Farrish Mar 26 '13 at 04:46
  • Worth noting that Chrome 27 will have the lime background. So it seems that this has been patched... – mekwall May 15 '13 at 08:42
  • It is not working... I can see "lime" color on both chrome and firefox – Saurabh Bayani Dec 23 '13 at 12:31
  • 2
    Did not work for me. This did : `@media screen and (-webkit-min-device-pixel-ratio:0) {}` – Alexandre Bourlier Jul 29 '15 at 12:11
  • 1
    @AlexandreBourlier - Thanks. – Jared Farrish Jul 29 '15 at 13:36
  • `@media (-webkit-min-device-pixel-ratio:0) ` work. But no variant of `not` query work. – 1234ru Apr 12 '16 at 20:18
1

You could try with min:

@media screen (-webkit-min-device-pixel-ratio: 0)

and max:

@media screen (-webkit-max-device-pixel-ratio: 0)
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
noreabu
  • 142
  • 8
0

I come to this question when dealing with -webkit-line-clamp, which seems to be a webkit only feature for now.

So the scss mixin I create for this is 

@mixin line-clamp($line) {
  height: calc(1.3em * #{$line});
  &:after {
    content: '...';
  }

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
  }

  @media screen and (min--moz-device-pixel-ratio:0) {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    padding-right: 10px;
    &:after {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}

It uses different media query to separate scss for webkit and firefox.

aGuegu
  • 1,813
  • 1
  • 21
  • 22