Compatibilit=E0 | Guida CSS

Compatibilit=E0 =

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

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

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

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

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

Nonostante tutto la via dei CSS =E8 ancora lastricata di = tanti=20 problemi per gli sviluppatori. Due le maggiori fonti di=20 difficolt=E0:

la compatibilit=E0 con i vecchi browser=20
le diverse modalit=E0 di rendering di certe = propriet=E0

Sono problemi diversi, che vogliono quindi risposte = diverse.

Retro-compatibilit=E0

Per quanto riguarda la retro-compatibilit=E0 si hanno due = strade.=20 Si pu=F2 scegliere che non vale pi=F9 la pena sprecare tempo = per=20 Netscape 4 e colleghi. Semplice, brutale, ma pienamente = accettabile.=20 La valutazione delle statistiche sulle visite e sui software = degli=20 utenti =E8 la chiave per prendere una decisione simile.

La seconda strada =E8 quella di compromesso, del metodo = detto=20 cross-browser. Si tratta di elaborare strategie e di = usare=20 trucchetti in grado di preservare un minimo di = compatibilit=E0 con il=20 passato senza rinunciare ai vantaggi dei CSS per i browser = recenti.=20 Essenzialmente, comunque, non si potr=E0 mai fare a meno di = costruire=20 fogli di stile distinti, adatti rispettivamente ai nuovi e = ai vecchi=20 browser. Nell'articolo "CSS cross-browser" avevo evidenziato tre = strategie=20 di base per risolvere il problema:

l'uso di un CSS universale=20
lo sniffing del browser con Javascript per servire a = ciascuno=20 il CSS adatto=20
il metodo @import

Posto che un foglio di stile universale =E8 assai = riduttivo, gli=20 altri due approcci si differenziano per l'origine della = soluzione.=20 Con lo sniffing tutto viene demandato ad una serie spesso = complicata=20 di script. Con il metodo @import si rimane nell'ambito = (X)HTML/CSS.=20

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

Diversit=E0 di rendering

Il secondo campo di battaglia =E8 ancora pi=F9 minato del = primo. L=EC=20 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=20 una propriet=E0, la applica. Un esempio gigantesco. Explorer = 5 Windows=20 supporta l'uso di parole = chiave per=20 definire le dimensioni=20 dei font, ma lo fa a modo suo, interpretando il valore=20 medium in maniera errata (rende il testo pi=F9 grande = del=20 dovuto).

Qui la strategia non pu=F2 essere univoca. Va valutata = caso per=20 caso. Spesso le propriet=E0 coinvolte da queste differenze = sono poco=20 importanti e altrettanto spesso i problemi nascono su = questioni=20 avanzate come il posizionamento dinamico degli elementi. = Fatto sta=20 che l'unica soluzione possibile che posso darvi =E8: = testate le=20 vostre pagine. Sempre. Con il maggior numero di browser = possibile.=20 Valutate i risultati e se vi pare che le differenze siano=20 trascurabili procedete senza problemi. Che una pagina = possiate=20 vederla allo stesso modo su tutti i browser =E8 = semplicemente=20 un'utopia.

Se le differenze sono tante o tali da pregiudicare il = layout=20 della pagina affidatevi a Google o a qualche buona risorsa = sui CSS=20 per risolvere il problema. Un trucchetto prima o poi viene=20 inventato, statene tranquilli. Due sono le risorse che vi = propongo,=20 la prima =E8 preventiva, la seconda per i casi = disperati.

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

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

Altri articoli interessanti:

L'arte dello sniffing: come riconoscere i=20 browser

Gli standard di progettazione del = web

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =