Kierowanie tylko Firefoksa z CSS

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

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

Czasami źle się zachowuje silnik Gecko (Firefox). Jaki byłby najlepszy sposób, aby kierować tylko Firefoksa z reguł CSS, a nie jedną inną przeglądarkę?Oznacza to, że nie tylko Internet Explorer powinien ignorować reguły tylko dla Firefoksa, ale także WebKit i Opera.

Uwaga: Szukam "czystego" rozwiązania. Korzystanie z przeglądarki JavaScript sniffer, aby dodać klasę 'firefox' do mojego HTML nie kwalifikuje się jako czysty w mojej opinii. Chciałbym zobaczyć coś, co zależy od możliwości przeglądarki, Podobnie jak komentarze warunkowe są tylko "specjalne" dla IE ...

Author: Shishir Morshed, 2009-06-05
Source

10 answers

OK, znalazłem. Jest to prawdopodobnie najbardziej czyste i łatwe rozwiązanie 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 kolejnym rozszerzeniu CSS specyficznym dla Mozilli. Istnieje cała lista tych rozszerzeń CSS tutaj: Mozilla CSS Extensions .

 1083
Author: Ionuț G. Stan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 11:00:48

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]-->
 77
Author: Waqas Ali Khan Puar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-16 08:33:14

Updated (from @ Antoine comment)

Możesz użyć @supports 

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

Więcej na @supports proszę.

 38
Author: laaposto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-29 10:22:19

Po pierwsze, zastrzeżenie. Nie jestem zwolennikiem rozwiązania, które przedstawiam poniżej. Jedyny CSS specyficzny dla przeglądarki, który piszę jest dla IE( szczególnie IE6), chociaż chciałbym, aby tak nie było.

Teraz rozwiązanie. Poprosiłeś, żeby był elegancki, więc nie wiem, jak elegancki, ale na pewno trafi tylko na platformy Gecko.

Sztuczka działa tylko wtedy, gdy JavaScript jest włączony i korzysta z wiązań Mozilli (XBL ), które są intensywnie używane wewnętrznie w Firefoksie i wszystkie inne produkty oparte na Gecko. Dla porównania, jest to jak właściwość behavior CSS w IE, ale znacznie potężniejsze.

Trzy pliki są zaangażowane w moje rozwiązanie:

  1. ff.html: plik do stylu
  2. ff.xml: plik zawierający wiązania Gecko
  3. ff.css: Firefox specific 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;
}

Aktualizacja: Powyższe rozwiązanie jest nie aż tak dobrze. Byłoby lepiej, gdyby zamiast dodawać nowy element linku dodało klasę "firefox" na elemencie BODY. I jest to możliwe, po prostu zastępując powyższe JS następującym: 

this.className += " firefox";

Rozwiązanie jest inspirowane Moz-behaviors Deana Edwardsa.

 12
Author: Ionuț G. Stan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-04 21:16:16

Oto kilka hacków przeglądarki do kierowania tylko przeglądarki Firefox,

Używanie hacków selektora.

_:-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

To będzie działać na Firefoksie 3.6 i nowszych 

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

Jeśli potrzebujesz więcej informacji, odwiedź browserhacks

 12
Author: Hbirjand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-26 10:34:35

Reguły specyficzne dla silnika zapewniają skuteczne kierowanie przeglądarki.

<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]-->
 9
Author: Rayjax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-13 16:57:57

Odmianą twojego pomysłu jest posiadanie server-side USER-AGENT detector, który będzie wiedział, jaki arkusz stylów dołączyć do strony. W ten sposób możesz mieć firefox.css, ie.css, opera.css, etc.

Możesz osiągnąć podobną rzecz w samym Javascript, chociaż możesz nie uważać go za czysty.

Zrobiłem podobną rzecz, mając default.css, który zawiera all common styles and then specific style sheets są dodawane w celu nadpisania, lub zwiększenia domyślnych.

 7
Author: Kekoa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-16 07:40:40

Jedynym sposobem na to jest użycie różnych hacków CSS, które sprawią, że Twoja strona będzie znacznie bardziej podatna na awarię przy kolejnych aktualizacjach przeglądarki. Jeśli już, będzie to mniej bezpieczne niż używanie sniffera js-browser.

 3
Author: jvenema,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-04 20:22:19

Teraz, gdy Firefox Quantum 57 jest obecnie z istotnymi - i potencjalnie przełomowe-ulepszenia do Gecko znany jako Stylo lub Quantum CSS, może znaleźć się w sytuacji, w której trzeba odróżnić starsze wersje Firefoksa i Firefox Quantum.

Z mojej odpowiedzi tutaj :

Możesz użyć @supports z wyrażeniem calc(0s) w połączeniu z @-moz-document do testowania Stylo - Gecko nie obsługuje wartości czasu w wyrażeniach calc(), ale Stylo czy:

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

Oto 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';
    }
  }
}
Jeśli interesują Cię tylko wersje, które obsługują @supports, czyli Fx 22 i nowsze, @supports not (animation: calc(0s)) to wszystko, czego potrzebujesz: 
@-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 proof-of-concept powyżej.

 2
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-14 04:31:38

Następujący kod ma tendencję do rzucania ostrzeżeń Lint Style: 

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

Zamiast 

@-moz-document url-prefix('') {
    h1 {
        color: red;
    }
}
Pomógł mi! Mamy rozwiązanie dla style lint warning z tutaj
 0
Author: Kailas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-29 09:46:43