Advanced Technology

Per coloro i qualiu non hanno mai realizzato un sito web, quando si sentono parlare anche di CSS una delle domande più ovvie è "ma vale la pena usare i fogli di stile?"

Potreste tranquillamente rispondere di no, o se sapete quanto tempo ci vuole a fare un sito in puro CSS, essere dell’idea opposta, ma vi assicuro che il tempo e l’abitudine all’uso dei CSS vi farà redimere.

La mia risposta alla domanda “Vale la pena usare i fogli di stile” è ovviamente “SI”. E oggi aggiungo anche “Non ne posso fare a meno”.

E’ dai tempi di Explorer 4 e Netscape 4 che il mio odio profondo per la sintassi proprietaria si è conclamato. All’epoca dei due browser non vi era un giorno che una minor release non modificasse un minimo comportamento di come l’HTML veniva interpretato, e io li a districarmi sul come fare a rendere visibile un sito che solo pochi giorni prima era perfettamente funzionante.
E allora via con codice javascript, browser sniffers, e menate varia. Alla fine bisognava sempre scendere a qualche compromesso, di cui il più delle volte non ero certo orgoglioso.
Explorer 5 cambiò un pò la vita in quel senso, e l’”abbandono dello sviluppo” di Netscape che venne ceduta ad AOL fu, se vogliamo, una sorta di pace interiore.
Tuttavia c’erano ancora molte persone che continuavano ad usare il Netscape, i browser minori ancora non erano così diffusi, e comunque tra una versione ed un altra Explorer cambiava sempre via.

Il problema insomma era che non esisteva una piena coscienza da parte dei produttori di browser dell’importanza di adottare linguaggi standard, e questa convinzione ha fatto molta fatica ad affermarsi.

Una prima svolta, sul versante dei browser di massa, si ebbe con l’introduzione di Opera, che ricordo ancora era un browser inizialmente a pagamento (esisteva anche una versione gratuita, ma toccava subirsi la pubblicità). Questo fu, a mio avviso, uno dei più grandi errori che la software house svedese commise, perchè il fatto di rendere uno strumento a pagamento penalizzò la sua diffusione (infatti oggi Opera è gratuito), tuttavia c’è anche da comprendere la cosa: all’epoca i finanziatori per progetti “alternativi” non è che abbondassero e magari la software house non era riuscita a far comprendere realmente a coloro i quali probabilmente si era rivolta dell’importanza di avere un browser nuovo, alternativo e in regola con gli standard.

Fortunatamente oggi questa consapevolezza è aumentata. Oggi possiamo contare su strumenti di navigazione che supportano la quasi totalità della specifica CSS2, e tra questi spicca Firefox che surclassa tutti gli altri.
Microsoft ha continuato e sta continuando la sua opera di adeguamento. Ha deluso un pò con Explorer 6, e chissà cosa farà con Explorer 7.

Nonostante tutto la via dei CSS è ancora lastricata di tanti problemi per gli sviluppatori. Due le maggiori fonti di difficoltà:

1. la compatibilità con i vecchi browser
2. le diverse modalità di rendering di certe proprietà

Sono problemi diversi, che vogliono quindi risposte diverse.

La retro-compatibilità

Per quanto riguarda la retro-compatibilità si hanno due strade. Si può scegliere che non vale più la pena sprecare tempo per Netscape 4 e tutti i browser che non rispettino un minimo di standard. Semplice e accettabile, anche perchè basta avere un occhio alle statistiche del proprio sito web, sotto la sezione “agent” per vedere quante richieste sono generate da questi antenati e ci si renderà ben presto conto che non il gioco non vale la candela.

La seconda strada è quella di compromesso, del metodo detto cross-browser. Si tratta di elaborare strategie e di usare trucchetti in grado di preservare un minimo di compatibilità con il passato senza rinunciare ai vantaggi dei CSS per i browser recenti. Tendenzialmente, io seguo la prima linea di condotta.

