La realizzazione di layout con i CSS è sempre un tema caldo tra i web-designer. Nel giro di qualche mese, si è passati dalle sperimentazioni personali a realizzazioni in ambito commerciale e su siti mainstream come ESPN.com o Wired. Esempi come questi hanno segnato per certi versi una svolta importante. La frase "Se lo ha fatto Wired, puoi farlo anche tu!" è assurta alla dimensione di slogan, una sorta di claim in un'ideale campagna di promozione degli standard.
Su altri versanti vanno segnalati almeno tre fatti, senza toccare qui la messe di hack, trucchi e nuovi esperimenti in atto. Il primo è la stupefacente galleria di lavori raccolta intorno al progetto CSS Zen Garden, perfetta dimostrazione di dove si possa arrivare, oggi, con l'impaginazione in CSS senza trascurare l'estetica. Il secondo è il miglioramento nella gestione di questo tipo di design in un prodotto come Dreamweaver.
Per finire, un aspetto cruciale. Gli sviluppatori e le notizie dall'universo browser, fanno pensare ad un panorama 'assestato'.
L'attenzione dovrebbe ora spostarsi sulla pratica. Il prezzo da pagare, per questa che pare una semplificazione, è però alto. Per dirne una: la specifica CSS3, con tutti i benefici che porterà, sarà implementata inizialmente solo da browser di nicchia, eccezionali, ma di nicchia (almeno lasciando parlare i numeri e le quote di mercato).
Di fronte a tutto ciò, lo spunto di partenza di questo articolo potrebbe sembrare minore. Cominciano ad apparire in Rete una serie di generatori automatici di layout con CSS. Si tratta, in genere, di semplici interfacce basate su Javascript che consentono l'immissione di parametri relativi all'impaginazione (numero di colonne, margini e padding, presenza di testata e/o footer, colori) e restituiscono un layout di base con codice CSS e XHTML da completare in seguito con gli altri elementi.
Sono utili? Funzionano? A chi possono servire questi tool? L'articolo vuole fornire una risposta a queste domande. Partiremo dall'analisi del più semplice di questi strumenti, quello ribattezzato dal suo autore Layout-o-matic. Tenteremo di evidenziarne limiti e potenzialità, suggerendo la via per la soluzione dei problemi più comuni.
A chi serve?
Rispondere a questa domanda è una premessa doverosa. Una cosa è infatti chiara: chi è abituato all'impaginazione in CSS e ne conosce i segreti, troverà senz'altro superflui questi strumenti. L'utente ideale è, nella nostra opinione, quello che si sta avvicinando all'idea e vuole superare un impatto iniziale potenzialmente scoraggiante.
Prendiamo il caso di chi è avvezzo da anni a sviluppare il layout con tool alla Dreamweaver e con l'ausilio delle tabelle. Lavorare in un ambiente visuale, di tipo WYSIWYG, offre un ancoraggio visivo indubbiamente utile in fase di sviluppo. Si ha sempre il controllo di quello che si sta facendo. Lavorare con i CSS, invece, fa perdere questo appiglio. Chi ha provato a editare in Dreamweaver un layout fatto solo con i fogli di stile, sa di cosa parliamo. L'unica 'controprova' di quello che si fa, la possiamo avere dal test nei browser.
Partendo da un template di base contenente le principali regole di posizionamento, si potrà invece compiere il passo con maggiore tranquillità. Ma il nostro obiettivo è anche quello di superare uno dei principali rischi dei tanti template precotti reperibili in Rete: l'assuefazione al 'già pronto' che non fa acquisire consapevolezza.
Layout-o-matic, come funziona
Layout-o-matic è frutto del lavoro di Dan Burns. Il tool è estremamente semplice da utilizzare. Consente la creazione di quattro tipi di layout, tutti sviluppati secondo il classico schema Testata - Contenuto - Footer. Su questa base, si può scegliere se sviluppare la parte dei contenuti su una, due o tre colonne. Nel caso di layout a due colonne, è possibile scegliere se posizionare la colonna laterale per i menu a destra o a sinistra.
Dando uno sguardo all'interfaccia, si nota la presenza di un form da cui si impostano i parametri. Il più ricco di scelte è, ovviamente, quello per il layout a tre colonne. Si possono definire, nell'ordine:
- la dimensione del box principale
- i margini tra i diversi elementi
- il padding per ciascun elemento
- la larghezza delle colonne laterali
Con il checkbox finale, possiamo stabilire se usare per la larghezza dei vari elementi il cosiddetto Box Model Hack. Come molti sanno, è un serio problema da tenere presente se il target del vostro sito comprende anche utenti con Explorer 5.x Windows. Il consiglio è pertanto di usarlo sempre.
Un piccolo box di anteprima consente di visualizzare nella stessa pagina lo schema prescelto, mentre per una preview più realistica è sufficiente cliccare sul pulsante "view". La generazione del template avviene invece cliccando su "Download". Scaricherete così sul vostro hard disk un file denominato "layout.html" da modificare con il vostro editor preferito.
Analisi del template
Per la 'recensionÈ del servizio abbiamo scelto di scaricare un layout a tre
colonne con corpo principale centrato largo 760px e colonne laterali di 150px.
Passiamo subito ad analizzare il codice.
La struttura
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Layout-o-matic - Layout di base senza contenuto</title></head> <body> <div id="container"> <div id="banner"> </div> <div id="sidebar_a"> </div> <div id="sidebar_b"> </div> <div id="content"> </div> <div id="footer"> </div> </div> </body> </html>
Il documento prodotto è XHTML Transitional. Nel corpo troviamo una serie di <div> vuoti, ciascuno marcato con un id. Il principale è #container, quello che racchiude tutti gli altri e che funge da 'gabbia' principale per il layout. Nidificati al suo interno gli altri, nell'ordine che vedete nel codice:
| <div> | Descrizione |
|---|---|
| #banner | è il box dell'intestazione (header) |
| #sidebar_a | colonna laterale sinistra |
| #sidebar_b | colonna laterale destra |
| #content | colonna centrale |
| #footer | box inferiore |
Il CSS
La lezione numero 1 del web-design con i fogli di stile dovremmo ormai saperla tutti: separare struttura e contenuti dalla presentazione. Il codice XHTML visto qui sopra non contiene nessuna informazione su come i vari <div> saranno visualizzati.
Aprendo un documento così strutturato, senza fogli di stile, avremmo dunque questo risultato. Grazie ai CSS siamo in grado di stabilire per ciascun elemento le modalità di visualizzazione.
Il CSS prodotto da Layout-o-matic è incorporato nel documento con l'elemento <style>. Non contiene regole su elementi specifici, nè impostazioni per il testo. Si limita a impostare le regole di posizionamento e resa visiva dei sei <div> visti nella struttura.
Nelle parole dell'autore, poi, è garantita la compatibilità con tutti i browser, tranne le versioni 4 e inferiori. L'analisi del codice ci consentirà di valutare alcuni problemi e proporre le opportune soluzioni.
Il div #container
Come accennato, #container è in un certo senso il box principale. È quello che fornisce l'impalcatura di tutta la nostra costruzione. La prima regola è quella che imposta la larghezza del box. Con Layout-o-matic è possibile scegliere solo due unità di misura, pixel e percentuale. Se vogliamo un layout a larghezza fissa ci orienteremo verso la prima soluzione; volendo un'impaginazione liquida opteremo per la seconda.
#container {
width: 760px;
width: 780px;
width: 760px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
Il Simplified Box Model Hack
Qualcuno si starà chiedendo per quale motivo non sia sufficiente dichiarare width: 760px. Torniamo un attimo indietro.
Ricordate il checkbox sul Box Model Hack? Abbiamo chiesto a Layout-o-matic di produrre codice in grado di risolvere il più notevole bug sui CSS di Explorer 5.x. Riguarda l'errata gestione delle dimensioni orizzontali da parte del browser di Microsoft, che non aggiunge al valore di width quello di bordi e padding laterali. Lasciando width a 760px e considerato che abbiamo 20px di padding, il nostro non ci darebbe un box di 780px come da specifica, ma di 760px. Ne abbiamo già discusso in un altro articolo e nella guida ai CSS, e a quei documenti vi rimandiamo per i dettagli.
In quell'occasione presentammo come soluzione il Box Model Hack di Tantek Celik, divenuto una specie di classico nel genere. Layout-o-matic adotta invece il cosiddetto Simplified Box Model Hack frutto delle sperimentazioni di Andrew Clover.
CSS e i caratteri di escape
Il trucco sfrutta ancora una volta un bug di Explorer 5. Nella scrittura di un CSS è possibile ricorrere all'escape dei caratteri per evitare di dare un significato particolare ad uno di essi. L'escape si effettua premettendo al carattere un backslash (). Come pratica non è in effetti quasi mai necessario usarla, ma la specifica ha previsto esplicitamente il caso, fornendo le regole di gestione. L'esempio che porta lo stesso Clover, ci fa capire meglio di cosa stiamo parlando.
Immaginiamo di voler creare un id con questo nome: #container.uno. Uno User Agent andrebbe in confusione, poiché nei CSS il punto identifica una classe. In questo documento il colore del testo dovrebbe essere rosso, perché nella regola abbiamo scritto:
<style type="text/css">
#container.uno { color: red; }
</style>
Come si vede, però, la regola viene ignorata. Ricorrendo all'escape, tutto si risolve:
<style type="text/css">
#container.uno { color: red; }
</style>
Il backslash serve a dire al browser che il punto che segue non ha nessun significato particolare, che non indica una classe, che è puro testo. Ecco che nel secondo documento di esempio, il colore apparirà come desideriamo. In tutti i browser? No. Apritelo con Explorer 5.x: sempre nero. Lui l'escape non lo capisce. Allo stesso tempo, però, non fa problemi se il backslash è posto all'inizio. E su questo Clover ha creato il suo hack.
L'hack di Andrew Clover
Torniamo dunque al nostro codice. L'hack si attua impostando tre diverse 'versioni' per la proprietà width:
width: 760px; width: 780px; width: 760px;
La prima è per i browser che non applicano l'escape ma implementano correttamente il Box Model (tipo Opera 5). La seconda è per Explorer 5.x: come si vede contiene un valore di 780px, in quanto alla larghezza definita con width dobbiamo sommare i 20px di padding dei lati sinistro e destro. La terza è per i browser standard compliant i quali sovrascriveranno il valore di 780px con la regola più vicina.
E così abbiamo sistemato i browser più adoperati. Se il vostro target contiene anche Netscape Navigator 4, dimenticate quello che abbiamo detto finora. Explorer 5 ha problemi nell'interpretare una regola con l'escape, mentre il buon Navigator appena vede un tentativo di escape, salta a pié pari tutto il foglio di stile! Occhio, dunque.
Centrare il box
Procediamo con l'analisi del codice per #container. L'altra situazione da valutare è data da queste regole:
margin-left: auto; margin-right: auto;
Usare il valore auto per i margini sinistro e destro di un qualunque elemento, è un modo semplice e indolore per centrarlo. In pratica, il box #container dovrebbe comparire al centro della pagina e, data la larghezza impostata, dovrebbe apparire con dello spazio bianco sui due lati, sinistro e destro, a risoluzioni superiori a 800x600.
Tutti i browser recenti rispettano la regola del margin-left/right: auto, tranne, Explorer 5.x. Potete verificare anche usando Explorer 6. Inserendo infatti il prologo XML in testa al documento, mandiamo il browser in 'quirk mode': emulerà così il suo predecessore, anche nei bug. Il documento di esempio mostra il risultato.
Per ovviare a questa situazione dobbiamo aggiungere al nostro CSS una regola generale per l'elemento body:
body {
text-align: center;
}
E riallineare il testo a sinistra per gli elementi successivi:
#banner, #container, #footer {
text-align: left;
}
Ecco una pagina modificata con queste regole.
La sezione centrale
Mentre il div #banner non presenta elementi degni di nota, è sulla sezione centrale e sul footer che dobbiamo fornire qualche spiegazione. L'obiettivo, qui, è di avere un corpo centrale con tre colonne con un footer che sia sempre posizionato in basso, al di sotto delle tre colonne, evitando sovrapposizioni.
Per ottenere questo risultato l'autore del tool ha usato come metodo di posizionamento delle colonne quello del float. L'alternativa sarebbe stata adottare il posizionamento assoluto. Entrambi i sistemi hanno una loro validità, con svantaggi e vantaggi da valutare caso per caso.
Usando il posizionamento assoluto delle colonne laterali (nel nostro caso #sidebar_a e #sidebar_b) con un footer, è necessario che l'altezza della colonna centrale sia sempre superiore a quella delle colonne laterali stesse. Se si rispetta questa condizione, il footer apparirà sempre dove lo vogliamo, come in questo esempio.
Se però una delle colonne laterali supera l'altezza di quella di mezzo, il risultato è la sovrapposizione, come in questa pagina. Così non avviene adottando il metodo del float: che la colonna centrale sia la più lunga (esempio) o che lo sia una delle laterali (esempio), il footer sarà sempre in basso. Vediamo in che modo
si ottiene il tutto.
Per prima cosa si stabiliscono le regole per la colonna sinistra:
#sidebar_a {
float: left;
width: 150px;
width: 160px;
width: 150px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}
Con float: left; spostiamo il box sul lato sinistro del suo elemento contenitore (#container) e lasciamo che gli elementi adiacenti scorrano alla sua destra. Per il resto le regole sono facili da interpretare, compresa, ora, quella della larghezza.
Si passa quindi a posizionare la colonna destra:
#sidebar_b {
float: right;
width: 150px;
width: 160px;
width: 150px;
margin: 0;
margin-left: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}
Identica alla precedente, salvo il float: right; con cui spostiamo la colonna sul lato destro di #container.
A questo punto abbiamo due colonne di 150px alle estremità e uno spazio centrale che sarà occupato dal div #content. Il suo posizionamento viene effettuato semplicemente impostando i margini sinistro e destro su un valore uguale o superiore alla larghezza delle due colonne laterali. Il consiglio è comunque di darsi sempre uno spazio di sicurezza, impostando il margine su valori superiori, come fa Layout-o-matic:
#content {
padding: 5px;
margin-left: 165px;
margin-right: 165px;
background-color: gray;
}
Rimane da analizzare il codice di #footer. È importante, perché contiene un altro tassello decisivo per realizzare la tecnica float+footer:
#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background-color: rgb(213, 219, 225);
}
La regola cruciale è qui clear: both;. La proprietà clear è usata congiuntamente al float, e serve a impedire che elementi sottoposti al float compaiano ai lati di un altro elemento. Impostando come valore both, impediamo alle due colonne di andare a posizionarsi sia a destra che a sinistra del footer.
Tutto bene, dunque, con il metodo del float? Non tutto. Con questo sistema siamo obbligati a rispettare un ordine preciso nella definizione della struttura:
- colonna sinistra
- colonna destra
- colonna centrale
Ecco cosa succede spostando nel codice la colonna destra dopo quella centrale (esempio).
Con il posizionamento assoluto, invece, abbiamo la possibilità di scegliere la posizione nel codice dei nostri box e quindi l'ordine con cui sono resi a schermo. Mettere all'inizio la colonna dei contenuti non è un problema (esempio). Un browser che non supporta i CSS la mostrerà per prima, Mozilla, Explorer o Safari la piazzeranno regolarmente al centro.
Conclusione
Un tool semplice come Layout-o-matic non può ovviamente fornire una soluzione completa e chiavi in mano per generare impaginazioni complesse con i CSS. Al momento di riempire con i nostri contenuti la gabbia iniziale nuovi problemi possono presentarsi. La sua validità, ripetiamolo, consiste nel semplificare l'approccio iniziale a chi comincia questa nuova via. Il codice è lineare ed efficace, con soluzioni interessanti come il Simplified Box Model Hack. Il supporto per i browser più diffusi è garantito e pensiamo di aver evidenziato le vie per la soluzione dei problemi più evidenti. A questo punto non possiamo che invitare alla sperimentazione. L'impaginazione con i CSS non è una panacea per i difetti del web, ma vale sicuramente la pena provarla per comprenderne tutti i vantaggi.
