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…

css firefox css-hack

— 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

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>

Rozwiń fragment kodu

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>

Rozwiń fragment kodu

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:

ff.html: plik do stylu
ff.xml: plik zawierający powiązania Gecko
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';
    }
  }
}
Rozwiń fragment kodu
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

1

Obsługa CSS ma powiązanie z javascript, na marginesie.

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

Rozwiń fragment kodu

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

— NVRM
ź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