Geek asks and answers

CSS @media Check if Webkit is working

I am trying to create one CSS file that applies one style if the browser uses webkit and the other if not. I read how to check if it uses Webkit with:

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

However, I cannot figure out how to check if it is using Webkit. I tried adding notbefore the media query, but it doesn't seem to work. Anyone have a solution or a better way to do this? Thank.

+5
source share
3 answers

I still stick to my comments, but that was the best I could come up with. Again, notthis is not entirely wrong. You are trying to figure it 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

It was also suggested to work:

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

- , Chrome . , , , Firefox .

. , , , , , ; , , , , Chrome , .

Modernizr out, yepnope.js selectivzr.js. .

+8

min:

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

max:

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

, -webkit-line-clamp, -.

, scss mixin, ,

@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;
    }
  }
}

- scss webkit firefox.

0

More articles:


All Articles