Was macht @ -moz-document url-prefix ()?

83

In Simon Collisons neuem alten Responsive Web Design im CSS gibt es mehrere Erklärungen wie diese:

@-moz-document url-prefix() {
  .fl { float:left; margin:12px 4px 0 0; padding:0; font-size:65px;  line-height:62%;  color:#ba1820; }
  .fs { float:left; margin:12px 4px 10px 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; }
}

Was macht das eigentlich? Ich habe nach @ -moz-document url-prefix () gegoogelt und Referenzen für die Verwendung in userchrome gefunden, aber keine Standard-Site-Stylesheets.

Normalerweise wird eine URL als Argument übergeben, die dann den Inhalt der Deklaration auf diese URL beschränkt. Auf Collys Website wird jedoch kein Argument übergeben. Dies würde darauf hinweisen, dass die Deklaration unter der aktuellen URL oder einer beliebigen URL ausgeführt wird, nein? Ist das, was wir hier sehen, eine Möglichkeit, Browser nur für Mozilla mit bestimmten Regeln anzusprechen ?

css firefox browser Charles Roper
quelle

Antworten:

95

Jede CSS-Regel, mit der begonnen wird, @-moz-ist eine Gecko-Engine-spezifische Regel, keine Standardregel. Das heißt, es ist eine Mozilla-spezifische Erweiterung.

Die url-prefixRegel wendet die enthaltenen Stilregeln auf jede Seite an, deren URL damit beginnt. Bei Verwendung ohne URL-Argument @-moz-document url-prefix()gilt dies für ALLE Seiten. Dies ist praktisch ein CSS-Hack , der nur für Gecko (Mozilla Firefox) verwendet wird. Alle anderen Browser ignorieren die Stile.

Siehe hier für eine Liste von anderen Mozilla-spezifischen Erweiterungen.

Oded
quelle
Ich habe die Frage ein wenig erweitert, weil ich keinen wichtigen Punkt gefunden habe. Ich habe intuitiv erraten, was Sie hier eingegeben haben, war aber verwirrt über das Fehlen von Argumenten. Ich glaube, ich habe es herausgefunden.
Charles Roper
Ich habe Probleme mit dem Buchstabenabstand in Mozilla für bestimmte Schriftarten. (dh Prime). In Chorme macht es ok, aber in Firefox zeigt es etwas breiter. Deshalb möchte ich den Buchstabenabstand in Firefox reduzieren, aber nicht in Chrom. Ich kann keine solche Moz-Erweiterung für den Buchstabenabstand finden.
Yash Vekaria
1
@YashVekaria Es wäre keine Moz-Erweiterung, Sie würden die CSS-Eigenschaft verwenden. @-moz-document url-prefix() { .your-class { letter-spacing: 2em; } }
Stout Joe
17

Von https://developer.mozilla.org/en/CSS/@-moz-document

       @-moz-document url(http://www.w3.org/),
                   url-prefix(http://www.w3.org/Style/),
                   domain(mozilla.org)
    {
      /* CSS rules here apply to:
         + The page "http://www.w3.org/".
         + Any page whose URL begins with "http://www.w3.org/Style/"
         + Any page whose URL's host is "mozilla.org" or ends with
           ".mozilla.org"
       */

      /* make the above-mentioned pages really ugly */
      body { color: purple; background: yellow; }
}
Bella
quelle
5

Ab Firefox 59 sollten Sie nur Folgendes verwenden:

@document url("https://www.example.com/")

Die Unterstützung der Version dieser Eigenschaft mit dem Präfix -moz wurde für Webinhalte aufgrund eines Fehlers eingestellt:

https://bugzilla.mozilla.org/show_bug.cgi?id=1035091

Adam
quelle
@jaepage, ja, es wird nicht mehr funktionieren. Sie sollten verwenden : _:-moz-tree-row(hover), .selector {}. Wo .selectorist Ihr gewünschter Selektor?
Adam
4
Firefox unterstützt @-moz-document url-prefix()(mit leerem URL-Präfix) fxsitecompat.com/en-CA/docs/2018/…
Orlando
4
Dieser Link sagt jetzt @-moz-document url-prefix()(mit leerem URL-Präfix) "wird in naher Zukunft entfernt, sobald größere Kompatibilitätsprobleme behoben sind." und tatsächlich scheint es nicht mehr zu funktionieren.
Dave Morse
2

@supports (-moz-appearance:none) {...}arbeitete für mich in Fällen, in denen @-moz-document url-prefix() {...}dies nicht der Fall war .

T Ngo
quelle