Usare i commenti condizionali per i fogli di stile

Area dedicata alle guide di phpBB 3
Rispondi
Avatar utente
Tiger
PhpBB Expert
PhpBB Expert
Messaggi: 135
Iscritto il: 04/11/2012, 16:15
Link del Forum: Campo non specificato
Località: Roma

Usare i commenti condizionali per i fogli di stile

Messaggio da Tiger »

Articolo scritto da Max Bossi
Chiunque abbia sviluppato un qualunque sito di media complessità si sarà reso conto che il risultato prodotto risulta (talvolta leggermente, talvolta notevolmente) diverso a seconda che si visualizzino le pagine web con IExplorer o Firefox (per limitarci ai browser più poolari).
Come noto a tutti gli sviluppatori di siti web, infatti, i diversi browser in circolazione (purtroppo!) non interpretano il codice CSS allo stesso modo.

In precedenti articoli abbiamo già visto alcune di queste diversità (ad esempio la gestione del padding e del border nel computo delle dimensioni imposte ad un box) dovute, soprattutto, alle peculiarità di IExplorer, browser storicamente poco attento alle indicazioni del W3C.
Senza scendere nei particolari di queste differenze, in questo articolo mi limiterò ad illustrare una tecnica (detta dei commenti condizionali) per gestire al meglio queste differenze e creare siti visivamente identici indipendentemente dal browser utilizzato dai nostri utenti.
Gli hack per i CSS (cenni)

Fino a poco tempo fa gli sviluppatori più attenti, al fine di creare siti cross-browser, erano soliti ricorrere ai cosidetti hack, dei semplici "trucchetti" basati su dei bug di IExplorer nella gestione del codice, grazie ai quali era possibile scrivere (grazie a particolari accorgimenti) diverse istruzioni nei CSS che sarebbero state eseguite e/o ignorate a seconda che il browser utilizzato fosse IE o altro.
Con la versione 7 di IE, tuttavia, Microsoft ha risolto numerosi di questi bug, rendendo praticamente non più consigliabile il ricorso agli hack per i CSS.
Per questo motivo sempre più sviluppatori fanno ricorso ai commenti condizionali per scrivere le proprie pagine web.

I commenti condizionali

A differenza degli hack accennati sopra, i commenti condizionali non si basano su dei bug di un dato browser, bensì sono un nuovo ed efficace strumento di controllo condizionale integrato all'interno di Internet Explorer.

Per cominciare precisiamo che questo particolare tipo di sintassi condizionale viene racchiusa tra i classici marcatori utilizzati nei commenti al codice HTML:

Codice: Seleziona tutto

<!-- bla bla bla -->
Come sappiamo il codice marcato come commento (nel esempio "bla bla bla") non viene stampato a video.

Nel caso dei commenti condizionali avremo delle istruzioni all'interno di commenti (codice, come abbiamo detto, nascosto all'utente); tali istruzioni effettuernno delle verifiche circa il realizzarsi o meno di una data condizione con la conseguenza di produrre (o non produrre) un dato effetto.
Per prima cosa vediamo la sintassi:

Codice: Seleziona tutto

<!--[if espressione]> codice XHTML <![endif]-->
E' opportuno ricordarsi sempre che questi commenti, per funzionare correttamente, vanno inseriti sempre all'interno dei tag <head> e </head>.

Vediamo qualche esempio che meglio illustrerà il funzionamento dei commenti condizionali:

Codice: Seleziona tutto

Verifichiamo che il browser si Internet Explorer (IE)
<!--[if IE]>....<![endif]-->

Verifichiamo che il browser si IE versione 7
<!--[if IE 7]>....<![endif]-->

Verifichiamo che il browser si IE versione diversa dalla 7
<!--[if !IE 7]>....<![endif]-->

Verifichiamo che il browser si IE versione superiore alla 5
<!--[if gt IE 5]>....<![endif]-->

Verifichiamo che il browser si IE versione uguale o superiore alla 5
<!--[if gte IE 5]>....<![endif]-->

Verifichiamo che il browser si IE versione inferiore alla 6
<!--[if lt IE 6]>....<![endif]-->

Verifichiamo che il browser si IE versione uguale o inferiore alla 6
<!--[if lte IE 6]>....<![endif]-->
Negli esempi visti sopra abbiamo visto anche il funzionamento di diversi operatori di confronto. Vediamo un riepilogo qui sotto:
Operatore Significato
! Negazione
gt Maggiore
gte Maggiore o Uguale
lt Minore
lte Minore o Uguale
Utilizzo pratico dei commenti condizionali

Per far si che un commento condizionale produca il suo effetto, abbiamo due strade:

possiamo importare due fogli di stile, uno per tutti i browser e l' altro con le modifiche da far intepretare ad Internet Explorer
oppure scrivere il codice CSS all'interno della pagina e poi scriverene altro all'interno del commento condizionale

Di seguito due esempi che meglio illustreranno quanto detto poco sopra:

Codice: Seleziona tutto

<link rel="stylesheet" href="tutti.css" type="text/css" />
<!--[if IE]>
  <link rel="stylesheet" href="iexplorer.css" type="text/css" />
<![endif]-->

Codice: Seleziona tutto

<style type="text/css">
h1 { color: #FF0000 }
</style>
<!--[if IE]>
  <style type="text/css">
  h1 { color: #0000FF }
  </style>
<![endif]-->

<h1>Prova</h1>
Vi invito a provare quest'ultimo codice sia su Internet Explorer che su Firefox: noterete che i caratteri compresi in <h1> e </h1> verranno visualizzati di color rosso con FF e blu con IE.
Conclusioni

Lo strumento offerto dai commenti condizionali risulta essere utilissimo per compensare le differenze tra i vari browser nella lettura dei CSS.
Con un po' di attenzione potrete, finalmente, realizzare siti realmente cross-browser senza troppa fatica!
Rispondi