In questo breve corso sui CSS abbiamo fatto velocemente un sacco di strada, ma mi è piaciuto intendere questi articoli come un riferimento che possa esservi utile nel tempo: qualcosa che spazi dalle basi fino a delle best practices permettendovi di capire da dove partire e decidere personalmente come e cosa seguire e approfondire, tramite anche i vari link di riferimento presenti.

Abbiamo iniziato evidenziando l'importanza dei CSS storicamente e concettualmente proseguendo con il metodo tabellare e i motivi per cui dovrebbe essere evitato; passando agli aspetti pratici abbiamo dapprima capito dove si usano e come si usano, fermandoci brevemente sui commenti condizionali dei browser Microsoft per risolvere, seppur in modo sporco, le incompatibilità sui browser.

Nella seconda parte, per chi era interessato a proseguire, abbiamo posto utili riferimenti con esempi e con consigli, fino a concludere, oggi, con degli strumenti molto utili. Il primo di tutti è Firebug, di cui si è già parlato su questo portale. Quello, però, che vorrei sottolineare per chi già lo conosce è che, anche se maggiormente utilizzato come debugger JavaScript soprattutto per applicazioni AJAX, è molto utile anche per lo sviluppo e la modifica di fogli di stile a cascata.

Come già detto, un documento XHTML può essere rappresentato con un albero di elementi; Firebug permette di identificare un singolo elemento immediatamente con la funzione inspect, o cliccando sul suo tag nella visualizzazione del sorgente della pagina. A quel punto è possibile non solo vedere selezionato l'elemento all'interno del nostro browser, ma anche vedere la cascata di tutte le entità CSS, che hanno definito l'elemento con relative proprietà e valori. Ma la cosa ancora più utile è che è possibile, direttamente da Firebug, eliminare nel CSS alcune proprietà, crearne di nuove, modificarne i valori o ancora definire graficamente margini, bordi e spaziature dell'oggetto per vedere in tempo reale come apparirebbe la pagina con quelle modifiche. L'operazione di modifica è possibile anche per il codice XHTML e così, al termine di tutto, possiamo apportare le modifiche anche ai nostri file sorgenti, senza aver dovuto salvare il file e aggiornare la pagina ogni volta per testare le modifiche.

Un’ulteriore utilità, nel caso siate alle prime armi con i layout a colonne e non sapete come districarvi trai vari esempi che vi ho fornito, è Layout-o-matic su inknoise, che permette di definire alcune semplici proprietà su come vorremmo il nostro layout e avere a disposizione il nostro layout da scaricare, con tanto di hack per Internet Explorer.

L'ultima risorsa che vi fornisco è un altro tool Web-based che genera codice CSS: si tratta di REALTIME CSS styles generator. Partendo da zero, o da tre esempi messi a disposizione, è possibile creare con esso uno stile per i propri documenti tramite l'inserimento in un apposito modulo delle varie opzioni messe a disposizione dai CSS riguardanti i font, il testo, lo sfondo ed altro ancora. Il risultato sarà costantemente aggiornato e visualizzato nella pagina stessa, insieme al CSS risultante, pronto per essere copiato e incollato.

Prima di salutarvi vi ricordo che per testare i propri risultati, oltre ad avere installati differenti browser sul proprio PC, è consigliabile, anche in riferimento a quanto detto in precedenza, avere più versioni di Internet Explorer installate, argomento trattato di recente su questo portale. Le basi ci sono, le risorse on line anche, ora sta a voi decidere se continuare o meno.

• Pubblicazioni correlate:
• 21-05-2007 Breve corso sui CSS: introduzione
• 22-05-2007 Breve corso sui CSS: l'abbandono del layout tabellare
• 23-05-2007 Breve corso sui CSS: muovere i primi passi
• 24-05-2007 Breve corso sui CSS: incompatibilità e commenti condizionali
• 28-05-2007 Breve corso sui CSS: alcuni fondamenti (1/2)
• 31-05-2007 Breve corso sui CSS: alcuni fondamenti (2/2)
• 06-06-2007 Breve corso sui CSS: dalla sintassi agli esempi
• 08-06-2007 Breve corso sui CSS: 70 idee di esperti per la stesura di codice migliore