Machen Sie CSS nur für Opera 11?

Question

Gibt es eine Möglichkeit, einige CSS-Regeln nur für Opera (11) anzuwenden?

Answer 1

Ich liebe Herausforderungen!
Es dauerte einige Zeit, aber ich fand es schließlich:

body {background:0} /* default */ 
@media not screen and (1) { 
body {background:red} /* OP 11 */ 
} 
@media not screen and (orientation) { 
body {background:green} /* for the earlier versions of Opera that pick the first media query's rule + chrome/safari */ 
} 

Browsern getestet:

• rot: Opera 11
• grün: Opera 10 und 10,5 + WebKit-Browser
• none: Opera 9.26 + Firefox 3.6 + IE9

Es ist verwandt mit der error-handling und auch die Tatsache, dass NOT das globale Ergebnis negiert (WebKit-Browser werten die Ausrichtung nicht korrekt ohne einen gültigen Wert aus). Da orientation in Presto 2.7 unterstützt wird, lautet die zweite Medienabfrage FALSE.

Die falsche Ausrichtung Hack klingt wie ein guter Name für mich.

Answer 2

könnten Sie versuchen, http://www.headjs.com/

Answer 3

mit ich weiß nicht, von einer CSS-only Art und Weise, wie Opera 11 noch sehr neu ist.

Sie können entweder serverseitige Sprachen wie PHP die User Agent des Browsers zu erkennen, oder Sie können die frei verfügbaren Javascript Lösung CSS Browser Selector verwenden.

Die obige Lösung enthält noch nicht Opera 11, also lassen Sie uns Opera 11 User Agent String überprüfen, indem Sie ihre references überprüfen. (Eigentlich haben sie ihre eigenen Artikel über how to detect opera)

Opera/9.80 (Windows NT 5.1; U; en) Presto/2.7.39 Version/11,00

Wenn Sie nun einen Blick auf die Javascript von Der oben erwähnte CSS-Browser-Selektor ist nur navigator.userAgent zu lesen und mit vielen Variationen zu vergleichen - fügen Sie einfach Ihre Opera 11-Variante hinzu und Sie können loslegen (oder warten, bis der Entwickler das Javascript aktualisiert - oder noch besser, update) das Skript und erzähle dem Autor davon!).

Answer 4

Gibt es einen guten Grund, dies zu tun?

Ich würde immer empfehlen, Browser-Erkennung zu tun. In fast allen Fällen, in denen Benutzer sie verwenden möchten, ist es besser, die Funktionserkennung zu verwenden. Wenn Sie herausfinden, ob die gewünschte Funktion unterstützt wird, werden Sie automatisch neue Versionen anderer Browser unterstützen, wenn diese auf den neuesten Stand gebracht werden, ohne ständig Ihre Website auf dem neuesten Stand zu halten, wie dies bei Browsererkennungsskripten der Fall ist.

Für Feature-Erkennung, eines der besten Tools, die ich vorschlagen kann, ist die Verwendung Modernizr.

Für Browser-Erkennung - vor allem Marke einen neuen Browser wie Opera11 - kann ich wirklich nichts vorschlagen, das idiotensicher ist. Die richtige Antwort ist, sich die User Agent-Zeichenfolge anzuschauen, aber diese kann vom Benutzer leicht geändert werden, um einen anderen Browser zu fälschen (und oft, besonders von Opera-Benutzern, da diese am häufigsten versuchen, Seiten zu umgehen, die dies tun) Browser-Erkennung und versuchen, sie)

Answer 5

Hier gehen Sie ......

/* Opera */ 
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) 
{ 
here you can display anything you want just for opera 
} 

Answer 6

Die folgenden Stil in der Tat nur in Opera gemacht bekommen würde zu blockieren. Siehe Webmonkeys Blog-Post für Details:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
    #myid { background-color: #F00; } 
} 

Aber bedenken Sie, dass alle Art von CSS-Hacks nicht mehr in der Zukunft funktionieren könnte. Also ich würde Ihnen dringend empfehlen, die Stile nur für Opera dynamisch mit jQuery (jQuery.browser) hinzuzufügen.

Answer 7

überprüfen Sie diese SO Community Wiki.

Answer 8

Die read-only Pseudo-Klasse ist ein einfacher Filter für Opera:

#foo:read-only { overflow: auto; }