CODEWITHSUNDEEP
csswebkitmedia-queries
NickEntin
NickEntin

Reputation: 441

CSS @media Check if not Webkit

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.

Upvotes: 7

Views: 10806

Answers (3)

aGuegu
aGuegu

Reputation: 2299

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.

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49208

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.

Upvotes: 15

noreabu
noreabu

Reputation: 157

You could try with min:

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

and max:

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

Upvotes: 1

Related Questions