Nur auf Firefox mit CSS abzielen

616

Mit bedingten Kommentaren ist es einfach, Internet Explorer mit browserspezifischen CSS-Regeln zu erreichen:

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

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

Hinweis: Ich suche nach einer "sauberen" Lösung. Die Verwendung eines JavaScript-Browser-Sniffers zum Hinzufügen einer Firefox-Klasse zu meinem HTML-Code ist meiner Meinung nach nicht sauber. Ich würde lieber etwas sehen, das von den Browserfunktionen abhängt, ähnlich wie bedingte Kommentare nur für den IE "speziell" sind ...

css firefox css-hack avdgaag
quelle
Vielleicht möchten Sie sich einige ähnliche Fragen und ihre entsprechenden Antworten ansehen
AnonJr
3
Gibt es eine Möglichkeit, Firefox auf einem Windows-Computer gegen einen Mac auszurichten?
Kegan Quimby
4
<! - [if Gecko]> ... include ... <! [endif] ->
definiert den

Antworten:

1252

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>
Erweitern Sie das Snippet

Es basiert auf einer weiteren Mozilla-spezifischen CSS-Erweiterung. Hier finden Sie eine ganze Liste dieser CSS-Erweiterungen: Mozilla CSS-Erweiterungen .

Ionuț G. Stan
quelle
17
Was genau bedeutet das URL-Präfix () nach dem "@ -moz-Dokument"? nur neugierig.
Matt
17
@Matt, das ist eine Möglichkeit, die Websites zu filtern, auf die dieses CSS angewendet wird. Eine andere Möglichkeit ist die Verwendung des domain()Filters. Beispielsweise @-moz-document domain(google.com) {...}werden die beigefügten CSS-Regeln nur auf die Domain google.com angewendet.
Ionuț G. Stan
10
Mir gefällt, dass Sie dafür kein völlig neues CSS-Dokument erstellen müssen, wie Sie es für den Internet Explorer tun.
JD Isaacks
7
@ JohnIsaacks Für die bedingten IE-Kommentare benötigen Sie kein separates Stylesheet. Sie können inline sein. Ob Sie es so machen wollen, ist eine andere Frage.
Dylan
4
Es ist erwähnenswert, dass diese Problemumgehung ab Firefox 59, veröffentlicht im März 2018, nicht mehr funktioniert : bugzilla.mozilla.org/show_bug.cgi?id=1035091
Jordan Gray
105

Aktualisiert (von @Antoine Kommentar)

Sie können verwenden @supports

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

Mehr dazu @supports hier

Laaposto
quelle
11
Dies ist eine viel schönere Lösung als das Beispiel @ -moz-document url-prefix (). Sie spielt auch gut mit dem SCSS-Parser, während der andere dies nicht tat.
Alastair Hodgson
1
Ich benutze Firefox und es ist immer noch weiß. Liegt es an der Version, die ich benutze?
Antoine
3
@Antoine Du hast recht! Bei den neuesten Versionen von FF hat es nicht funktioniert. Ich habe meine Antwort aktualisiert. Es sollte jetzt funktionieren. Vielen Dank für den Hinweis!
Laaposto
83

Hier erfahren Sie, wie Sie drei verschiedene Browser angehen: 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]-->
Waqas Ali Khan Puar
quelle
66
Wenn ich das richtig verstehe, ist das oberste nicht Chrome, sondern gibt nur das Standardverhalten an, das Sie für Firefox und IE überschreiben.
Muhd
3
Sehr hilfreich. Als ehemaliger Firefox-Liebhaber bin ich enttäuscht, dass ich solche Firefox-spezifischen Hacks machen muss, aber solange es funktioniert, kann ich damit leben.
SpaceBeers
Der Vorschlag für die IE-Erkennung funktioniert nicht, wenn Sie ihn einer CSS-Datei hinzufügen möchten. Auf diese Weise können Sie jedoch Stylesheets in HTML einfügen. Wenn Sie IE CSS in einer CSS-Datei haben möchten, empfehle ich, hier zu schauen: keithclark.co.uk/articles/…
Biepbot Von Stirling
16

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

Verwenden von Selektor-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 funktionieren, Firefox 3.6 und höher

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

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

