Targeting solo per Firefox con CSS

616

Utilizzando i commenti condizionali è facile scegliere come target Internet Explorer con regole CSS specifiche del browser:

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

A volte è il motore Gecko (Firefox) che si comporta male. Quale sarebbe il modo migliore per indirizzare solo Firefox con le tue regole CSS e non un singolo altro browser? Cioè, non solo Internet Explorer dovrebbe ignorare le regole solo di Firefox, ma anche WebKit e Opera dovrebbero.

Nota: sto cercando una soluzione "pulita". A mio avviso, l'utilizzo di uno sniffer del browser JavaScript per aggiungere una classe "firefox" al mio HTML non è considerato pulito. Vorrei vedere qualcosa che dipende dalle capacità del browser, proprio come i commenti condizionali sono solo "speciali" per IE ...

css  firefox  css-hack 
— avdgaag
fonte
Potrebbe voler guardare alcune domande simili e il loro relative risposte ... stackoverflow.com/questions/738831/...
— AnonJr
3
c'è un modo per indirizzare Firefox su una macchina Windows contro un Mac?
— Kegan Quimby,
4
<! - [if Gecko]> ... include ... <! [endif] ->
— definisce il

Risposte:

1252

OK, l'ho trovato. Questa è probabilmente la soluzione più pulita e semplice là fuori e non si basa sull'attivazione di JavaScript.

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

È basato su un'altra estensione CSS specifica di Mozilla. C'è un intero elenco per queste estensioni CSS proprio qui: Mozilla CSS Extensions .

— Ionuț G. Stan
fonte
17
Cosa significa esattamente url-prefix () dopo "@ -moz-document"? solo curioso.
— Matt,
17
@Matt, è un modo per filtrare i siti Web su cui viene applicato quel CSS. Un'altra opzione è quella di utilizzare il domain()filtro. Ad esempio, @-moz-document domain(google.com) {...}verranno applicate le regole CSS allegate solo sul dominio google.com.
— Ionuț G. Stan,
10
Mi piace come non devi creare un documento CSS completamente nuovo per questo, come fai per IE.
— JD Isaacks,
7
@JohnIsaacks Non è necessario un foglio di stile separato per i commenti condizionali di IE. Possono essere in linea. Se vuoi farlo in questo modo è un'altra domanda.
— Dylan,
4
Vale la pena notare che questa soluzione alternativa non funziona più a partire da Firefox 59, rilasciato a marzo 2018: bugzilla.mozilla.org/show_bug.cgi?id=1035091
— Jordan Grey,
105

Aggiornato (dal commento di @Antoine)

Puoi usare @supports

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

Maggiori informazioni @supports qui

— laaposto
fonte
11
Questa è una soluzione molto più bella dell'esempio @ -moz-document url-prefix (), funziona bene anche con il parser SCSS mentre l'altro no.
— Alastair Hodgson,
1
Sto usando Firefox ed è ancora bianco, è a causa della versione che sto usando?
— Antoine,
3
@Antoine Hai ragione! Non ha funzionato per le ultime versioni di FF. Ho aggiornato la mia risposta. Dovrebbe funzionare ora. Grazie per averlo sottolineato!
— laaposto,
83

Ecco come affrontare tre diversi browser: IE, FF e 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
fonte
66
Se lo capisco correttamente, quello in alto non è Chrome, ma specifica solo il comportamento predefinito che sostituisci per Firefox e IE.
— Muhd,
3
Molto utile. Come ex amante di Firefox, sono convinto di dover fare hack specifici per Firefox come questo, ma fintanto che funziona posso conviverci.
— SpaceBeers,
Il suggerimento per il rilevamento di IE non funziona se si desidera aggiungerlo in un file .css. Tuttavia, puoi includere fogli di stile in questo modo in HTML. Se vuoi avere IE CSS in un file CSS, ti consiglio di guardare qui: keithclark.co.uk/articles/…
— Biepbot Von Stirling
16

Ecco alcuni hack del browser per il targeting solo del browser Firefox,

Utilizzando hack selettori.

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

Hacks JavaScript

var isFF = !!window.sidebar;

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

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

Hack di query multimediali

Funzionerà su Firefox 3.6 e versioni successive

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

Se hai bisogno di ulteriori informazioni, visita browserhacks

— Hbirjand
fonte
1
Potresti approfondire un po 'di più "l'uso degli hack selettori" e come funziona l'esempio che hai fornito in modo specifico? Grazie.
— jj_
1
D'accordo, ce l'ho fatta io: fondamentalmente quello che fa è nascondere il secondo selettore ad altri browser che non comprendono il primo. In questo caso solo Mozilla capisce, _:moz-tree-row(hover)quindi sarà l'unico in grado di elaborare il .selector{}successivo. Questo hack specifico attualmente funziona su tutte le versioni di Firefox, controlla browserhacks.com per ulteriori informazioni al riguardo.
— jj_
1
Ho usato il Media Query Hack: \ @media screen e (-moz-images-in-menu: 0) {} Questo va bene con lo schermo \ @media e (-webkit-min-device-pixel-ratio: 0) e Visual Studio non genera un avviso durante l'utilizzo.
— Dan Randolph,
1
Nota -moz-images-in-menu: 0 è stato rimosso in Firefox 52 - bugzilla.mozilla.org/show_bug.cgi?id=1302157
— jonathanKingston
13

