La gioia della separazione

Infine, l'utilizzo dei CSS per la presentazione consente di abbandonare, o almeno ridurre seriamente, l'uso dell'HTML

strutture per l'impaginazione. Nei giorni precedenti ai CSS – e per molto, molto tempo dopo che divenne ben supportato in tutti i browser moderni – le tabelle venivano usati per impaginare le pagine, ma tutti i layout, tranne quelli più semplici, danno come risultato più righe e celle e dozzine di tag. Passando ai CSS, la quantità di larghezza di banda richiesta per descrivere come dovrebbe apparire una pagina viene drasticamente ridotta. Le tabelle hanno comunque ancora una posizione adeguata, per presentare numeri o altri dati naturalmente tabulari, e occasionalmente rappresentano la scelta pragmatica per determinate esigenze di layout specifiche.

Separare la presentazione dal contenuto paga dividendi significativi anche quando si arriva a riprogettare un sito. Supponendo che il contenuto rimanga più o meno lo stesso, puoi rinnovare un intero sito semplicemente cambiando il suo foglio di stile senza che sia necessaria alcuna modifica HTML. Naturalmente, non è mai così semplice, ma l’uso dei CSS produce enormi risparmi di tempo a lungo termine. Riprogettare un sito basato su tabelle implica eliminare completamente il vecchio sito mentre con i CSS il vecchio sito costituisce la base di quello nuovo.

L'altro vantaggio di avere solo tag strutturali nel tuo HTML è che fa sì che le tue pagine funzionino bene su un'intera gamma di dispositivi, indipendentemente dal fatto che supportino o meno i CSS. Se hai scelto come target dispositivi specifici che supportano CSS ma hanno requisiti speciali, come Windows Mobile smartphone, quindi scrivendo un file CSS personalizzato puoi modificare il layout dell'intero sito per avere un bell'aspetto su di essi dispositivi. Le persone con disabilità visive possono anche accedere a un sito in stile CSS con meno frustrazione rispetto a uno basato su tabelle. Un ulteriore vantaggio è che lo spider di Google ama i siti che limitano l’HTML solo a scopi strutturali, e questo è un grande vantaggio.

Considerato tutto quanto sopra, ti aspetteresti che i siti vecchio stile basati su tabelle siano piuttosto difficili da trovare al giorno d'oggi, a meno che tu non stia acquistando un libro su www.amazon.co.uk questo è. Potresti aver notato che Amazon ha lanciato un design aggiornato quest'anno e, data l'entità del suo budget di sviluppo e del numero di sviluppatori disponibili sembrerebbe una certezza assoluta che ci avrebbe presentato un modello basato su CSS progetto. Purtroppo, la nuova home page di Amazon è un esempio di tutto ciò che è negativo nel layout basato su tabelle. Questa visione dell'arretratezza contiene non meno di 150 celle di tabella per una singola pagina, ne è inondata stili in linea e JavaScript contorto, e pesa un incredibile 220KB senza nessuno grafica.

È anche un bene che Amazon possieda un’enorme rete di server, perché immagina la larghezza di banda che le visite alla sua home page devono consumare. Ovviamente se disponi di una connessione a banda larga veloce potresti non essere troppo scoraggiato dal tempo necessario per il download, e probabilmente non si preoccupa troppo di rendere le cose più facili per il rivale Google. Tuttavia, potresti pensare diversamente se utilizzi uno screen reader o qualche altro dispositivo di assistenza. Un modo per avere un'idea di come un dispositivo di assistenza potrebbe gestire un sito Web è disattivare tutti gli stili CSS e il modo più semplice per farlo è utilizzare la barra degli strumenti dello sviluppatore Web per Firefox (https://addons.mozilla.org/en-US/firefox/addon/60) e premendo . Vale la pena farlo solo per vedere come apparirebbe Amazon attraverso uno di questi dispositivi, ma tutti gli sviluppatori web dovrebbero prendere l'abitudine di controllare il proprio sito in questo modo prima di lanciarlo.