Co robi @ -moz-document url-prefix ()?

85

W ~~nowym,~~ starym responsywnym projektowaniu stron internetowych Simona Collisona , w CSS jest kilka takich deklaracji:

@-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; }
}

Co to właściwie robi? Wyszukałem w Google @ -moz-document url-prefix () i znalazłem odniesienia do jego użycia w userchrome, ale nie w standardowych arkuszach stylów witryny.

Zwykle ma adres URL przekazywany jako argument, który następnie ogranicza zawartość deklaracji do tego adresu URL. Jednak w witrynie Colly nie jest przekazywany żaden argument. Oznaczałoby to, że deklaracja działa na bieżącym lub dowolnym adresie URL, nie? Czy więc to, co tu widzimy, jest sposobem na kierowanie reklam do przeglądarek obsługujących tylko Mozillę z określonymi regułami ?

css firefox browser

— Charles Roper
źródło

97

Każda reguła CSS, która zaczyna się od, @-moz-jest regułą specyficzną dla silnika Gecko, a nie standardową regułą. Oznacza to, że jest to rozszerzenie specyficzne dla Mozilli.

url-prefixZasada stosuje reguły stylów zawartych na dowolnej stronie, której adres URL zaczyna się od niego. W przypadku użycia bez argumentu adresu URL, tak jak @-moz-document url-prefix()ma to zastosowanie do WSZYSTKICH stron. To faktycznie hack CSS używany tylko do atakowania Gecko (Mozilla Firefox). Wszystkie inne przeglądarki będą ignorować style.

Zobacz tutaj listę innych rozszerzeń specyficznych dla Mozilli.

— Oded
źródło

Rozszerzyłem nieco pytanie, ponieważ nie dotarłem do kluczowego punktu. Intuicyjnie odgadłem, co tu umieściłeś, ale byłem zdziwiony brakiem argumentu. Myślę jednak, że się domyśliłem.

— Charles Roper

Mam problem z odstępami między literami w Mozilli dla określonej czcionki. (tj. liczba pierwsza). W chorme renderuje się dobrze, ale w Firefoksie pokazuje się trochę szerzej. więc chcę zmniejszyć odstępy między literami w przeglądarce Firefox, ale nie w przeglądarce Chrome. Nie mogę znaleźć takiego rozszerzenia moz dla odstępów między literami.

— Yash Vekaria,

1

@YashVekaria To nie byłoby rozszerzenie moz, użyłbyś właściwości CSS. @-moz-document url-prefix() { .your-class { letter-spacing: 2em; } }

— Stout Joe

17

Od 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
źródło

5

Począwszy od Firefox 59 powinieneś po prostu użyć:

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

Obsługa wersji tej właściwości z prefiksem -moz została zatrzymana w przypadku treści WWW z powodu błędu:

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

— Adam
źródło

@jaepage, tak, to już nie będzie działać. Należy użyć: _:-moz-tree-row(hover), .selector {}. Gdzie .selectorjest twój pożądany selektor.

— Adam

4

Firefox będzie obsługiwał @-moz-document url-prefix()(z pustym prefiksem adresu

— Orlando

4

To łącze mówi teraz @-moz-document url-prefix()(z pustym prefiksem url) „zostanie usunięte w najbliższej przyszłości, po rozwiązaniu głównych problemów ze zgodnością”. i rzeczywiście wydaje się, że już nie działa.

— Dave Morse

2

@supports (-moz-appearance:none) {...}pracował dla mnie w przypadkach, gdy @-moz-document url-prefix() {...}nie.

— T Ngo
źródło