it-swarm.com.de

Targeting nur Firefox mit CSS

Mit bedingten Kommentaren ist es einfach, auf Internet Explorer mit browserspezifischen CSS-Regeln zuzugreifen:

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

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

Anmerkung: Ich suche eine "saubere" Lösung. Die Verwendung eines JavaScript-Browsersniffers zum Hinzufügen einer 'Firefox'-Klasse zu meinem HTML-Code gilt meiner Meinung nach nicht als sauber. Ich würde lieber etwas sehen, das von den Browser-Fähigkeiten abhängt, ähnlich wie bedingte Kommentare nur für den IE "speziell" sind ...

571
avdgaag

OK, ich habe es gefunden. Dies ist wahrscheinlich die sauberste und einfachste Lösung auf dem Markt und setzt nicht voraus, dass JavaScript aktiviert ist.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>

Es basiert auf einer weiteren Mozilla-spezifischen CSS-Erweiterung. Hier finden Sie eine vollständige Liste dieser CSS-Erweiterungen: Mozilla CSS Extensions .

1180
Ionuț G. Stan

Hier erfahren Sie, wie Sie drei verschiedene Browser in Angriff nehmen: IE, FF und Chrome

<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
    width:490px;
}
/*This will work for firefox*/
@-moz-document url-prefix() {
    #categoryBackNextButtons{
        width:486px;
    }
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
    width:486px;
}
</style>
<![endif]-->
80

Aktualisiert (von @Antoine-Kommentar)

Sie können @supports verwenden.

@supports (-moz-appearance:none) {
    h1 { color:red; } 
}
<h1>This should be red in FF</h1>

Mehr zu @supportshier

68
laaposto

Hier sind einige Browser-Hacks, die nur auf den Firefox-Browser abzielen.

Verwendung von Selector Hacks.

_:-moz-tree-row(hover), .selector {}

JavaScript-Hacks

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

Media Query Hacks

Dies wird in Firefox 3.6 und höher funktionieren

@media screen and (-moz-images-in-menus:0) {}

Wenn Sie weitere Informationen benötigen, besuchen Sie bitte browserhacks

13
Hbirjand

Zunächst ein Haftungsausschluss. Ich plädiere nicht wirklich für die Lösung, die ich unten präsentiere. Das einzige browserspezifische CSS, das ich schreibe, ist für IE (insbesondere IE6), obwohl ich wünschte, es wäre nicht der Fall.

Nun ist die Lösung. Sie haben darum gebeten, dass es elegant ist, damit ich nicht weiß, wie elegant es ist, aber es wird sicher nur auf Gecko-Plattformen abzielen.

Der Trick funktioniert nur, wenn JavaScript aktiviert ist und Mozilla-Bindungen ( XBL ) verwendet, die intern in Firefox und allen anderen Gecko-basierten Produkten häufig verwendet werden. Zum Vergleich entspricht dies der Verhaltens-CSS-Eigenschaft im IE, ist jedoch viel leistungsfähiger.

An meiner Lösung sind drei Dateien beteiligt:

  1. ff.html: die zu formatierende Datei
  2. ff.xml: Die Datei mit den Geckobindungen
  3. ff.css: Firefox-spezifisches Styling

ff.html

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>

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

</body>
</html>

ff.xml

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
    <binding id="load-mozilla-css">
        <implementation>
            <constructor>
            <![CDATA[
                var link = document.createElement("link");
                    link.setAttribute("rel", "stylesheet");
                    link.setAttribute("type", "text/css");
                    link.setAttribute("href", "ff.css");

                document.getElementsByTagName("head")[0]
                        .appendChild(link);
            ]]>
            </constructor>
        </implementation>
    </binding>
</bindings>

ff.css

h1 {
 color: red;
}

Update: Die obige Lösung ist nicht so gut. Es ist besser, wenn Sie anstelle eines neuen LINK-Elements diese "Firefox" -Klasse zum BODY-Element hinzufügen. Und es ist möglich, indem man einfach das obige JS durch folgendes ersetzt:

this.className += " firefox";

Die Lösung ist inspiriert von Dean Edwards 'Moz-Verhalten .

13
Ionuț G. Stan

Durch die Verwendung von Regeln für die Suchmaschine wird eine effektive Ausrichtung des Browsers sichergestellt.

<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]-->
11
Rayjax

Eine Variation Ihrer Idee besteht darin, einen server-side USER-AGENT detector zu haben, der festlegt, welches Stylesheet an die Seite angehängt werden soll. Auf diese Weise können Sie einen firefox.css, ie.css, opera.css, etc haben.

Ähnliches können Sie in Javascript selbst ausführen, obwohl Sie es möglicherweise nicht als sauber ansehen.

Ähnliches habe ich getan, indem ein default.css, der all common styles and then specific style sheets enthält, hinzugefügt wurde, um die Standardeinstellungen zu überschreiben oder zu verbessern.

7
Kekoa

Nachdem Firefox Quantum 57 wesentliche - und potenziell brechende - Verbesserungen an Gecko herausgebracht hat, die unter dem Namen Stylo oder Quantum CSS bekannt sind, müssen Sie möglicherweise zwischen älteren Versionen von Firefox und Firefox Quantum unterscheiden.

Aus meiner Antwort hier :

Sie können @supports mit einem calc(0s)-Ausdruck in Verbindung mit @-moz-document zum Testen auf Stylo verwenden - Gecko unterstützt keine Zeitwerte in calc()-Ausdrücken, Stylo jedoch:

@-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 Targeting auf ältere Versionen von Firefox ist etwas schwierig - wenn Sie nur an Versionen interessiert sind, die @supports unterstützen, also Fx 22 und höher, dann ist @supports not (animation: calc(0s)) alles, was Sie brauchen:

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

... aber wenn Sie auch ältere Versionen unterstützen müssen, müssen Sie verwenden Sie die Kaskade , wie im obigen Proof-of-Concept gezeigt.

4
BoltClock

Die einzige Möglichkeit, dies zu tun, sind verschiedene CSS-Hacks, die dafür sorgen, dass Ihre Seite bei den nächsten Browser-Updates mit größerer Wahrscheinlichkeit nicht mehr funktioniert. Wenn überhaupt, ist es WENIGER sicher als die Verwendung eines Js-Browser-Sniffers.

3
jvenema

Mit dem folgenden Code werden in der Regel Style-Flusen-Warnungen ausgegeben:

@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

Verwenden Sie stattdessen

@-moz-document url-prefix('') {
    h1 {
        color: red;
    }
}

Hat mir geholfen! Habe die Lösung für die Flusenwarnung von hier

0
Kailas

CSS-Unterstützung hat als Randnotiz eine Bindung an Javascript.

if (CSS.supports("( -moz-user-select:unset )")){
  console.log("FIREFOX!!!")
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

0
NVRM