Scrivere codice cross-browser

Avevo intenzione di affrontare questo discorso su più articoli, ma mi rendo conto della necessità di condensare i risultati della mia esperienza in questi ultimi anni in modo chiaro ed incisivo. Scrivere codice cross-browser, innanzitutto, non significa affatto che le nostre applicazioni funzioneranno esattamente nello stesso modo in tutti i browser. Significa semplicemente che funzioneranno, anche se in modo diverso e più limitato. Pretendere che browser concepiti dieci anni fa interpretino il codice come i browser di ultima generazione è un mito. Essi non possono farlo, perchè gli standard di oggi non esistevano dieci anni fa. Quindi cross-browser non ha nulla a che fare con la famosa campagna best viewed with any browser. A proposito di questa campagna, Sofia Postai ne ha dimostrato la fallacità in più pubblicazioni, sostenendo giustamente che il proposito che anima quest'ideologia è del tutto sbagliato perchè non ha nulla a che vedere con la realtà. Noi scriviamo codice per un web reale, non per un web ideale. Cross-browser significa soprattutto questo. Vediamo perchè.

Internet Explorer 6 e 7

Io non sono l'unico a sostenere che non bisogna più puntare su questi browser. La stessa Microsoft, lanciando IE9 e preparando IE10, ha fatto capire che questi browser sono per lei un motivo di imbarazzo. Tutto il materiale di supporto per questi browser è già sparito dall'area download della Microsoft, sostituito da IE8 e 9. Nello specifico, i problemi di questi browser sono i seguenti:

1. Bug CSS: si veda il documento On Having Layout
2. Bug JavaScript: si consulti il sito di Peter-Paul Koch e quello di Gérard Talbot

Come fare?

IE6 non supporta:

1. Selettori avanzati CSS 2.1 e 3
2. Alcune proprietà e valori CSS 2.1 e nessuna proprietà e valore CSS3 (a parte word-wrap e la direttiva @font-face)
3. Trasparenza alfa del formato PNG
4. Animazioni jQuery avanzate
5. Molti effetti della libreria jQuery UI
6. Effetti compositi con jQuery
7. L'oggetto XMLHttpRequest
8. Parte del DOM Level 2 e tutto il DOM Level 3

IE7 non supporta:

1. Selettori avanzati CSS3, tranne i selettori di attributo CSS3
2. Alcune proprietà e valori CSS 2.1 e nessuna proprietà e valore CSS3 (a parte word-wrap e la direttiva @font-face)
3. Transizioni delle immagini PNG con jQuery (da trasparente a opaco)
4. Animazioni jQuery avanzate
5. Alcuni effetti della libreria jQuery UI
6. Alcuni effetti compositi con jQuery
7. Parte del DOM Level 2 e tutto il DOM Level 3

Quindi:

1. Usare immagini GIF o i filtri di IE per sostituire la trasparenza alfa PNG in IE6
2. Usare selettori CSS di ID, tipo, classe e discendente per IE6
3. Non usare il metodo animate() ma utilizzare i vari metodi di jQuery per gli effetti qualora questo metodo sollevasse errori in IE
4. Testare prima i metodi della libreria jQuery UI e cercare come alternativa dei plugin
5. Provare ad effettuare il downgrade di jQuery ad una versione inferiore (per esempio, 1.4)

Soprattutto, usare i commenti condizionali per dare a questi browser il codice richiesto.

Internet Explorer 8

Questo browser ha del tutto risolto i problemi e il supporto CSS 2.1, anche se il supporto ai CSS3 è del tutto identico ad IE7. Sul fronte JavaScript, IE8 mostra un migliorato supporto a jQuery e al DOM, ma ha ancora dei limiti nelle animazioni e negli effetti jQuery. A questo proposito raccomando sempre prudenza nella scelta degli effetti e dei plugin, soprattutto per quanto riguarda l'esecuzione e la performance.

Gli altri browser

Con gli altri browser bisogna essere pratici: browser come Safari e Opera hanno sui computer desktop delle percentuali d'uso irrisorie, mentre il discorso cambia radicalmente sul mobile. Occorre quindi concentrarsi sul desktop su browser come Chrome e Firefox, tralasciando gli altri. I browser citati sono comunque browser assolutamente conformi agli standard, quindi se si scrive codice standard, le differenze saranno minime, a meno di casi veramente particolari. Per esempio, l'ultimo mio lavoro non era stato testato su Safari per iPhone e iPad. Una volta testatolo a lavoro finito e già online, non si è notata nessuna differenza significativa.