Kierowanie tylko na Firefox za pomocą CSS

616

Za pomocą komentarzy warunkowych łatwo jest zaatakować program Internet Explorer za pomocą reguł CSS specyficznych dla przeglądarki:

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

Czasami źle działa silnik Gecko (Firefox). Jaki byłby najlepszy sposób kierowania reklam tylko na Firefoksa przy użyciu reguł CSS, a nie na żadną inną przeglądarkę? Oznacza to, że Internet Explorer powinien nie tylko ignorować reguły tylko dla Firefoksa, ale także WebKit i Opera.

Uwaga: szukam „czystego” rozwiązania. Używanie sniffera przeglądarki JavaScript w celu dodania klasy „firefox” do mojego HTMLa nie jest moim zdaniem czyste. Wolałbym zobaczyć coś, co zależy od możliwości przeglądarki, podobnie jak komentarze warunkowe są tylko „specjalne” dla IE…

avdgaag
źródło
Może chciałbym spojrzeć na podobne pytania i odpowiedzi na ich pytania ... stackoverflow.com/questions/738831/
AnonJr
3
czy jest jakiś sposób na celowanie w firefoxa na komputerze z systemem Windows vs Mac?
Kegan Quimby
4
<! - [if Gecko]> ... include ... <! [endif] ->
określa

Odpowiedzi:

1252

OK, znalazłem to. Jest to prawdopodobnie najczystsze i najłatwiejsze rozwiązanie na rynku i nie polega na włączeniu JavaScript.

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

Jest oparty na innym rozszerzeniu CSS specyficznym dla Mozilli. Tutaj jest cała lista tych rozszerzeń CSS: Rozszerzenia CSS Mozilli .

Ionuț G. Stan
źródło
17
Co dokładnie oznacza prefiks url () po „@ -moz-document”? po prostu ciekawy.
Matt
17
@Matt, to sposób na filtrowanie stron internetowych, na których zastosowano ten CSS. Inną opcją jest użycie domain()filtra. Na przykład @-moz-document domain(google.com) {...}zastosuje załączone reguły CSS tylko w domenie google.com.
Ionuț G. Stan
10
Podoba mi się to, że nie musisz tworzyć całkowicie nowego dokumentu CSS w tym celu, tak jak robisz to w IE.
JD Isaacks,
7
@JohnIsaacks Nie potrzebujesz osobnego arkusza stylów dla komentarzy warunkowych IE. Mogą być wbudowane. To, czy chcesz to zrobić w ten sposób, to kolejne pytanie.
Dylan,
4
Warto zauważyć, że to obejście nie działa już od Firefoksa 59, wydanego w marcu 2018 r .: bugzilla.mozilla.org/show_bug.cgi?id=1035091
Jordan Gray
104

Zaktualizowano (z komentarza @Antoine)

Możesz użyć @supports

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

Więcej @supports tutaj

laaposto
źródło
11
Jest to o wiele ładniejsze rozwiązanie niż przykład @ -moz-document url-prefix (), gra również parserem SCSS, podczas gdy drugi nie.
Alastair Hodgson,
1
Używam Firefoksa i nadal jest biały, czy to z powodu wersji, której używam?
Antoine,
3
@Antoine Masz rację! Nie działało w najnowszych wersjach FF. Zaktualizowałem swoją odpowiedź. Powinno już działać. Dzięki za wskazanie tego!
laaposto
83

Oto jak poradzić sobie z trzema różnymi przeglądarkami: IE, FF i 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
źródło
66
Jeśli dobrze to rozumiem, najwyższy nie jest chrome, ale określa tylko domyślne zachowanie, które zastępujesz w Firefoksie i IE.
Muhd,
3
Bardzo przydatne. Jako były miłośnik Firefoksa mam przeczucie, że muszę robić takie hacki dla Firefoksa, ale dopóki działa, mogę z tym żyć.
SpaceBeers
Sugestia wykrycia IE nie działa, jeśli chcesz dodać ją do pliku .css. Możesz w ten sposób dołączyć do niego arkusze stylów w HTML. Jeśli chcesz mieć IE CSS w pliku CSS, polecam zajrzeć
Biepbot Von Stirling
16

Oto kilka hacków przeglądarki skierowanych tylko na przeglądarkę Firefox,

Używanie selektorów.

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

Hacki JavaScript

var isFF = !!window.sidebar;

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

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

Hacki zapytań o media

To będzie działać, Firefox 3.6 i później

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

Jeśli potrzebujesz więcej informacji, odwiedź przeglądarkę

Hbirjand
źródło
1
Czy mógłbyś bardziej szczegółowo opisać „używanie hacków selektora” oraz sposób, w jaki konkretnie podany przykład działa? Dzięki.
jj_
1
Dobra, sam to rozumiem: w zasadzie ukrywa drugi selektor w innych przeglądarkach, które nie rozumieją pierwszego. W tym przypadku tylko Mozilla to rozumie, _:moz-tree-row(hover)więc będzie to jedyna osoba, która będzie mogła przetworzyć .selector{}kolejne. Ten konkretny hack działa obecnie we wszystkich wersjach Firefoksa, sprawdź browserhacks.com więcej informacji na temat .
jj_
1
Użyłem ekranu Media Query Hack: \ @media i (-moz-images-in-menu: 0) {} To ładnie pasuje do ekranu \ @media i (-webkit-min-device-pixel-ratio: 0) i Program Visual Studio nie generuje ostrzeżenia za jego pomocą.
Dan Randolph,
1
Uwaga -moz-images-in-menu: 0 został usunięty z przeglądarki Firefox 52 - bugzilla.mozilla.org/show_bug.cgi?id=1302157
jonathanKingston
13

