2010-10-29 14 views
5

Kann ich einen CSS-Block hinzufügen, den ich nur in Safari und keinen anderen Browser anzeigen möchte?CSS nur für Safari anwenden?

+0

Kontrolle dieses http://stackoverflow.com/questions/2052218/is-there-any-equivalent-to-ie-conditional-comment-for-chrome-and-safari – patrick

Antwort

13

Hier ist ein Beispiel, das die Schriftfarbe Ihrer Website auf grün gesetzt würde, wenn Ihr Browser Safari oder Chrome (beide Aktien die gebräuchliche Webkit-Rendering-Engine). Diese

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    body { 
     color:green; /* on Safari and Chrome */ 
    } 
} 

aus einem anderen Beitrag genommen here

+2

Ich nehme an, du meintest Chrome, nicht Opera. Chrome verwendet die WebKit-Engine, Opera verwendet eine eigene Engine (Presto genannt). – jhurshman

+1

@jhurshman, ja ich tat, danke (es ist spät an einem Freitag :-)) –

+0

@jhursh es Ziele Opera 9.2 zu – Knu

0

Mithilfe der UserAgent-Zeichenfolge können Sie nach Safari und! Chrome suchen. Beide verwenden den WebKit-Renderer und beide haben Safari in der UA-Zeichenfolge, aber Chrome hat auch "Chrome". Um ehrlich zu sein, würde ich nur nach Webkit und Code suchen, denn wer weiß, was andere WebKit-Browser in ihre UA-Strings einbauen.

Safari:

Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-HK) AppleWebKit/533.18.1 (KHTML, like Gecko) Version/5.0.2 Safari/533.18.5

Chrome:

Mozilla/5.0 (X11; U; Linux x86_64; en-US) AppleWebKit/540.0 (KHTML, like Gecko) Ubuntu/10.10 Chrome/8.1.0.0 Safari/540.0

+0

Der Useragent-String gefälscht werden kann sehr leicht. Dies ist kein zuverlässiger Ansatz. – stevelove

+0

Ich sage nicht, es ist die beste Methode, aber SAFARI ONLY zu finden, ist fast unmöglich, also nehmen Sie, was Sie bekommen können. –

+0

prüft css den useragent, um zu prüfen, welcher Browser? – Ascherer

0

Verwendung dieser. Es funktioniert nur in Safari.

/* Only for Safari */ 
::i-block-chrome, .yourClassName { 
    border:1px solid #f00; 
}