In questa lezione vedremo come inserire dei commenti all’interno del codice HTML delle nostre pagine web. Circa l’importanza dei commenti ritengo opportuno rammentarvi che la presenza di annotazioni all’interno del codice rappresenta non solo una buona regola di programmazione, ma è anche una pratica utilissima che faciliterà ogni tipo di intervento futuro (effettuato da noi o da terzi) all’interno del codice il quale, purtroppo, non è sempre self explanatory.
Cosa sono i commenti
In linea generale possiamo dire che i commenti all’interno del codice, a prescindere dal linguaggio con cui questo è scritto, sono delle note inserite dallo sviluppatore e visibili esclusivamente accedendo al sorgente.
I commenti all’interno del codice HTML, quindi, non sono visibili agli utenti in quanto si tratta di porzioni di testo che non verranno renderizzate dal browser, ma saranno visibili solo a quegli utenti che, per curiosità, vorranno aprire il codice sorgente della pagina web.
Nel caso del codice HTML i commenti possono essere utilizzati per:
- inserire annotazioni in determinati punti del codice affinchè questo, in futuro, possa essere mantenuto e modificato più semplicemente;
- marcare determinati blocchi o punti della pagina al fine di renderli più facilmente riconoscibili;
- rendere momentaneamente invisibili determinate porzioni di codice durante un debug o una modifica temporanea;
- attivare CSS o script solo in determinate versioni del browser Internet Explorer (cd. commenti condizionali).
La sintasi dei commenti HTML
La sintassi di un commento in HTML è la seguente:
<!-- TESTO DEL COMMENTO -->Come potete notare il commento deve iniziare con <!– e terminare con –>.
Nell’esempio visto in precedenza il commento era su un unica linea ma nulla vieta di creare commenti più corposi anche su più linee. Per farlo sarà necessario fare in questo modo:
<!--
PRIMA LINEA DI COMMENTO
SECONDA LINEA DI COMMENTO
TERZA LINEA DI COMMENTO
-->i commenti in HTML, in passato, sono stati molto utilizzati anche nello scripting lato client: era considerato buona norma, infatti, inserire il codice Javascript all’interno dei marcatori di commento in modo da ovviare ad eventuali problemi di visualizzazione con browser obsoleti e privi di supporto per Javascript. Vediamo un esempio:
<script type="text/javascript">
<!--
alert('Ciao da Mr.Webmaster');
//-->
</script>Altra forma particolare di commenti sono i commenti condizionali che rappresentano una sintassi proprietaria del browser di casa Microsoft Internet Explorer.
Esempi pratici di utilizzo dei commenti in HTML
Vediamo, di seguito, alcuni casi pratici di utilizzo dei commenti.
Esempio di annotazione nel codice:
<html>
<body>
<!-- Questo DIV è utilizzato come distanziatore ed ha un'altezza di 30 pixel -->
<div class="xyz"></div>
</body>
</html>Esempio di commenti utilizzati per marcare alcuni punti nel codice (ad esempio i tag di chiusura dei DIV strutturali):
<html>
<body>
<div class="pippo">
<div class="pluto">
<div class="topolino">
</div><!-- Chiusura DIV topolino -->
</div><!-- Chiusura DIV pluto -->
</div><!-- Chiusura DIV pippo -->
</body>
</html>Esempio di commenti utilizzati per "disattivare" alcune porzioni di codice senza cancellarle:
<html>
<body>
<!-- <p>Il nostro ristorante è chiuso per ferie!</p> -->
<p>Il nostro ristorante è aperto!</p>
</body>
</html>I commenti condizionali di Internet Explorer
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 un browser piuttosto che un altro. Fino a qualche anno fa il problema era particolarmente accentuato a causa di alcune "particolarità" di Internet Explorer che, a causa della sua scarsa compatibilità con gli standard, ha creato non pochi grattacapi agli sviluppatori di pagine web.
Consapevoli di queste problematiche, gli sviluppatori di casa Microsoft hanno implementato, all’interno del proprio browser, il supporto ad un particolare tipo di commenti, detti appunto commenti condizionali, grazie ai è possibile utilizzare fogli di stile o script specifici per le diverse versioni di questo browser.
Per cominciare precisiamo che questo particolare tipo di sintassi condizionale viene racchiusa tra i classici marcatori utilizzati nei commenti al codice HTML e, come questi, non generano alcun output a video.
la particolarità di questo tipo di commenti è che questi ospiteranno delle istruzioni attraverso le quali verificare se una data condizione (se l’utente utilizza o meno una data versione di IE) si è verificata oppure no. Per prima cosa vediamo la sintassi:
<!--[if espressione]>
...
<![endif]-->E’ opportuno ricordarsi 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:
Verifichiamo che il browser si Internet Explorer (IE)
<!--[if IE]>....<![endif]-->Verifichiamo che il browser sia IE versione 9
<!--[if IE 9]>....<![endif]-->Verifichiamo che il browser sia IE versione diversa dalla 9
<!--[if !IE 9]>....<![endif]-->Verifichiamo che il browser sia IE versione superiore alla 7
<!--[if gt IE 7]>....<![endif]-->Verifichiamo che il browser sia IE versione uguale o superiore alla 6
<!--[if gte IE 6]>....<![endif]-->Verifichiamo che il browser sia IE versione inferiore alla 6
<!--[if lt IE 6]>....<![endif]-->Verifichiamo che il browser sia IE versione uguale o inferiore alla 6
<!--[if lte IE 6]>....<![endif]-->Negli esempi 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
Un esempio tipico di utilizzo dei commenti condizionali riguarda i CSS. Di seguito due possibili scenari di utilizzo:
- 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:
<link rel="stylesheet" href="tutti.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="iexplorer.css" type="text/css" />
<![endif]--><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 un altro browser: noterete che i caratteri compresi in <h1> e </h1> verranno visualizzati di color rosso con tutti i browser e blu con IE.
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!
