Nur Firefox mit CSS anvisieren

Mit Hilfe von bedingten Kommentaren ist es einfach, den Internet Explorer mit browserspezifischen CSS-Regeln anzusprechen:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

Manchmal ist es die Gecko-Engine (Firefox), die sich daneben benimmt. Was wäre der beste Weg, um nur Firefox mit Ihren CSS-Regeln anzusprechen und keinen einzigen anderen Browser? Das heißt, nicht nur Internet Explorer sollte die Firefox-Regeln ignorieren, sondern auch WebKit und Opera.

Anmerkung: Ich suche nach einer 'sauberen' Lösung. Die Verwendung eines JavaScript-Browser-Sniffers, um eine 'firefox' Klasse zu meinem HTML hinzuzufügen, ist meiner Meinung nach nicht als sauber zu bezeichnen. Ich würde lieber etwas sehen, das von den Fähigkeiten des Browsers abhängt, so wie bedingte Kommentare nur 'speziell' für den IE sind...

Shishir Morshed
Bearbeitete Frage 25. Dezember 2015 в 8:13
Programmierung
firefox css css-hack
4. Juni 2009 в 8:19
24 Aufrufe

Zuallererst ein Haftungsausschluss. Ich bin kein wirklicher Befürworter der Lösung, die ich im Folgenden vorstelle. Die einzige Browser-spezifische CSS schreibe ich ist für IE (vor allem IE6), obwohl ich wünschte, es wäre nicht der Fall.

Nun zu der Lösung. Sie wollten, dass sie elegant ist, also weiß ich nicht, wie elegant sie ist, aber sie wird sicher nur auf Gecko-Plattformen ausgerichtet sein.

Der Trick funktioniert nur, wenn JavaScript aktiviert ist, und nutzt die Mozilla-Bindings (XBL), die in Firefox und allen anderen Gecko-basierten Produkten intern stark genutzt werden. Zum Vergleich: Das ist wie die CSS-Eigenschaft behavior im IE, nur viel leistungsfähiger.

An meiner Lösung sind drei Dateien beteiligt:

  1. ff.html: die zu gestaltende Datei
  2. ff.xml: die Datei, die die Gecko-Bindungen enthält
  3. ff.css: Firefox-spezifisches Styling

ff.html






body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}




<h1>This should be red in FF</h1>

ff.xml

<?xml version="1.0"?>

ff.css

h1 {
 color: red;
}

Aktualisierung: Die obige Lösung ist nicht so gut. Es wäre besser, wenn anstelle des Anhängens eines neuen LINK-Elements diese "firefox" Klasse auf dem BODY-Element hinzugefügt wird. Und es ist möglich, indem man das obige JS durch das folgende ersetzt:

this.className += " firefox";

Die Lösung ist inspiriert von Dean Edwards' moz-behaviors.

Ionuț G. Stan
Bearbeitete Antwort 4. Juni 2009 в 9:16
Kommentare (0)

Eine Abwandlung Ihrer Idee wäre ein "serverseitiger USER-AGENT-Detektor", der herausfindet, welches Stylesheet an die Seite angehängt werden soll. Auf diese Weise können Sie eine "firefox.css, ie.css, opera.css, etc" haben.

**Sie können eine ähnliche Sache in Javascript selbst erreichen, obwohl Sie es vielleicht nicht als sauber ansehen.

Ich habe etwas ähnliches gemacht, indem ich eine default.css hatte, die alle gängigen Stile enthält und dann spezifische Stylesheets hinzugefügt wurden, um die Standardeinstellungen zu überschreiben oder zu verbessern.

Anzil khaN
Bearbeitete Antwort 16. März 2018 в 7:40
Kommentare (2)

Die einzige Möglichkeit, dies zu tun, sind verschiedene CSS-Hacks, die die Wahrscheinlichkeit, dass Ihre Seite bei den nächsten Browser-Updates nicht mehr funktioniert, deutlich erhöhen. Wenn überhaupt, wird es WENIGER sicher sein als die Verwendung eines js-Browser-Sniffers.

Kommentare (0)