CSS

Hack CSS per Firefox, Opera, Safari e Internet Explorer

Neal Grosskopf in un articolo propone una lista di hack CSS con cui è possibile scrivere regole specifiche per ciascuno dei principali browser.

Come introduce l’autore, è una pratica non consigliabile, ma qualche volta potrebbe tornare utile, soprattutto quando avrete bisogno di un modo rapido come obiettivo un browser diverso da Internet Explorer.

L’autore ha creato 6 paragrafi con identificativo i diversi browser per vedere a quali sarà applicata la regola CSS:

Internet Explorer utilizzando commenti condizionali

Vi è una robusta sintassi che Microsoft ha creato per consentire agli autori di farlo. Esistono due alternative a seconda della versione del browser:

Internet Explorer utilizzando Parser Hacks

Non è molto consigliabile questa tecnica hack in quanto è molto più semplice utilizzare i commenti condizionali descritti sopra, ma se si desidera mantenere tutte le regole CSS in un solo file, questa è l’alternativa:

si noti che il trucco IE7 si applica solo alla versione 7 del browser di casa Microsoft perché la versione 6 non interpreta bene il selettore ‘>’; va inoltre notato che nessuno degli altri browser riconosce questo hack.

Firefox

Il primo hack ha come obiettivo Firefox versioni 1 e 2, utilizzando un hack vuoto sul tag body. Il secondo trucco, riconosciuto da tutte le versioni di Firefox, si ha utilizzando la proprietà ‘-moz’ combinato con ‘-document url-prefix()’:

Safari

Anche Safari ha una propria proprietà CSS, usando ‘-webkit prefix’ viene riconosciuto solo dal browser di Apple:

Opera

Il trucco per Opera può funzionare solo negando una proprietà CSS. Questo hack risulta debole semplicemente perchè presto Firefox supporterà tale hack, quindi sarà riconosciuto anche dalla “volpe di fuoco”.

You might also like

  • Kosmas

    Interressante questo articolo MaiNick

    16 ottobre 2008
  • Ottimo, grazie!

    16 ottobre 2008
  • Giovanni

    ragazzi scusate ma ho ultimato un sito in css, pubblicato e con internet explorer non mi crea problemi. se lo apro con il mio google chrome invece mi viene tutto sfalsato. aperto con google chrome da altro pc invece si vede. ma sono certo che ha problemi di compatibilità. avete soluzioni? non sono sicuro se questo articolo fa al caso mio. potete aiutarmi? il sito è http://www.corsiadr.it grazie

    16 ottobre 2008
  • Ciao avendo un Mac non posso vedere la differenza con internet explorer, ma su Firefox 3.6, Safari 4 e Google Chrome si vede uguale.
    A me sembrerebbe senza css, perché il menu a sinistra è composto da semplici link senza stile: poi non so se deve essere così.

    16 ottobre 2008
  • Giovanni

    @ MaiNickWeb:
    ho messo un immagine di come dovrebbe essere il sito:
    http://www.corsiadr.it/prova.html
    lo visualizzi così?

    16 ottobre 2008
  • Ho visto ora dal tuo codice che importi un foglio di stile style.css con il metodo import, ma tramite un path locale.
    Penso che sia quello il file principale perchè poi c’è pochissimo altro codice in css.
    Vedi se è quello il problema e fammi sapere.

    16 ottobre 2008
  • Giovanni

    devo eliminarlo o modificarlo? ma la homepage che vedevi era la stessa dell’immagine dell’ultimo link?

    16 ottobre 2008
  • No la homepage che vedo io è diversa solo per il fatto che il browser non carica il foglio di stile collegato, quello che tu inserito con il tag import.
    Se vedi nel codice dopo il titolo della pagina importi un foglio di stile in questo modo:
    @import url(“file:///C|/Documents and Settings/Giovanni/Documenti/template/5macchina/styles.css”);
    devi inserire non questo path ma il percorso o link dello stesso file che hai caricato sul server che ospita il sito web.

    16 ottobre 2008
  • Giovanni

    ho inserito il percorso giusto ma stavolta non lo visualizza a me il foglio di stile giusto nel senso che lo sfondo è tutto bianco (su dreamweaaver)
    ho messo il percorso per il file “styles” che si trova dentro la cartella principale del sito e il codice è questo:

    Corsi ADR – Certicato di formazione professionale – Home Page

    <!–
    @import url("file:C:\Documents and Settings\Giovanni\Documenti\sito corsiadr/styles.css");
    .style2 {font-size: 16px}
    .style3 {
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif, ReservoirGrunge;
    color: #CCCCCC;

    c'è qualcosa di sbagliato?

    16 ottobre 2008
  • Non va bene perché quando lo carichi sul server dove è ospitato il tuo sito quel percorso non è più valido.
    Inserisci il percorso relativo, cioè mi sembra il file styles si trovi nella stessa cartella del file che lo sta richiamando, quindi cancella tutto il percorso e metti solo il nome del file @import url(“styles.css”);

    16 ottobre 2008
  • Giovanni

    ho risolto copiando l’intero contenuto html del file styles.css in tutte le pagine.
    Grazie mille per l’aiuto! sei gentilissimo.
    alla prossima!

    16 ottobre 2008
  • Di niente!
    Un’altra soluzione può essere di inserire il link al foglio di stile in tutte le pagine nella parte head, in questo modo:

    <link rel=”stylesheet” type=”text/css” href=”http://www.corsiadr.it/style.css” />

    prova!!

    16 ottobre 2008
  • lara

    quello di safari lo legge anche chrome perchè?

    16 ottobre 2008
    • @ lara: Quando ho scritto l’articolo Chrome di Google non era ancora stato presentato, ma poiché si basano entrambi sullo stesso engine WebKit, allora gli hack css che trovi per Safari vanno bene anche per Chrome.

      16 ottobre 2008
  • […] Hack CSS per Firefox, Opera, Safari e Internet Explorer […]

    16 ottobre 2008
  • Andrea

    Ma con crome che tipo di prefisso di hack devo usare? Ho un blocco div che in crome ho assume la stesa posizione che ha in opera, in firefox e ie. Come faccio?

    16 ottobre 2008
  • Giovanni

    Gli stessi di Safari funzionano anche per Chrome.

    16 ottobre 2008
  • Drummelo

    Semplicemente GRAZIE INFINITE. Mi hai risolto un problema gigantesco in due secondi.

    GRAZIE.

    16 ottobre 2008
  • Grazie per l’articolo, molto utile.
    Però che barba sti browser, quend’è che funzioneranno tutti allo stesso modo ?

    16 ottobre 2008

LEAVE A REPLY