Virgilio con i CSS
In questo articolo vedremo come un layout complesso come quello di Virgilio possa essere realizzato con i soli CSS senza l'ausilio di tabelle, semplificando enormemente il codice.
Dopo una breve analisi del layout originale, sarà analizzato il codice XHTML e il foglio di stile associato. Verrà infine fornita un'analisi dei risultati conseguiti nella realizzazione del layout.
Realizzare un simile layout, senza tabelle e con un particolare uso delle immagini "decorative", mostrerà la grande capacità dei CSS di controllare l'aspetto delle pagine web.
Analisi del layout di Virgilio
Il layout di Virgilio presenta tre importanti punti da analizzare: layout "pixel-perfect" a larghezza fissa, layout a "due colonne più una" (vedremo in seguito il significato di questa curiosa definizione), un elevato numero di immagini prive di contenuto informativo il cui solo scopo è realizzare il layout.
Layout pixel perfect
Il layout di Virgilio ha una larghezza fissa (760px) che da un lato impedisce una comoda visualizzione del sito ad utenti che utilizzino schermi con risoluzioni inferiori a 800x600, dall'altro permette al webmaster una facile gestione del layout, in questo caso attraverso un esagerato numero di tabelle e celle di larghezza prefissata.
Nella versione realizzata con i CSS, sarà mantenuta la scelta originale di utilizzare un layout a larghezza fissa, anche se ciò rende meno accessibile il sito.
Due colonne più una
Il layout di Virgilio è formato da due colonne: una laterale (larga 150px) dove trovano posto il modulo per la consultazione della posta elettronica e alcuni sponsor e una sezione centrale divisa orizzontalmente in due sezioni. Ognuna delle sezioni centrali presenta una colonna sulla sinistra il cui allineamento verticale forma una terza colonna (da cui deriva la nostra scelta di definire il layout di Virgilio a 2+1 colonne), anche se interrotta verticalmente.
Immagini decorative
Col termine "immagine decorativa", verranno indicate tutte quelle immagini che non hannno alcun contenuto informativo e che servono solo a formare la grafica del sito (come ad esempio l'icona dell'antenna nel box delle notize ultime notizie) ovvero ad integrare il layout (come il triangolo che forma il fumetto dei sondaggi di LA7 ovvero il triangolo arancione posto su uno sfondo grigio che si trova nella barra infondo alla pagina).
Questo tipo di immagini risultano inutili quando si visualizzi la versione da noi realizzata con un browser (ad esempio NN4) non in grado di leggere il foglio di stile ovvero con un dispositivo (ad esempio un computer palmare) per il quale è opportuno realizzare un CSS specifico (immaginatevi come sia scomodo visitare un sito largo 760px con una schermo piccolo come quello di un PDA). Per questo motivo, tali immagini (alcune sono state escluse a priori come quelle dei pulsanti) verranno introdotte non nel codice XHTML tramite il tag <img> ma solo nel foglio di stile come sfondo di alcune sezioni. Per avere un'idea di come risulti la pagina senza il foglio è disponibile una versione della pagina di esempio priva dell'istruzione per caricare il foglio di stile.
Clonazione
Divisione in sezioni
I CSS permettono la separazione fra i contenuti e il layout con il quale tali contenuti sono presentati. A questo punto la pagina non è più separata in una serie di celle, ma organizzata in sezioni con un ordinamento logico ad albero. Tale struttura è evidenziata anche nell'indentazione del foglio di stile realizzato.
Le sezioni saranno separate, nel file XHTML, da tag <div>, identificate da opportuni 'id'. Nel seguito saranno riportati solo i frammenti di codice che necessitano di particolari commenti, per il codice completo si rimanda alla consultazione del foglio di stile.
Nel codice XHTML saranno presenti alcuni horizontal rule (<hr />) che servono a migliorare l'usabilità del sito per quei browser (es.:NN4) o dispositivi (es.:PDA) che non siano in grado di leggere il foglio di stile ovvero per i quali è stato predisposto un diverso foglio di stile. Questi horizontal rule saranno nascosti dal foglio di stile utilizzato tramite la proprietà display:none.
In seguito all'utilizzo delle proprietà float, alcune sezioni potrebbero essere allineate in maniera indesiderata. Per evitare il problema si utilizzera una particolare classe, .ripristino-float, tramite il seguente codice:
CSS
.ripristino-float { clear: both; height:1px;overflow:hidden;margin:-1px; }
XHTML
<div class="ripristino-float"></div>
Il codice <div class="ripristino-float"></div> andrà posto dopo la sezione caratterizzata dalla proprietà float.
Body
body { padding: 0px; margin: 0px; text-align: center; }
Annulliamo il margine e il padding automatico del BODY, in questo modo possiamo sfruttare tutta l'ampiezza dell finestra. L'allineamento centrato è necessario per risolvere un problema di IE5 con i margini automatici, come sarà più avanti illustrato
Sezione #logo
#logo {
width:760px;
margin:10px auto 0 auto;
position: relative;
text-align:left;
}
#logo img { margin-left: 8px; }
Il logo è costituito dalla seguente immagine. ![[immagine Logo utilizzato]](img/logo.gif){kind=logo}
L'immagine viene posta in un box largo 760px, la larghezza della homepage di Virgilio, allineato centralmente tramite le definizioni auot per i margini sinistro e destro (ricordiamo che i lati del box model dei CSS sono ordinati i senso orario: top right bottom left). Purtroppo IE5 non elabora correttamente la proprietà 'auto'. Per superare il problema si è imposto l'allineamento centrato per il testo del body, dunque si è dovuto ripristinare l'allineamento a sinistra nella sezione #logo. L'immagine viene scostata dalla estremità sinistra della sezione, non dell finestra, tramite la definizione di un margine sinistro di 8px per le immagini contente nella sezione (il solo logo). Le definizioni margine inferiore pari a -20px, z-index pari a 2, position: relative saranno chiarite nella seguente sezione #content.
Sezione #content
#content {
width: 760px;
margin:-20px auto 0 auto;
color: #000; background: #FC6;
border-top: 8px solid #000;
text-align:left;
}
Questa sezione, che contiene tutto il resto della pagina, è utilizzata per definire la larghezza del sito e il suo allineamento. Questa sezione ha un bordo superiore alto 8px di colore nero che riproduce la fascia superiore di colore nero presente nella home di Virgilio. Affinché il logo si sovrapponga alla fascia, si è impostato un margine superiore negativo (-20px). Il risultato è perfetto per IE5/6, non perfetto con NN6 e Opera. L'istruzione position: relative; nel definire la sezione #logo evita che, sovrapponendosi, il logo finisca dietro la sezione #content
Sezione #leftcontent
#leftcontent {
float: left;
width: 610px;
background: #FFF;color: #000;
}
La sezione #leftcontent contiene tutte le sezioni della parte sinistra del corpo della pagina (larga 610px). L'allineamento è realizzato tramite float:left. La larghezza è fissata a 610px (Larghezza_totale - Larghezza_colonna_destra = 760px - 150px = 610px).
Sezione #header
#header {
border-bottom: 1px solid #F30;
color: #000;
background: #F90 url(img/header_bgr.gif) 0 0 no-repeat;
}
#header form {
margin: 0 0 0 65px;
height: 47px;
text-align: center;
}
[omissis]
#header form input.formbut {
border: 1px outset #FC6;
background: #900; color: #FFF;
font: bold 11px verdana,sans-serif;
text-transform: uppercase;
}
[omissis]
La sezione #header contiene il form per la ricerca. Lo sfondo è arancione (#FC6 = #FFCC66) presenta la seguente immagine per integrare il logo. ![[immagine: Sfondo della sezione header]](img/header_bgr.gif)
Il pulsante per la ricerca riprende lo stile dell'immagine usata dal layout di Virgilio impostando lo sfondo rosso scuro (#900) e colorando di bianco il testo. Le parti di codice omesse impostano il resto del form.
Sezioni #navbar e #subnavbar
Le sezioni #navbar e #subnavbar sono realizzate impostando bordi e margini e padding.
Sezione #main
#main {
padding-top: 32px;
border-top: 1px dotted #000;
}
La sezione #main contiene tutte le sezioni della parte principale, quella che contiene le informazioni del portale, della sezione #leftcontent. Il bordo superiore spesso 1px ed è punteggiato, in modo da riprodurre l'effetto presente nelle pagine di Virgilio. Il browser IE5/6 sostituisce il bordo da 1px punteggiato con quello da 1px tratteggiato, ciò non accade con spessori superiori.
Sezione #ultimenotizie
#ultimenotizie {
float: left;
height: 158px; width: 152px;
padding: 7px 3px; margin-right: 23px;
border: 1px solid #F90;
font: 10px verdana,sans-serif;
background:
#FFF url(img/ic_notizie.gif) 3px 3px no-repeat;
}
#ultimenotizie p.testa {
font: bold 10px verdana, sans-serif;
margin: 0 0 5px 20px;
}
[omissis]
La sezione #ultimenotizie è posizionata tramite float:left ed ha larghezza ed altezza fissa. Ribadiamo che un layout "pixel-perfect" non è, a nostro avviso, una buona scelta ma è coerente con l'impostazione scelta dai responsabili di Virgilio. In altro a destra è posta l'icona dell'antenna parabolica, impostando l'immagine come sfondo della sezione nel CSS e non tramite codice XHTML col tag <img>. E' un evidente esempio di come i contenuti posssano essere separati dal layout.
Sezioni #strillo e #community
#strillo {
height:85px;
margin-left:185px;padding-right:12px;
border-bottom:1px dotted #C60;
font:12px verdana,sans-serif;
}
#community {
height:80px;
padding-top:10px 20px 0 0;
margin-left:185px;
font:10px verdana,sans-serif;
}
#community .box {
height:70px;width:150px;
margin-left: 250px;
background:
#FFF
url(img/com_ang.gif)
40px -3px
no-repeat;
text-align: right;
}
#community #fumetto {
height:36px;width:130px;
padding:10px;margin:3px 0 10px 0;
background: #900;color:#FFF;
[omissis]
}
[omissis]
Le sezioni #strillo e #community sono le due sezioni, separate orizzontalmente da una linea tratteggiata, poste al fianco della sezione #ultimenotizie.
L'altezza è impostata in modo da allinearsi col box delle ultime notizie. Il margine sinistro è fissato a 185px in modo da non sovrapporsi al box delle ultime notizie. La linea orizzontale è realizzata tramite il brodo inferiore della sezione #strillo.
Il fumetto della sezione #community è realizzato con un box 150x56px, il fumetto è completato tramite il triangolino ottenuto impostando come sfondo del box contraddistinto dalla classe 'box' l'immagine 'com_ang.gif' opportunamente posizionata. La stessa soluzione sarà utilizzata per il fumetto dei sondaggi che sarà illustrato più avanti.
Sezione #canali
#canali {
float: right;
padding: 10px;
border-left: 19px solid #F90;
background: #DDD; color: #000;
font: 10px verdana,sans-serif;
}
#canali .content { width: 406px; }
#canali .content .colonna {
float: left; width: 195px;
}
#canali .content .colonna big {
display: block;
font: bold 12px verdana,sans-serif;
}
#canali .content .separacolonne {
width: 10px; float: left;
}
La sezione #canali è quella caratterizzata dalla larga fascia arancione sulla sinistra ed è suddivisa in due colonne verticali.
La fascia arancione è realizzata impostando il bordo sinistro, l'allineamento a destra è realizzato tramite la solita istruzione float e l'impostazione della larghezza. Le colonne sono separate da un'apposita classe 'separacolonne' comoda per realizzare una spaziatura uniforme fra le colonne senza preoccuparsi dell'effettivo numero di colonne.
Per aggirare l'errata interpretazione del box model da parte di IE5, si è introdotta la classe .content che ha il compito di definire separatamente la larghezza del box e suoi bordi, margini, padding [Ulteriori dettagli].
Sezione #colonna
Sulla sinistra della sezione #canali appena analizzata, si trova la sezione #colonna. La sua implementazione non evidenzia particolari accorgimenti, basta impostare la larghezza a 160px. La realizzazione del fumetto per il sondaggio è simile a quella del fumetto della sezione #community.
E' invece interessante soffermarsi sull'implementazione degli spazi indicati con la classe 'spot'. Il bordo punteggiato è realizzato impostando il bordo. Le differenti dimensioni fra link e test sono ottenute impostando una dimensione per la classe stessa e una dimensione maggiore per i link (tag <a>) della classe. Questo metodo, usato in molte altre sezioni, permette di risparmiare un gran numero di tag <font>, che anzi non sono stati affatto utilizzati, come raccomandato dal W3C (del resto il tag <font>, come il tag <center>, mescola contenuiti e impaginazione).
Sezione #rightbar
#rightbar {
float: right;
width: 150px;
margin: 0px;
background: #FC6;
}
La barra a destra è realizzata impostando il float a destra e la larghezza della sezione a 150px. Il colore di sfondo è lo stesso della sezione #content, creando l'illusione che la colonna si sviluppi per tutta l'altezza della pagina. In realtà la colonna finisce con l'ultimo box. Se le sezioni #content e #rightbar avessero avuto due differenti colori, ad esempio #FFF e #FC6, la barra laterale sarebbe apparsa interrotta.
Sezione #emailform
#emailform {
padding: 10px 0 10px 10px;
border-bottom: 1px solid #F30;
background: #F90; color: #000;
}
[omissis]
#emailform .enter {
float: right;
margin-top: -62px;
padding-right: 10px;
text-align: right;
}
#emailform .enter input {
border: 1px outset #FC6;
text-transform: uppercase;
background: #900; color: #FFF;
}
Nella colonna di destra ci sono il modulo per accedere alla posta elettronica e dei box per gli sponsor. Questi ultimi sono di scarso interesse e sono stati implementati in modo simile a quanto fatto per le classi .spot. Più interessante è invece la sezione #emailform. Le dimensioni dei campi sono state regolate impostando il carattere, la larghezza dei campi tramite le classi loro assegnate. Il pulsante è stato realizzato impostando il colore dello sfondo e del testo. L'allineamento alla destra dei campi si è ottenuto allineando la classe che contiene il pulsante (enter) e regolandone il margine superiore (-62px). L'allineamento verticale risulta centrato per IE ma non per NN e Opera.
Sezione #footer
#footer { clear: both; [omissis] }
#footer .topleft {
float: left;
padding: 2px 3px 2px 3px;
background: #333 url(img/angolo.gif) 100% 100% no-repeat;
color: #FFF;
}
#footer .topleft .content { width: 604px; }
#footer .topright {
float: right;
padding: 2px 3px 2px 3px;
text-align: center;
background: #F90;
color: #000;
}
#footer .topright .content { width: 144px; }
#footer .bottom { padding: 0px 10px; text-align: center; }
La sezione #footer presenta la proprietà 'clear: both' la quale ha lo scopo di evitare l'errato allineamento con le sezioni #leftcontent e #rightbar caratterizzate dalle proprietà 'float:left' e 'float:right'. La sezione #footer è divisa in due classi affiancate combinando float e larghezza. Il triangolo utilizzato per "fondere" le due sezioni è stato impostato come sfondo della sezione di sinistra.
Considerazioni
La somiglianza fra la versione realizzata con i CSS e la versione originale, realizzata con un gran numero di tabelle annidate, è evidente. Ciò che era stato realizzato con le tabelle, si è riprodotto con i CSS.
Il codice XHTML della versione realizzata con i CSS sorprende per la sua semplicità e pulizia, essendo stato depurato da tutto il codice il cui unico scopo era impostare il layout. Il confronto fra il codice HTML di Virgilio e quello XHTML della versione da noi realizzata è impietoso.
La semplicità del codice permette inoltre una maggiore velocità di caricamento delle pagine, essendo composte da molto meno codice e dunque con un peso, in termini di kB, notevolmente inferiore. Anche la riproduzione della pagina da parte del browser è più veloce, poiché il codice da interpretare è più semplice.
Si consideri infine il differente uso delle immagini. La versione originale di Virgilio introduce numerose immagini col solo scopo di integrare il layout. Navigando con screen reader per non vedenti o con browser puramente testuali come Lynx, s'incontrano un gran numero di immagini che creano solo confusione. La versione realizzata con i CSS, invece, non avendo nel codice XHTML immagini prive di contenuto non presenta affatto il problema.
Per ultimo, non certo per importanza, si consideri l'evidente vantaggio di poter realizzare, impostando un CSS per ogni tipo di dispositivo/browser (PC, Stampante, PDA, Browser vocali), un diverso layout per ogni dispositivo (Per maggiori dettagli vedi CSS vs Table).
File correlati
Articoli correlati:
- CSS e tabelle a confronto
- Ripristino in seguito all'utilizzo della proprietà float
- Il box model di IE5/Win
Strumenti
.ConStile è disponibile anche in XML.
Some Rights Reserved. This work is licensed under a Creative Commons License.
