Selezione fogli di stile in base al browser – Commenti Condizionali
Posted by admin | Posted in Riconoscimento Browser | Posted on 01-10-2009
Tag:commenti condizionali, Riconoscimento Browser, selezione fogli di stile in base al browser
0
Tra i metodi differenti esistenti per caricare un foglio di stile diverso a seconda del browser, possiamo utilizzare uno strumento offerto da Microsoft Internet Explorer, cioè, i commenti condizionali.
I commenti condizionali sono porzioni di codice HTML definite con la sintassi di commento HTML, per cui ignorate dai browser (a parte Internet Explorer).
Normale commento HTML:
1 <!-- Questo è un commento -->
Il commento è visibile solo nel codice sorgente della pagina e non nella pagina stessa. La soluzione di Microsoft sta quindi di inserire delle condizioni (if) all’interno appunto dei commenti HTML, la sintassi è semplice e così anche le espressioni che vengono valutate.
Commento Condizionale:
1 <!--[if espressione]> Contenuto <![endif]-->
In questo modo è possibile visualizzare dei contenuti a seconda del risultato dell’espressione, anche il codice per caricare un foglio di stile.
Alcuni esempi di espressioni:
1 <!--[if IE]>....<![endif]--> è verificata se il browser è Internet Explorer in qualsiasi versione.2 <!--[if IE 5]>....<![endif]--> è verificata se il browser è Internet Explorer versione 5 ;3 <!--[if gt IE 5]>....<![endif]--> è verificata se il browser è Internet Explorer con versione maggiore di 5;4 <!--[if gte IE 5]>....<![endif]--> è verificata se il browser è Internet Explorer versione 5 o superiore;5 <!--[if !IE 5]>....<![endif]--> è verificata se il browser non è Internet Explorer 5.
Ovviamente basta sostituire il numero associato alla versione per creare l’espressione di cui abbiamo bisogno, anche creando commenti a cascata.
Ora è immediato il passaggio per caricare un foglio di stile, per esempio carico ie.css in caso di Internet Explorer e comunque il file generic.css:
1 <link rel="stylesheet" href="generic.css" type="text/css" />2 <!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
Ha senso che il foglio di stile dedicato ad Internet Explorer sia successivo a quello generico, in quanto permette di sostituire i parametri diversamente definiti.