/ //

Cosa sono e come usare i Commenti Condizionali per Internet Explorer - GM Multimedia

Vai ai contenuti

Menu principale:

Cosa sono e come usare i Commenti Condizionali per Internet Explorer

HTML.HTML5.PHP CSS.CSS3.Javascript


          Sempre più spesso in rete si riscontra la necessità di capire, la corretta interpretazione, dei vari browser di ultima generazione, del codice CSS, con riferimento alla visualizzazione di un qualsiasi elemento della pagina.

          In particolare si sente la necessità di far interpretare il codice css a Internet Explorer nello stesso modi degli altri browser; l'ottimo sarebbe di usare meno possibile hack o filtri e sfruttare appieno le caratterirtiche dei commenti condizionali. (conditional comments).

          Si conviene che i Commenti Condizionali, sono il "filtro" più sicuro ed efficace che si possa usare per Internet Explorer, il fatto è che non si basano su difetti o su "bug" del browser, ma sfruttare una caratteristica che è propria di Internet Explorer. Infatti questo browser, quando trova i Commenti per "nascondere" una parte di codice o testo, cioè tutto quello che si trova tra i simboli <!-- e --> non viene visualizzato a video.
La sintassi dei commento condizionale.

La sintassi dei Commenti Condizionali, viene riconosciuta solo da Internet Explorer. La sintassi si può paragonare a un qualsiasi linguaggio di scripting con un costrutto if...then: se una condizione è vera, avviene un'azione, se la condizione è falsa ne avviene un'altra.

Ecco come si scrive un Commento Condizionale.

<!--[if espressione]> codice <![endif]-->

Ci sono diversi commenti condizionali che si possono introdurre all'interno di una pagina html; essi vanno scritti tra i tag <head> e </head>.

Vediamo quali sono:

<!--[if IE]>....<![endif]-->:
verifica se il browser è Internet Explorer, indipendentemente dalla versione.
<!--[if IE 5]>....<![endif]-->:
verifica se il browser è Internet Explorer solo versione 5;
<!--[if gt IE 5]>....<![endif]-->:
verifica se il browser è Internet Explorer, versione superiore alla 5;
<!--[if gte IE 5]>....<![endif]-->:
verifica se il browser è Internet Explorer versione 5 o superiore;
<!--[if lt IE 6]>....<![endif]-->:
verifica se il browser è Internet Explorer versione inferiore alla 6;
<!--[if lte IE 6]>....<![endif]-->:
verifica se il browser è Internet Explorer versione 6 o inferiore;
<!--[if !IE 5.5]>....<![endif]-->:
verifica se il browser è Internet Explorer versione diversa dalla 5.5.

Un esempio concreto

          Per vedere il comportamento abbiamo un esempio in cui un titolo <h1>, un box al centro della pagina (con colore di sfondo diverso a seconda che lo si visualizzi con Internet Explorer, vers. 5, 5,5 e 6, e con un browser diverso), selettore p anch'esso di colore testo e colore bordo diversi in IE da altri.

          Per far si che un commento condizionale abbia il suo effetto, 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 normalmente e poi scrivere il commento condizionale. Il secondo caso sarà quello da usare per l'esempio.

Scriviamo il codice.:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style type="text/css">
h1{
margin:0;
padding:0;
color: #666;
font-size: 1.5em;
}
#box{
margin: 20px auto;
padding:0;
border: 1px solid #666;
width: 300px;
height: 100px;
background: #f60;
}
p{
margin:0 auto;
padding:0;
font-size: 1.1em;
color: #000;
border: 2px solid #09d;
width: 30em;
}
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
          Con questo codice vogliamo ottenere un titolo <h1> di colore grigio scuro e con un font pari ad 1.5em; e sotto un box centrato nella pagina con un bordo dello stesso colore del titolo <h1>, larghezza ed altezza pari a 300px x 100px ed un colore di sfondo arancio. Il testo racchiuso tra i tag <p> avrà una grandezza di font pari ad 1.1em, colore nero, bordo celeste ed una ampiezza (larghezza) di 30em. Tutto questo, però, lo potremo vedere in un browser diverso da Internet Explorer; per IE invece sarà utilizzato il commento condizionale specificato il calce al css..

          Traducendo quelle tre righe di codice abbiamo che: se il browser è Internet Explorer per Windows versione 6 o inferiore [quindi verifica che si tratti delle versioni 5, 5.5 e 6], deve interpretare il codice CSS "ie.css".

Il foglio di stile per IE

Dichiarazioni per IE. Tenendo conto che gli elementi sono sempre gli stessi, avremo: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#box{
height:150px;
background: #f00;
}
h1{
margin:0;
padding: 1.5em;
color: #09d;
font-size: 2.5em;
}
p{
color: #09d;
border: 5px solid #8d0;
width: 40em;
}
          Le differenze sono evidenti se si fa un confronto tra i due codici. Una cosa importante è che non si deve riscrivere tutto il codice per un determinato elemento nel foglio di stile da far "leggere" ad Internet Explorer, basta apportare le modifiche desiderate.


Visitatori online:
Sei il nostro visitatore n°:
© - Copyright 2015. - Tutti i diritti riservati - G.M. Multimedia
Torna ai contenuti | Torna al menu