Prima di tutto, un disclaimer. Non sostengo davvero per la soluzione che presento di seguito. L'unico CSS specifico per browser che scrivo è per IE (in particolare IE6), anche se vorrei che non fosse così.

Ora, la soluzione. Hai chiesto che fosse elegante, quindi non so quanto sia elegante, ma sicuramente prenderà di mira solo le piattaforme Gecko.

Il trucco funziona solo quando JavaScript è abilitato e utilizza i collegamenti Mozilla ( XBL ), che sono ampiamente utilizzati internamente in Firefox e in tutti gli altri prodotti basati su Gecko. Per un confronto, questo è come la proprietà CSS del comportamento in IE, ma molto più potente.

Tre file sono coinvolti nella mia soluzione:

  1. ff.html: il file in stile
  2. ff.xml: il file che contiene gli attacchi Gecko
  3. ff.css: stile specifico di Firefox

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

Aggiornamento: la soluzione sopra non è così buona. Sarebbe meglio se invece di aggiungere un nuovo elemento LINK aggiungesse quella classe "firefox" sull'elemento BODY. Ed è possibile, semplicemente sostituendo il JS sopra con il seguente:

this.className += " firefox";

La soluzione è ispirata ai comportamenti moz di Dean Edwards .

— Ionuț G. Stan
fonte
11

L'uso di regole specifiche del motore garantisce un targeting del browser efficace.

<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
fonte
7

Una variante della tua idea è quella di avere un server-side USER-AGENT detectorche capirà quale foglio di stile allegare alla pagina. In questo modo puoi avere un firefox.css, ie.css, opera.css, etc.

Puoi realizzare qualcosa di simile in Javascript stesso, anche se potresti non considerarlo pulito.

Ho fatto una cosa simile facendo aggiungere un default.cssche include all common styles and then specific style sheetsper sovrascrivere o migliorare le impostazioni predefinite.

— Kekoa
fonte
A qualcuno piace un approccio piacevole e stabile & mdash; grazie & mdash; anche se dipende ancora dallo sniffing del browser. Preferirei usare qualcosa che dipende dalle capacità, come una regola CSS solo Gecko o qualcosa del genere. Uso lo stesso approccio di base: stili predefiniti e componenti aggiuntivi specifici del browser.
— avdgaag,
1
@avdaag: il rilevamento delle capacità è preferito nella maggior parte dei casi, ma quando si tenta di iniettare un hack per "correggere" un bug del motore di rendering specifico, il targeting dell'agente utente è, in teoria, la soluzione ottimale. Non stai discriminando i browser sconosciuti; e il campo agente utente dovrebbe dirti quale motore di rendering sta utilizzando il browser, quindi anche se arriva un raro browser Gecko, verrà comunque fornita la correzione. Detto questo, molti browser ora falsificano le stringhe di user-agent a causa di un uso inappropriato del rilevamento del browser. Quindi in pratica potrebbe non funzionare così bene.
— Lèse majesté,
6

Ora che Firefox Quantum 57 è uscito con miglioramenti sostanziali - e potenzialmente innovativi - di Gecko noti collettivamente come Stylo o Quantum CSS, potresti trovarti in una situazione in cui devi distinguere tra versioni legacy di Firefox e Firefox Quantum.

Dalla mia risposta qui :

È possibile utilizzare @supportscon calc(0s)un'espressione insieme @-moz-documenta test per Stylo - Gecko non supporta i valori di tempo nelle calc()espressioni ma Stylo:

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

Ecco una prova di concetto:

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

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

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

Il targeting di versioni legacy di Firefox è un po 'complicato: se sei interessato solo alle versioni che supportano @supports, che è Fx 22 e versioni successive, @supports not (animation: calc(0s))è tutto ciò che ti serve:

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

... ma se hai bisogno di supportare versioni anche più vecchie, dovrai usare la cascata , come dimostrato nella dimostrazione del concetto sopra.

— BoltClock
fonte
3

L'unico modo per farlo è tramite vari hack CSS, che renderanno molto più probabile che la tua pagina fallisca nei prossimi aggiornamenti del browser. Semmai, sarà MENO sicuro rispetto all'utilizzo di uno sniffer js-browser.

— jvenema
fonte
0

Il codice seguente tende a generare avvisi di lanugine di stile:

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

Invece usando 

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

Mi ha aiutato! Ho ottenuto la soluzione per l'avvertimento sui filacci di stile da qui

— Kailas
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.