Un problema sempre aperto: la compatibilità tra i CSS e i browser

Questa lezione è soprattutto per chi si avvicina solo ora ai CSS. Non imparerete molto di concreto ma avrete coscienza di un problema fondamentale: quello della compatibilità. Giusto per capire il livello della questione, ho deciso di mettere all'inizio come una sorta di epigrafe questa frase di Todd Fahrner (la traduzione è mia):

È una vergogna che i CSS, nati per essere semplici e avvicinabili dai non-programmatori, si siano trasformati in una roba misteriosa come la Cabala!

I CSS sono uno strumento meraviglioso. Se ricordate le date di definizione delle due specifiche potreste chiedervi spontaneamente: ma perchè non sono stati usati da subito? .

Il problema è che la piena coscienza da parte di produttori di browser e autori dell'importanza di adottare linguaggi standard ha fatto molta fatica ad affermarsi. Netscape introduceva estensioni proprietarie, Explorer rispondeva. E i poveri web-designer a cercare soluzioni in grado di conciliare gli opposti. In tutto ciò ci si dimenticava di rafforzare il supporto dei linguaggi del W3C. E i CSS rimanevano una cosa di nicchia, per pochi adepti che non avevano nemmeno uno strumento per testarne seriamente le potenzialità

Una prima svolta, sul versante dei browser di massa, si ebbe con Explorer 5, il primo ad offrire un supporto adeguato del linguaggio. I predecessori di quarta generazione ne offrivano uno meno che accettabile. Lentamente, e anche grazie all'opera di gruppi di pressione come il Web Standards Project o di software-house come Opera, la consapevolezza è aumentata. Oggi possiamo contare su strumenti di navigazione che supportano la quasi totalità della specifica CSS2. Con un browser, però, che surclassa tutti gli altri in questo ambito: Mozilla. Microsoft ha continuato la sua opera di adeguamento, deludendo un pò con Explorer 6, ma sfornando un eccellente navigatore per Mac.

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

la compatibilità con i vecchi browser
le diverse modalità di rendering di certe proprietà
Sono problemi diversi, che vogliono quindi risposte diverse.

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 colleghi. Semplice, brutale, ma pienamente accettabile. La valutazione delle statistiche sulle visite e sui software degli utenti è la chiave per prendere una decisione simile.

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. Essenzialmente, comunque, non si potrà mai fare a meno di costruire fogli di stile distinti, adatti rispettivamente ai nuovi e ai vecchi browser. Nell'articolo CSS cross-browser della avevo evidenziato tre strategie di base per risolvere il problema:

l'uso di un CSS universale
lo sniffing del browser con Javascript per servire a ciascuno il CSS adatto
il metodo @import
Posto che un foglio di stile universale è assai riduttivo, gli altri due approcci si differenziano per l'origine della soluzione. Con lo sniffing tutto viene demandato ad una serie spesso complicata di script. Con il metodo @import si rimane nell'ambito (X)HTML/CSS.

Vi rimando all'articolo citato per una discussione ampia e ricca di esempi sulla questione. E vi segnalo questa pagina di Eric Meyer per una panoramica eccellente su altri metodi "interni" al linguaggio da affiancare al classico uso di @import.

Diversità di rendering

Il secondo campo di battaglia è ancora più minato del primo. Lì possiamo almeno decidere la fuga: Che Netscape 4 vada al suo destino. Qui i mal di testa sono assicurati.

Il problema sta nel modo in cui ciascun browser, pur supportando una proprietà, la applica. Un esempio gigantesco. Explorer 5 Windows supporta l'uso di parole chiave per definire le dimensioni dei font, ma lo fa a modo suo, interpretando il valore medium in maniera errata (rende il testo più grande del dovuto).

Qui la strategia non può essere univoca. Va valutata caso per caso. Spesso le proprietà coinvolte da queste differenze sono poco importanti e altrettanto spesso i problemi nascono su questioni avanzate come il posizionamento dinamico degli elementi. Fatto sta che l'unica soluzione possibile che posso darvi è: testate le vostre pagine. Sempre. Con il maggior numero di browser possibile. Valutate i risultati e se vi pare che le differenze siano trascurabili procedete senza problemi. Che una pagina possiate vederla 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. Due sono le risorse che vi propongo, la prima è preventiva, la seconda per i casi disperati.

Suite di test di CSS2: di, manco a dirlo, Eric Meyer. È una pagina da cui potrete testare tutte le proprietà e i metodi di CSS2. L'approccio è semplice. Visitate la pagina con il browser che volete testare, scegliete la proprietà che vi interessa e verificate il supporto. Le pagine di test sono costruite in modo tale da rendere subito evidente eventuali comportamenti non-standard. L'opera monumentale è un'estenzione del lavoro fatto dal W3C e rimasto fermo a CSS1.

La seconda risorsa è una vera miniera. Si tratta dell'archivio pubblico della migliore mailing-list sull'argomento: css-discuss. Se non trovate una soluzione a un problema qui, vuol dire che non è stata ancora trovata.

RELEASE SOLAMENTE PER IL FORIX FORUM

per questo ci sono i CSS3

Si si lo so.