Hbirjand
quelle
1
Könnten Sie etwas näher auf die Verwendung von Selector-Hacks und die Funktionsweise des von Ihnen bereitgestellten Beispiels eingehen? Vielen Dank.
JJ
1
Okay, ich habe es selbst verstanden: Im Grunde versteckt es den zweiten Selektor vor anderen Browsern, die den ersten nicht verstehen. In diesem Fall versteht nur Mozilla, _:moz-tree-row(hover)so dass es das einzige ist, das das .selector{}Kommende verarbeiten kann. Diese speziellen Hacks funktionieren derzeit auf allen Firefox- Versionen. Weitere Informationen hierzu finden Sie unter browserhacks.com .
JJ
1
Ich habe den Bildschirm Media Query Hack: \ @media und (-moz-images-in-menus: 0) {} verwendet. Dies passt gut zum Bildschirm \ @media und (-webkit-min-device-pixel-ratio: 0) und Visual Studio gibt damit keine Warnung aus.
Dan Randolph
1
Bitte beachten Sie -moz-images-in-menus: 0 wurde in Firefox 52 entfernt - bugzilla.mozilla.org/show_bug.cgi?id=1302157
jonathanKingston
13

Zunächst ein Haftungsausschluss. Ich befürworte nicht wirklich 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 die Lösung. Sie haben darum gebeten, elegant zu sein, 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 ) verwendet werden, die intern in Firefox und allen anderen Gecko-basierten Produkten häufig verwendet werden. Zum Vergleich: Dies ähnelt der CSS-Eigenschaft des Verhaltens 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 Gecko-Bindungen
  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 wäre besser, wenn anstelle eines neuen LINK-Elements die "Firefox" -Klasse zum BODY-Element hinzugefügt würde. Und es ist möglich, indem Sie einfach den obigen JS durch den folgenden ersetzen:

this.className += " firefox";

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

Ionuț G. Stan
quelle
11

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

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

Sie können eine ähnliche Aufgabe in Javascript selbst ausführen, obwohl Sie sie möglicherweise nicht als sauber betrachten.

Ich habe eine ähnliche Sache gemacht, indem ich ein default.cssInclude all common styles and then specific style sheetshinzugefügt habe, um die Standardeinstellungen zu überschreiben oder zu verbessern.

Kekoa
quelle
Das mag manche einen schönen und stabilen Ansatz & mdash; danke & mdash; obwohl es immer noch vom Browser-Sniffing abhängt. Ich würde lieber etwas verwenden, das von der Fähigkeit abhängt, wie eine Nur-Gecko-CSS-Regel oder so. Ich verwende den gleichen grundlegenden Ansatz: Standardstile und browserspezifische Add-Ons.
Avdgaag
1
@avdaag: In den meisten Fällen wird die Fähigkeitserkennung bevorzugt. Wenn Sie jedoch versuchen, einen Hack zu injizieren, um den Fehler einer bestimmten Rendering-Engine zu "beheben", ist die Ausrichtung auf den Benutzeragenten theoretisch die optimale Lösung. Sie diskriminieren keine unbekannten Browser. und das User-Agent-Feld soll Ihnen mitteilen, welche Rendering-Engine der Browser verwendet. Selbst wenn ein seltener Gecko-Browser hinzukommt, wird er dennoch repariert. Trotzdem fälschen viele Browser ihre User-Agent-Zeichenfolgen aufgrund der unangemessenen Verwendung der Browsererkennung. In der Praxis könnte es also nicht so gut funktionieren.
Lèse Majesté
6

Nachdem Firefox Quantum 57 wesentliche - und möglicherweise bahnbrechende - Verbesserungen an Gecko herausgebracht hat, die zusammen als Stylo oder Quantum CSS bekannt sind, befinden Sie sich möglicherweise in einer Situation, in der Sie zwischen älteren Versionen von Firefox und Firefox Quantum unterscheiden müssen.

Aus meiner Antwort hier :

Sie können @supportsmit einem calc(0s)Ausdruck in Verbindung mit verwenden @-moz-document, um auf Stylo zu testen. 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';
    }
  }
}
Erweitern Sie das Snippet

Das Targeting älterer Versionen von Firefox ist etwas schwierig - wenn Sie nur an Versionen interessiert sind @supports, die Fx 22 und höher unterstützen, @supports not (animation: calc(0s))ist alles, was Sie benötigen:

@-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 verwenden , wie im obigen Proof-of-Concept gezeigt.

BoltClock
quelle
3

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 fehlschlägt. Wenn überhaupt, ist es WENIGER sicher als die Verwendung eines JS-Browser-Sniffers.

jvenema
quelle
0

Der folgende Code neigt dazu, Style-Flusen-Warnungen auszulösen:

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

Verwenden Sie stattdessen 

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

Hat mir geholfen! Haben Sie die Lösung für Stil Flusen Warnung von hier

Kailas
quelle