In questo articolo ripercorreremo la storia dei CSS attraverso
gli articoli e le risorse che maggiormente hanno contribuito alla
loro diffusione. Si tratta ovviamente di una selezione
personale, in quanto le letture che presenterò sono quelle che hanno avuto
una certa importanza per la mia formazione, anche se la loro
valenza è comunque universalmente riconosciuta. Cominciamo subito.
Il layout
La vera linea di demarcazione tra il web vecchio stile
con tabelle per l'impaginazione e spacer gif da una parte
e quello moderno rappresentato dai div e CSS per l'impaginazione
corrisponde proprio all'uso dei fogli di stile per il layout.
Tra il 2001 e il 2002, sono moltissime le risorse nate proprio
per informare il lettore su questo approccio di impaginazione: tra
tutte le più influenti sono state BlueRobot,
Glish e Box Lessons.
È curioso pensare come all'inizio i posizionamenti assoluti andassero per la maggiore
nella realizzazione dei layout, mentre ora i float sono la maniera più diffusa.
Per le risorse in italiano, vale la pena citare i molti layout presenti su Constile di Gianluca Troiani,
e tra quelle di casa l'articolo Un sito ridimensionabile con i CSS e
la Guida al layout con i CSS, pubblicata a inizio 2004.
Uno scossone decisamente forte al modo di sviluppare siti l'hanno dato nel 2003
due pubblicazioni. La prima è la presentazione Why Tables for layout is stupid ,
un vero e proprio invito, tra l'altro molto accattivante, ad usare div e fogli
di stile per il layout.
La seconda è forse la prima risorsa ad offrire layout personalibili e pronti all'uso:
Layout-o-Matic. Uno dei meriti più grandi di questo servizio è che è stato in
grado di avvicinare molto sviluppatori e appassionati ai Layout con i CSS.
Da segnalare in merito un'articolo introduttivo pubblicato proprio
qui su HTML.it, ovvero Layout in CSS con Layout-o-matic .
Passando ad approcci più moderni, un passo avanti notevole
per il modo di fare layout è stato compiuto con Creating Liquid Layouts with Negative Margins
e più tardi con One True Layout. Tecniche quali i margini negativi e Any ordered Columns
sono state presentate nella serie Layout Gala su HTML.it di cui è
disponibile una pagina indice con i 40 layout presentati nell'articolo.
Liste e menu
La navigazione è un aspetto fondamentale di un sito, e un grosso passo avanti è stato
compiuto dai CSS proprio per la natura semantica del codice HTML a monte. Trattandosi
di un elenco (o lista che dir si voglia) di link, la marcatura ideale per la navigazione
è proprio attraverso una lista non ordinata. L'articolo Taming Lists
su A List Apart dà in questo senso il via a questo approccio di codifica, dando un appetitoso assaggio delle
potenzialità dei fogli di stile.
Seguono poi diversi tutorial che offrono spunti notevoli:
a memoria, quelli che hanno avuto maggior popolarità sono Uberlink CSS Menu,
le Minitabs e Navigation Matrix; ma senza dubbio posso affermare che la risorsa più autorevole e completa
in fatto di navigazione sia Listamatic seguito da
ListaMatic 2. Qui sulle pagine di HTML.it segnalo
invece la serie Menu grafici con rollover e preload via CSS
e un Menu a tabs con i CSS.
Una menzione particolare va a Pure CSS menu di Eric Meyer. Già nel 2002 uno degli autori più
influenti e preparati - se non il più preparato in assoluto - in materia di CSS a livello mondiale,
ha elaborato questa tecnica per avere menu dropdown con solo l'impiego dei CSS. A distanza di diversi
anni non siamo purtroppo in grado di implementarla senza l'ausilio di Javascript
dato che Internet Explorer fino alla versione 6, che detiene tuttora la maggioranza di uso
per i browser, non supporta la pseudo-classe :hover su qualcosa di diverso dai link.
Il rollover con i CSS
Nel 2003 Peter Stanicek, detto anche Pixy, ha presentato la tecnica Fast CSS rollover per
ottenere un effetto rollover senza la necessita di preload e senza l'impiego di Javascript.
La tecnica è tanto semplice quanto geniale: si tratta di combinare i due (o più) stati di
un link in un'unica immagine, mostrando attraverso la proprietà background-position
la porzione di immagine relativo allo stato attuale.
L'effetto di questo articolo è stato di un'enorme portata, credo che abbia avuto lo stesso
impatto sul rollover in Javascript come i CSS per il layout l'hanno avuto per le tabelle.
Combinato poi all'image replacement che sarà il prossimo argomento, ha davvero
aperto la strada a possibilità che prima erano impensabili.
L'image replacement e la sIFR
Uno dei siti più autorevoli in materia di CSS è da sempre CSS Zen Garden. Poco dopo la sua
nascità è nata anche la Fahrner Image Replacement (FIR),
la ben nota tecnica che permette di sostituire immagini con la grafica, ideata proprio per fornire un maggior livello di personalizzazione
grafica alle pagine. In sostanza si tratta di rimpiazzare titoli testuali con
immagini attraverso l'uso dei CSS, svincolando quindi la rappresentazione grafica dell'informazione
dal markup della pagina.
Successivamente, sono comparse diverse tecniche alternative e la FIR
è stata riconsiderata per questioni di accessibilità grazie a un articolo molto critico, ovvero
Facts and opinion about FIR. Una panoramica delle tecniche di Image Replacement è presentata
in questo articolo di Dave Shea e nell'articolo
le Tecniche di Image Replacement,
pubblicato qui su HTML.it già nel gennaio 2004.
Da allora sono poche le tecniche nuove uscite: vale la pena di citare la MIR
e quella presentata nell'articolo Printing CSS background images che consente tra l'altro di ovviare a un problema
comune a quasi tutte le tecniche di image replacement, ovvero la stampa.
Nel 2004 un'alternativa notevole all'image replacement viene presentata con la
IFR (Inman Flash Replacement)
e in seguito dalla sIFR (scalable Inman Flash Replacement)
che consentono incorporare titoli con font personalizzati grazie all'impiego combinato di Flash, CSS e Javascript. La sIFR è
stata presentata su queste pagine nell'articolo
sIFR: la nuova tipografia per il web
e ho presentato anche un'alternativa, ovvero la STR,
che utilizza SwishMax al posto di Flash.
Gli hack
Finora abbiamo parlato delle risorse che maggiormente hanno contribuito al progresso e
alla diffusione di buone pratiche di sviluppo dei CSS. Una parte altrettanto importante,
quanto oscura se mi si concede il termine, delle risorse è stata dedicata agli hack.
La progettazione con i CSS non è tutta rose e fiori, e nonostante le conoscenze teoriche
gli sviluppatori spesso si sono trovati a cozzare con la realtà dei browser, e in particolare
bug, inconsistenze e problemi di resa. Da qui la necessità di livellare, "curare" il browser
difettoso, ed è qui che sono nati gli hack, che forse troppo spesso sono stati considerati
un modo pratico e veloce di sistemare le cose. Il primo hack della storia è stato forse
il Box Model Hack di Tantek
per sistemare l'erronea interpretazione del box model di Internet
Explorer 5.0 e 5.5 e di cui ho parlato nell'articolo Capire il box model.
Nella storia degli hack è proprio Internet Explorer il browser più coinvolto: la versione 6
presenta infatti moltissimi bug spesso misteriosi. Si mette in evidenza in quanto documentazione
di bug e relativi hack il sito Position Is Everything,
a cui a parer mio vanno riconosciuti un merito e una colpa. Il merito è di aver fornito test cases e documentazione dei bug, la
colpa è quella di aver diffuso quella che molti, me compreso, considerano una cattiva pratica
di sviluppo, ovvero l'uso degli hack.
Sia ben inteso: ci sono hack che sono innocui e altri potenzialmente dannosi, e in
alcuni casi gli hack possono sembrare l'unica soluzione di fronte a problemi... e magari lo sono:
ma vanno usati consapevolmente. Un possibile approccio in merito agli hack è stato da me presentato
nell'articolo sulla Risoluzione dei problemi di CSS.
Per dovere di cronaca, vale la pena segnalare la risorsa più completa sugli hack, ovvero CSS Hacks and Filters.
Le risorse per imparare
Siamo giunti alla conclusione di questo lungo articolo, in cui abbiamo attraversato
la storia dei fogli di stile grazie alle risorse che maggiormente alla loro diffusione
ed evoluzione. Si tratta per lo più di articoli e risorse specifiche e monotematiche,
che possono dare nell'insieme una visione totale dell'attuale stato dei fogli di stile
ma che comunque non possono costitutire un modo organico per imparare i CSS.
È doveroso quindi fornire al lettore alle prime armi le risorse per imparare e
avere un'impostazione teorica e pratica sufficiente tale da poter affrontare le letture
qui suggerite. Anche qui si tratta di una selezione personale e in linea con l'articolo.
Ecco quindi la mia scelta: W3schools (e la sua
immancabile reference) per conoscere le proprietà CSS e i loro
valori attraverso innumerevoli e semplici esempi; il tutorial base e avanzato
di Brainjar.com per affrontare in maniera pratica e veloce gli aspetti teorici dei CSS,
e le specifiche CSS per approfondire e dissipare i dubbi.
Per le risorse "di casa" segnalo infine la Guida ai CSS, la
Guida al layout con i CSS
(con Layout Gala come complemento) e i molti articoli di approfondimento della sezione
CSS. Alla prossima!
