Un recente articolo di A list apart mette ben in chiaro cosa ci si può aspettare quando si inizia ad utilizzare i CSS nello sviluppo di siti web. Non solo per cambiamenti minori, ma soprattutto per separare gli elementi presentazionali (layout, immagini di sfondo, decorazioni, tipografia..) dal codice vero e proprio.
Imparare ad utilizzare i fogli di stile richiede tempo e pazienza, ed è bene non arrivare impreparati all’appuntamento. Per questo ho trovato l’articolo molto interessante.
Per tutti coloro che hanno qualche problema con l’inglese tecnico o vogliono leggere un riassunto, ecco una traduzione (libera) che può chiarire le idee meglio di tante inutili discussioni sull’argomento CSS.
Lezione n°1: Tutto quello che sai è inutile.. o quasi
Iniziare a lavorare con i CSS comporta un rapido colpo di spugna. Duro da ammettere, ma è così. Bisogna prepararsi a fare tabula rasa e cominciare da zero per apprendere al meglio tutte le tecniche. Ovviamente restano valide tutte le conoscenze su design, programmazione, usabilità, ecc..
Lezione n°2: Niente apparirà allo stesso modo ovunque
Ovviamente il riferimento è alla renderizzazione dei vari browser. Tutt’ora è difficile raggiungere lo stesso identico risultato su Firefox, Internet Explorer, Opera, Safari.. differenze non sostanziali, ma spesso presenti.
Lezione n°3: Spesso sarà necessario scegliere il minore tra due mali
Nello sviluppo di un sito, si presenterà prima o poi la necessità di scendere a compromessi. Ci saranno siti in cui si dovrà rinunciare ad alcune funzionalità programmate in partenza, limitazioni relative all’accessibilità, e così via.
Lezione n°4: La perfezione si raggiunge non quando non c’è piu niente da aggiungere, ma quando non c’è più nulla da togliere
E’ facile convertire un sito da un layout a tabelle riempiendolo di div e tags inutili. Appesantire il codice non serve, ed è sempre meglio togliere tutti gli elementi non indispensabili in modo da avere una pagina il più semplice possibile.
Lezione n°5: Alcuni siti avranno bisogno di attenzione alla coerenza delle pagine
Se il graphic designer non si occupa di altri aspetti dello sviluppo di un sito, dovrete stare attenti che mantenga una certa coerenza in tutte le pagine. Avere troppi elementi unici per ogni pagina potrebbe portare ad una crescita delle spese, dannosa soprattutto in piccoli progetti.
Lezione n°6: Inevitabili tempi di sviluppo più lunghi
Attualmente i CSS non sono supportati alla stessa maniera da tutti i browser, e finchè non imparerete a memoria tutte le differenze, ci vorrà più tempo a testare il lavoro e verificare che sia coerente su ogni user agent. Avrete però grandi vantaggi nelle fasi successive di manutenzione ed aggiornamento.
Lezione n°7: Contenuti coerenti ed ordinati portano grandi benefici
Se siete stati attenti alla semantica del codice ed alla coerenza dei contenuti, avrete innumerevoli vantaggi: dal poter mantenere la struttura html inalterata nei futuri redesign del sito, alla navigazione da tastiera finalmente possibile.
Lezione n°8: I selettori discendenti sono un must
Il classico errore di chi è alle prime armi con i CSS è riempire il codice di div, e dare ad ogni elemento un contenitore o un id. E’ inutile, e spesso per risolvere ogni problema basta imparare a gestire i selettori discendenti. Se servono spiegazioni.. chiedetemi pure maggiori dettagli nei commenti!
Lezione n°9: Usare CSS hack a volte sarà indispensabile
Se per un progetto avrete tempi ristretti, e dovrete risolvere qualche errore di visualizzazione, la via obbligatoria sarà quella di utilizzare degli hack nei vostri fogli di stile. Non elegante, ma spesso necessario per rientrare in tempi e costi.
Lezione n°10: Risolvere dei bug potrebbe comportare altri problemi
Risolvendo un bug, è probabile che si presenti qualche nuovo problema, magari su un browser differente. Non è però una questione senza soluzione, basta saper trovare il modo giusto: per quanto riguarda soprattutto Internet Explorer, positioniseverything.net è essenziale.
Lezione n°11: Ci saranno sorprese nei layout a colonne
Con layout a 2-3 colonne, si presenteranno spesso problemi di visualizzazione. Per risolverli, in genere sarà necessario specificare sempre height e width di molti elementi, insieme alle proprietà float e clear. Questo va contro alla 4° lezione, ma non si era anche detto della necessità di trovare dei compromessi?
Lezione n°12: Le immagini di background faranno la differenza
Utilizzare immagini di sfondo tramite CSS spesso si rivelerà un’ottima soluzione per migliorare l’impatto grafico del sito. Senza considerare poi i vantaggi verso motori di ricerca e screen reader, che troveranno invece i contenuti testuali nel codice.
In conclusione
Siamo alla fine della guida: questi punti potranno essere considerati soggettivi, ma hanno tutti la loro importanza. Io stesso ne condivido più alcuni rispetto ad altri, ma tenerli sempre presenti quando ci si avvicina per la prima volta al mondo dei CSS non farà male.
Voi cosa ne pensate? Condividete tutto quello che ho scritto?
Molti appassionati di web design conosceranno Stylegala, uno dei più famosi siti showcase. I siti recensiti per me sono sempre stati un esempio da seguire, e l’essere presente nella galleria è sempre stato sinonimo di grande qualità.
Ho appena inserito un nuovo spazio per i sondaggi all’interno di questo blog, che potete trovare nella colonna sinistra.
Ho appena aggiornato il modulo presente nella pagina 
Come molti utenti di Flickr avranno già notato, in questi giorni è stata introdotta la 
Tanto per allinearmi con le mode del web 2.0 ed in particolare di questo 2006, ho deciso di cambiare la grafica del titolo e di qualche altro elemento minore (come le intestazioni delle pagine).
