CSS @media Überprüfen, ob nicht Webkit

Ich versuche, eine einzelne CSS-Datei zu erstellen, die einen Stil anwendet, wenn der Browser Webkit verwendet, und einen anderen wenn nicht. Ich habe gelesen, wie Sie überprüfen, ob es Webkit verwendet mit:CSS @media Überprüfen, ob nicht Webkit

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

Allerdings kann ich nicht herausfinden, wie zu überprüfen, ob es nicht Webkit verwenden. Ich habe versucht, not vor der Medienabfrage hinzuzufügen, aber es scheint nicht zu funktionieren. Jeder hat eine Lösung oder einen besseren Weg, es zu tun? Vielen Dank.

Quelle

2013-03-14 NickEntin

Haben Sie '@media nicht versucht (-webkit-min-device-pixel-ratio: 0)'? –

Ja. Dann in Chrome und Firefox versucht. Die Stile darin gelten nicht für beide. – NickEntin

Das ist nicht wie Sie nach Webkit * suchen, das ist, wie Sie für * min-Gerät-Pixel-Verhältnis *, die zufällig eine '-webkit'-Präfix Vendor-Abfrage ist. Sie können [es umkehren, indem Sie verstehen, was es testet] (http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/), aber denken Sie an boolesche Überprüfungen für Browser ist kein Kontext, der in CSS/Medien per se funktioniert. Wenn Sie ein Web-Kit-Uber-Stylesheet zur Verfügung stellen möchten, wäre es vielleicht besser, wenn Sie Javascript basierend auf einem Sniff-Test oder serverseitigem Sniffing und Include verwenden, was mehr auf dem Niveau Ihrer aktuellen Arbeit liegt, denke ich. –

Ich stehe immer noch zu meinen Kommentaren, aber das war das Beste, was ich mir vorstellen konnte. Noch einmal, not ist nicht falsch, nicht wahr. Du versuchst das herauszufinden. 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

Dies wurde auch als Arbeits vorgeschlagen:

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

Die wirklich Lust daran ist, dass Chrome bringt Sie ein nicht und Rosinen es euch allen. Es sieht natürlich nichts falsch daran, beides zusammenzufassen, während Firefox pflichtgemäß nur ein wenig limitiert aussieht.

Gute Zeiten. Sie können wahrscheinlich die Reihenfolge optimieren und haben alle überschreiben die nicht durch Verschieben nach; denken Sie daran, dass es das erbt, weil, wie Sie wissen, Chrome macht, was es will.

Versuchen Sie Modernizr, mit yepnope.js und selectivzr.js. Diese sind ziemlich gut ausgeführt.

Quelle

2013-03-14 06:23:36

Das ist eine der verwirrendsten Antworten, die ich erhalten habe und eine der interessantesten. Danke für Ihre Hilfe! :) – NickEntin

@boltclock - Warum haben Sie die Medienabfragen bearbeitet, ohne zu überprüfen, dass sie tatsächlich weiter funktionieren? Das erste funktioniert * das gleiche wie zuvor *, aber letzteres bricht in Firefox ein. –

Was meinst du mit brechen? Wird 'nicht (-webkit-device-pixel-ratio)' von Firefox angewendet oder ignoriert? Die Parens sollen da sein. – BoltClock

Sie könnten mit min versuchen:

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

und max:

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

Quelle

2013-03-14 11:40:53 noreabu

ich auf diese Frage kommen, wenn sie mit -webkit-line-clamp handelt, die eine webkit nur für jetzt verfügen zu sein scheint.

So ist die SCSS mixin ich dafür schaffen, ist

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

Es verschiedenen Medien Abfrage verwendet SCSS für WebKit und Firefox zu trennen.

Quelle

2015-09-17 04:31:17 aGuegu

Antwort

Verwandte Themen