CSS @media Verificare se non WebKit

Sto cercando di creare un singolo file CSS che si applica uno stile, se il browser utilizza WebKit, e un altro in caso contrario. Ho letto come verificare se sta usando Webkit con:CSS @media Verificare se non WebKit

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

Tuttavia, non riesco a capire come controllare se non sta usando Webkit. Ho provato ad aggiungere not di fronte alla query multimediale, ma non sembra funzionare. Qualcuno ha una soluzione o un modo migliore per farlo? Grazie.

fonte

2013-03-14 NickEntin

Hai provato '@media not (-webkit-min-device-pixel-ratio: 0)'? –

Sì. Quindi provato in Chrome e Firefox. Gli stili interni che non si applicano a nessuno dei due. – NickEntin

Non è così che si controlla * per il webkit *, è così che si controlla * min-device-pixel-ratio *, che risulta essere una query del venditore con prefisso '-webkit'. Puoi [capovolgerlo comprendendo cosa sta testando] (http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/), ma tieni presente i controlli booleani per i browser non è un contesto che funziona in CSS/media di per sé. Se si desidera fornire un foglio di stile uber del kit web, sarebbe meglio con il caricamento di Javascript basato su un test sniff o su sniffing e inclusione sul lato server, che è più all'altezza di ciò che si sta facendo, penso. –

ho ancora in piedi dai miei commenti, ma questo era il meglio che ho potuto trovare. Ancora una volta, not non è sbagliato. Cerchi di capirlo.

Quindi:

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

Questo è stato anche suggerito come lavoro:

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

La cosa veramente fantasia è che Chrome una porta non e rais voi tutti. Ovviamente, non vede nulla di sbagliato nell'accoppiamento di entrambi, mentre Firefox sembra doverosamente sembrare un po 'calmo.

Buoni tempi. Probabilmente puoi modificare l'ordine e fare in modo che tutto si sovrapponga a non spostandolo dopo; tieni presente che l'eredita perché, sai, Chrome fa quello che vuole.

Prova Modernizr fuori, con yepnope.js e selectivzr.js. Questi sono abbastanza ben eseguiti.

fonte

2013-03-14 06:23:36

Questa è sia una delle risposte più confuse che ho ricevuto e una delle più interessanti. Grazie per l'aiuto! :) – NickEntin

@boltclock - Perché hai modificato le query multimediali senza controllare che continuino a funzionare? Il primo funziona * lo stesso di prima *, ma quest'ultimo si rompe in Firefox. –

Cosa intendi con rottura? 'Non (-webkit-device-pixel-ratio)' applicato o ignorato da Firefox? I paren dovrebbero essere lì. – BoltClock

Si potrebbe provare con min:

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

e max:

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

fonte

2013-03-14 11:40:53 noreabu

io vengo a questa domanda quando si tratta di -webkit-line-clamp, che sembra essere una caratteristica webkit solo per ora.

Così il mixin SCSS creo per questo è

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

Esso utilizza diversi media di query per separare SCSS per WebKit e Firefox.

fonte

2015-09-17 04:31:17 aGuegu

risposta

Problemi correlati