Ovvero: volevo inviare una mail a hubrys però ho pensato che: 1) se gli avessi mandato un messaggio privato per spiegarglielo Splinder si sarebbe mangiato il codice HTML che serviva senza far capire una cippa al destinatario, come accadde con Ossimorosa, e 2) alla fine è una cosa che può interessare anche altri.
Ovvero, ancora: se nel post precedente avevo ricercato quel minimo di comprensibilità, adesso non ci capirete na mazza pe’ ddavero.
Allora.
Capita, in una pagina HTML, quale può essere appunto il proprio blog, di avere dei blocchi di testo che occupano un po’ troppo spazio. Ad esempio, c’è chi ha molti link ad altri blog, c’è chi invece mette da parte una lista di link ai vari post che fan parte di una serie (ad esempio la tragica Telecomachia ^^), e così via.
Ebbene, noi vi possiamo aiutare. Dove noi sta per io e il DHTML, che a sua volta sta per Dynamic HyperText Markup Language, che a sua volta sta semplicemente per combinazione di CSS, Javascript e HTML (anzi, XHTML perché noi siamo fighi e usiamo le ultime novità del mercato).
Premesse generali, sostanzialmente inutili in questo contesto, ma che posson sempre servire in futuro.
Il CSS serve a definire molto più facilmente le proprietà di un oggetto HTML. Ad esempio, mettiamo di voler rendere un paragrafo di testo rosso. Senza CSS avremmo scritto:
<p>
<font color="red">
Questo è il testo che diventa rosso.
</font>
</p>
Invece noi che siamo bravi e vogliamo fare i fighi che tra l’altro risparmiano pure un po’ di spazio, scriveremo:
<p style="color: red;">
Questo è il testo che diventa rosso.
</p>
Voi direte: l’effetto è lo stesso, allora che ci frega? In verità vi dico, questa cosa ha un suo senso, ma se non lo capite in questo post come se fosse una rivelazione divina non ve lo potrò spiegare altrimenti, anche perché se no a quest’ora lavorerei alla Jackson Libri e voi comprereste libri da 700 pagine per la modica cifra di 50 euro (ehi, ci devo pensare…).
Ok, ve lo dico. La vera utilità del CSS risiede nelle classi. Sono una cosa fighissima: mettiamo il caso di avere 10 paragrafi disseminati qua e là, e noi vogliamo che siano mostrati tutti alla stessa maniera. Per esempio, questi 10 paragrafi, al contrario degli altri, devono essere tutti gialli su sfondo nero.
Ciao! Sono un paragrafo giallo su sfondo nero!
Per renderli così dovremmo scrivere qualcosa tipo:
<p style="background-color: black; color: yellow;">
Ciao! Sono un paragrafo giallo su sfondo nero!
</p>
<p style="background-color: black; color: yellow;">
Ciao! Sono un altro paragrafo giallo su sfondo nero!
</p>
<p style="background-color: black; color: yellow;">
Me' basta. Fate finta che io sia già il decimo.
</p>
Sai che rottura se decidiamo, all’improvviso, di cambiare qualcosa, tipo mettere uno sfondo verde anziché uno sfondo nero? Se invece ci inventiamo una classe, e la chiamiamo, chessò, pippo, ci risparmiamo un altro po’ di rotture. La prima rottura che ci risparmiamo consiste nello scrivere, invece, così:
<p class="pippo">
Ciao! Sono un paragrafo giallo su sfondo nero!
</p>
<p class="pippo">
Ciao! Sono un altro paragrafo giallo su sfondo nero!
</p>
<p class="pippo">
Me' basta. Fate finta che io sia già il decimo.
</p>
Chiaramente dobbiamo anche spiegare a qualcuno ‘sto pippo che mi rappresenta. Questo lo andiamo a fare all’inizio del codice HTML, nella sezione compresa fra <head> e </head> (intestazione), e più in particolare in uno spazio delimitato da <style type="text/css"> e </style> (che troverete già, bello come il sole e pronto per essere manipolato):
p.pippo
{
background-color: black;
color: yellow;
}
A questo punto, se volessimo cambiare qualcosa, ad esempio appunto lo sfondo, faremo una semplice modifica alla definizione di pippo anziché andare a modificare dieci paragrafi:
p.pippo
{
background-color: black;
color: green;
}
Ok, smettetela di scorrere la pagina: la parte interessante è qui.
Esiste una proprietà del CSS chiamata display, che può assumere alcuni valori. Quelli che servono a noi sono block e none. Senza scendere nei dettagli, se impostiamo display: block, l’oggetto viene mostrato, se mettiamo invece display: none, l’oggetto c’è ma non si vede.
Piccolo esempio:
Fai clic qui per mostrare/nascondere il testo.
Cucù!
Ciao! Sono un blocco di testo nascosto!
(E mi stavo anche un po’ rompendo, magari)
Per prima cosa dobbiamo inserire una piccola funzione Javascript, possibilmente nell’intestazione (cioè, come detto prima, quella sezione del codice HTML compresa fra <head> e </head>). Il codice l’ho rubato a Trentamarlboro, che ringrazio e con cui mi complimento davvero se per caso è lui l’autore, vista l’implementazione semplice ma efficace:
<script type="text/javascript">
function toggle(id) {
if (document.all) {
if (document.all[id].style.display == 'none') {
document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}
return false;
} else if (document.getElementById) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
return false;
}
}
</script>
Successivamente dobbiamo modificare tutte quelle parti del codice HTML che vogliamo modificare. Per esempio, prendiamo quello che avrebbe dovuto fare hubrys per la serie della Telecomachia (mi permetto di aggiustarlo un po’ perché in realtà ci sono dei piccoli errori nel codice originale):
<div class="boxSidebar">
<h2 class="sectiontitle">Biastemario:</h2>
<h3>TELECOMACHIA</h3>
<a href="http://...">Prima puntata</a><br />
<a href="http://...">Seconda puntata</a><br />
<a href="http://...">Terza puntata</a><br />
...
</div>
In questo caso diventa:
<div class="boxSidebar">
<h2 class="sectiontitle">Biastermario:</h2>
<h3>
<a href="javascript: void(0);" onClick="toggle('biast_telecom');">TELECOMACHIA</a>
</h3>
<div id="biast_telecom">
<a href="http://...">Prima puntata</a><br />
<a href="http://...">Seconda puntata</a><br />
<a href="http://...">Terza puntata</a><br />
...
</div>
In questo modo apparirà più o meno come segue:
Biastemario:
TELECOMACHIA
Ok. Attendo notizie.