Przede wszystkim wyłączenie odpowiedzialności. Tak naprawdę nie opowiadam się za rozwiązaniem, które przedstawiam poniżej. Jedyny napisany przeze mnie CSS dla przeglądarki jest przeznaczony dla IE (szczególnie IE6), choć szkoda, że ​​tak nie było.

Teraz rozwiązanie. Poprosiłeś, aby był elegancki, więc nie wiem, jak elegancki jest, ale z pewnością będzie skierowany tylko na platformy Gecko.

Ta sztuczka działa tylko wtedy, gdy JavaScript jest włączony i korzysta z powiązań Mozilla ( XBL ), które są intensywnie używane wewnętrznie w Firefoksie i we wszystkich innych produktach opartych na Gecko. Dla porównania jest to właściwość CSS zachowania w IE, ale o wiele bardziej wydajna.

W moje rozwiązanie zaangażowane są trzy pliki:

  1. ff.html: plik do stylu
  2. ff.xml: plik zawierający powiązania Gecko
  3. ff.css: stylistyka specyficzna dla Firefoksa

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

Aktualizacja: powyższe rozwiązanie nie jest tak dobre. Byłoby lepiej, gdyby zamiast dodawać nowy element LINK , dodałby klasę „firefox” do elementu BODY. I jest to możliwe, po prostu zastępując powyższy JS następującym:

this.className += " firefox";

Rozwiązanie jest zainspirowane zachowaniem Dean Edwards .

Ionuț G. Stan
źródło
11

Użycie reguł specyficznych dla silnika zapewnia skuteczne kierowanie na przeglądarkę.

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

Odmiana Twojego pomysłu polega na server-side USER-AGENT detectortym, aby dowiedzieć się, jaki arkusz stylów dołączyć do strony. W ten sposób możesz miećfirefox.css, ie.css, opera.css, etc .

Podobną czynność możesz osiągnąć w samym Javascript, chociaż nie możesz uważać tego za czyste.

Zrobiłem podobną rzecz, dodając opcję, default.cssktóra zawiera all common styles and then specific style sheetsdodawanie, aby zastąpić lub ulepszyć ustawienia domyślne.

Kekoa
źródło
To trochę podoba miło i stabilne podejście & mdash; dzięki & mdash; chociaż nadal zależy to od wąchania przeglądarki. Wolę użyć czegoś, co zależy od możliwości, na przykład reguły CSS opartej tylko na Gecko lub czegoś takiego. Używam tego samego podstawowego podejścia: stylów domyślnych i dodatków specyficznych dla przeglądarki.
dodany
1
@avdaag: W większości przypadków preferowane jest wykrywanie możliwości, ale gdy próbujesz wprowadzić hacka w celu „naprawienia” błędu określonego silnika renderowania, teoretycznie optymalnym rozwiązaniem jest celowanie w klienta użytkownika. Nie dyskryminujesz nieznanych przeglądarek; a pole user-agent ma powiedzieć ci, jakiego silnika renderującego używa przeglądarka, więc nawet jeśli pojawi się rzadka przeglądarka Gecko, nadal będzie to poprawiane. To powiedziawszy, wiele przeglądarek fałszuje teraz swoje ciągi klienta-użytkownika z powodu niewłaściwego użycia wykrywania przeglądarki. W praktyce może to nie działać tak dobrze.
Lèse majesté
6

Teraz, gdy Firefox Quantum 57 jest obecnie oferowany z istotnymi - i potencjalnie przełomowymi - ulepszeniami Gecko, znanymi wspólnie jako Stylo lub Quantum CSS, możesz znaleźć się w sytuacji, w której będziesz musiał rozróżnić starsze wersje Firefox i Firefox Quantum.

Z mojej odpowiedzi tutaj :

Możesz używać @supportsz calc(0s)wyrażeniem w połączeniu z @-moz-documenttestem Stylo - Gecko nie obsługuje wartości czasu w calc()wyrażeniach, ale Stylo:

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

Oto dowód koncepcji:

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

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

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

Kierowanie na starsze wersje Firefoksa jest nieco trudne - jeśli interesują Cię tylko wersje obsługujące @supports, czyli w wersji 22 lub nowszej @supports not (animation: calc(0s)), wystarczy:

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

... ale jeśli chcesz obsługiwać nawet starsze wersje, musisz skorzystać z kaskady , jak pokazano w powyższym potwierdzeniu koncepcji.

BoltClock
źródło
3

Jedynym sposobem na to jest skorzystanie z różnych hacków CSS, co znacznie zwiększy prawdopodobieństwo niepowodzenia Twojej strony przy następnych aktualizacjach przeglądarki. Jeśli tak, będzie MNIEJSZY bezpieczniejszy niż użycie sniffera przeglądarki js.

jvenema
źródło
0

Poniższy kod ma tendencję do rzucania ostrzeżeń o stylu:

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

Zamiast używać

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

Pomógł mi! Tutaj znajdziesz rozwiązanie do ostrzegania o strzępach stylu

Kailas
źródło