Puntare solo su Firefox con i CSS

Usando i commenti condizionali è facile indirizzare Internet Explorer con regole CSS specifiche per il 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 per Firefox, ma anche WebKit e Opera dovrebbero.

Nota: Sto cercando una soluzione pulita. Usare un browser sniffer JavaScript per aggiungere una classe 'firefox' al mio HTML non si qualifica come pulito, secondo me. Mi piacerebbe piuttosto vedere qualcosa che dipende dalle capacità del browser, un po' come i commenti condizionali sono solo 'speciali' per IE...

Shishir Morshed
Domanda modificata 25º dicembre 2015 в 8:13
Programmazione
firefox css css-hack
4º giugno 2009 в 8:19
15 visualizzazioni

Prima di tutto, un disclaimer. In realtà non sostengo la soluzione che presento di seguito. L'unico CSS specifico per il browser che scrivo è per IE (specialmente IE6), anche se vorrei che non fosse il caso.

Ora, la soluzione. Hai chiesto che sia elegante, quindi non so quanto sia elegante, ma di sicuro si rivolge solo alle piattaforme Gecko.

Il trucco funziona solo quando JavaScript è abilitato e fa uso dei binding di Mozilla (XBL), che sono molto usati internamente in Firefox e in tutti gli altri prodotti basati su Gecko. Per fare un paragone, questo è come la proprietà CSS behavior in IE, ma molto più potente.

Tre file sono coinvolti nella mia soluzione:

  1. ff.html: il file per lo stile
  2. ff.xml: il file che contiene i collegamenti Gecko
  3. ff.css: Lo stile specifico di Firefox

ff.html






body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}




<h1>This should be red in FF</h1>

**{{{57630}}.

<?xml version="1.0"?>

**Il mio nome non è un nome di battesimo, ma un nome di fantasia.

h1 {
 color: red;
}

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

this.className += " firefox";

La soluzione è ispirata da Dean Edwards'moz-behaviors.

Ionuț G. Stan
Risposta modificata 4º giugno 2009 в 9:16
Commentari (0)

Una variante della tua idea è avere un rilevatore di USER-AGENT lato server che capirà quale foglio di stile allegare alla pagina. In questo modo puoi avere un `firefox.css, ie.css, opera.css, ecc.

**Si può fare una cosa simile in Javascript stesso, anche se non si può considerarlo così pulito.

Ho fatto una cosa simile avendo un default.css che include `tutti gli stili comuni e poi vengono aggiunti fogli di stile specifici per sovrascrivere o migliorare quelli predefiniti.

Anzil khaN
Risposta modificata 16º marzo 2018 в 7:40
Commentari (2)

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

Commentari (0)