Diversità di rendering

Il secondo aspetto è decisamente più rovente del primo. Qui la strategia non può essere univoca e va valutata caso per caso. E non si può nemmeno optate per la fuga, ma bisogna armarsi di pazienza e conoscenza e dar vita al nostro sito, testandolo su diversi browser e quando possibile su differenti piattaforme.

Il problema di fondo purtroppo è sempre lo stesso: per quanto i browser si stiano pian piano uniformando agli standard, ci sono ancora dei sassolini dentro la scarpa che sviano dalla retta via. Il risultato è che alcune proprietà sono disponibili solo su alcuni browser (un esempio che vale per tutti è il supporto mai incoraggiato dal W3C dello stile delle barre di scorrimento disponibile solo per IE) o altre proprietà che si comportano a volta in maniera differente.
Fortunatamente le proprietà coinvolte da queste differenze sono il più delle volte poco importanti, e con pochi semplici accorgimenti si può porre rimedio, ma la vera e unica panacea è quella di testare le pagine con il maggior numero di browser possibile, valutate i risultati (e se le differenze siano trascurabili), quindi procedete senza problemi. Che una pagina sia identica e visibile allo stesso modo su tutti i browser è semplicemente un’utopia.

Se le differenze sono tante o tali da pregiudicare il layout della pagina affidatevi a Google o a qualche buona risorsa sui CSS per risolvere il problema. Un trucchetto prima o poi viene inventato, statene tranquilli. Una risorsa abbastanza importante dove poter iniziare le ricerche è la mailing-list css-discuss. Se non trovate una soluzione a un problema qui, vuol dire che non è stata ancora trovata.

Trovo che la tecnica dell’overlay grafico per far apparire qualcosa, qualsiasi cosa (ma in particolare delle immagini) all’interno della pagina senza ricorrere a finestre pop-up esterne, sia una tecnica veramente degna di nota.

Ancor di più lo è il LightBox ideato da Lokesh Dhakar.

Avete mai sognato di fare il Drag & Drop degli elementi delle pagine HTML? O il resize dei layers?

Si? Bene … Walter Zorn ci ha pensato per voi, creando questo Javascript crossbrowser che definireri a dir poco fantastico.

Il sito e relativo materiale lo potete trovare qui

Possiamo considerare i fogli di stile (o CSS, Cascading Style Sheets) come la naturale evoluzione e complemento all’HTML classico, estendendone potenzionalita’ e funzionalita’, obiettivi non disponibili al normale HTML che da sempre ha sofferto di questa mancanza.

Utilizzare i CSS offre indubbiamente vantaggi, ma al contempo viene aggiunto un ulteriore livello di complessita’. E’ infatti indispensabile la conoscenza di HTML (e quindi non solo il fatto di sapere usare qualche editor visuale per la composizione delle pagine) per poter sfruttare tutto ciò che i fogli di stile hanno da offrire.

In questa breve guida vorrei occupermi dei fogli di stile in cascata, tralasciando gli aspetti meno importanti, ossia quelle parti di essi che ben difficilmente si ha occasione di adottare.

Inoltre, benche’ il W3C abbia rilasciato le specifiche fin dal 12 maggio 1998 (CSS2, seconda edizione) non tutti i broswer offrono sufficente supporto agli stessi. I migliori interpreti restano comunque Mozilla Firefox, Internet Explorer, ma anche le ultime versioni di Opera (in particolare la 8 e la 9). Tutti gli altri browser offrono un supporto praticamente nullo ai CSS e questo non può che portare degli enormi svantaggi per tutti coloro che volessero cimentarsi nella realizzazione di siti web multi-browser, tuttavia non è colpa del web designer in questo caso, ma di coloro che rilasciano i browser i quali sembrano proprio ignorare la necessità di uniformarsi agli standard di un consorzio riconosciuto de facto.