Nur Firefox mit CSS anvisieren

Question

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 nicht einen einzigen anderen Browser? Das heißt, dass nicht nur der Internet Explorer die nur für Firefox geltenden Regeln ignorieren sollte, sondern auch WebKit und Opera.

注 Ich bin auf der 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 sauber. Ich würde lieber etwas sehen, das von den Fähigkeiten des Browsers abhängt, so wie bedingte Kommentare nur für den IE "speziell" sind

Answer 1

Die Verwendung von -engine-spezifischen Regeln gewährleistet ein effektives Browser-Targeting.

<style type="text/css">

    //Other browsers
    color : black;

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

    //Firefox
    @media screen and (-moz-images-in-menus:0) {
        color:orange;
    }
</style>

//Internet Explorer
<!--[if IE]>
     <style type='text/css'>
        color:blue;
    </style>
<![endif]-->

Answer 2

Eine Abwandlung Ihrer Idee ist die Einrichtung einer server-side USER-AGENT detector die herausfindet, welche Formatvorlage an die Seite angehängt werden soll. Auf diese Weise können Sie eine firefox.css, ie.css, opera.css, etc .

Ähnliches kann man auch in Javascript selbst erreichen, auch wenn man es vielleicht nicht als sauber ansieht.

Ich habe etwas Ähnliches getan, indem ich eine default.css die Folgendes umfassen all common styles and then specific style sheets werden hinzugefügt, um die Standardeinstellungen zu überschreiben oder zu verbessern.

Answer 3

Nun, da Firefox Quantum 57 mit wesentlichen - und potenziell bahnbrechenden - Verbesserungen an Gecko herausgekommen ist, die zusammen als Stylo oder Quantum CSS bekannt sind, könnten Sie sich in einer Situation befinden, in der Sie zwischen älteren Versionen von Firefox und Firefox Quantum unterscheiden müssen.

Aus meiner Antwort aquí :

Sie können verwenden @supports mit einer calc(0s) Ausdruck in Verbindung mit @-moz-document für Stylo zu testen - Gecko unterstützt keine Zeitwerte in calc() Ausdrücke, aber Stylo schon:

@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

Hier ist ein Proof-of-Concept:

body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}

Das Anvisieren von älteren Versionen von Firefox ist ein wenig schwierig - wenn Sie nur an Versionen interessiert sind, die die @supports die ab Fx 22 gilt, @supports not (animation: calc(0s)) ist alles, was Sie brauchen:

@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}

... aber wenn Sie noch ältere Versionen unterstützen müssen, müssen Sie die Kaskade zu nutzen wie in der obigen Machbarkeitsstudie gezeigt.

Answer 4

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

Answer 5

Mit -moz Präfix

div:-moz-read-only {
  background: green;
}

textarea:-moz-read-write {
  background: green;
}

:-moz-any(div#foo) div.bar {
  background: green;
}

li:-moz-first-node, li:-moz-last-node {
  background: green;
}