jQuery: risoluzione dei problemi in Internet Explorer 6 e 7

Anche se, tecnicamente parlando, è sempre jQuery che supporta un browser e non il contrario, c'è da dire che i risultati che si ottengono in Internet Explorer 6 e 7 sono di gran lunga inferiori a quelli ottenibili in altri browser. Ho calcolato che su 200 test da me eseguiti con jQuery, IE 6 e 7 ne superavano complessivamente meno del 60%. Questa carenza di supporto è data dal fatto che si tratta di browser ampiamente obsoleti e su cui la stessa Microsoft preferisce stendere un velo pietoso e puntare sulle versioni 9 e 10 di Explorer. Tuttavia, statistiche alla mano, sono browser ancora diffusi. In alcuni paesi la versione 6 è addirittura ben al di sopra del 5%, ossia la fatidica soglia al di sotto della quale un browser può anche essere ignorato. In questo articolo vorrei illustrare alcune tecniche e accorgimenti per risolvere i problemi più noti con questi due browser.

Animazioni

IE 6 e 7 hanno dei notevoli problemi con le animazioni complesse ed annidate. Nello specifico, i problemi riguardano soprattutto il metodo animate(), ossia:

1. le parole chiave hide, show, toggle
2. la velocità d'esecuzione delle animazioni (intervalli superiori ai 2000 millisecondi)

Si possono risolvere questi problemi nel modo seguente:

1. sostituire animate() con i metodi specifici fadeIn(), fadeOut(), hide() e show()
2. evitare di usare intervalli superiori ai 2000 millisecondi

Non ho riscontrato significativi problemi nel metodo animate() con le seguenti proprietà CSS:

1. top, right, bottom, left
2. width, height
3. opacity (a parte sulle immagini PNG - vedi articolo)
4. padding e margini
5. font-size
6. line-height

Una speciale attenzione meritano gli operatori += e -= usati con i valori delle proprietà CSS. A volte sia IE 6 che 7 restituiscono un errore, sostenendo di non essere in grado di leggere il valore della proprietà specificata. Si risolve in questo modo:

var ratio = 100;


$(element).click(function() {

	var left = $(this).position().left;
	
	$(this).animate({
		left: left + ratio
	}, 'slow');

});

invece che:

$(element).click(function() {

	
	
	$(this).animate({
		left: '+=100px'
	}, 'slow');

});

Gestione degli errori

In queste versioni di Internet Explorer il codice va scritto passo passo. Quando si affrontano costrutti complessi, è bene usare la gestione delle eccezioni offerta da JavaScript:

if(ie) {

	try {
	
		// codice complesso
	
	}  catch(e) {
	
		// gestione del possibile errore
	
	
	}

}

Consiglio caldamente di usare degli strumenti di sviluppo specifici per Internet Explorer 6 e 7, come ad esempio i seguenti. Usate spesso la console DOM e JavaScript dopo ogni azione eseguita dal vostro codice per verificare che IE l'abbia interpretata correttamente.

Bug CSS

I bug di IE 6 e 7 con i CSS sono quasi tutti collegati alla proprietà hasLayout. Per questo motivo quando si creano delle animazioni occorre innanzitutto testare prima gli stili CSS per essere sicuri che non ci siano problemi. Se il vostro codice modifica gli stili di un elemento, create prima una classe CSS ed applicatela all'elemento per osservare quale sarà la resa finale in Explorer.

Performance

Questi browser hanno una performance molto scarsa. Per questo motivo:

1. usate innerHTML invece che html()
2. usate i cicli for e for...in invece che .each() e $.each()
3. assemblate il contenuto HTML come array e infine trasformatelo in stringa

Spieghiamo l'ultimo punto:

var html = [], i = 0;
html[i] = '<ul>';

for(var j = 1; j < 10000; j += 1) {

	html[i++] = '<li>' + j + '</li>';

}

html[html.length+1] = '</ul>';

var str = html.join('');

$(element)[0].innerHTML = str;

Questo approccio migliora l'esecuzione di circa il 30/40% in Internet Explorer 6 e 7.

Downgrade di jQuery

A volte usare l'ultima versione di jQuery può creare problemi in IE 6 e 7. Anche se sulla carta jQuery dovrebbe funzionare su questi browser, molto spesso si verificano alcuni comportamenti imprevisti relativi alle modifiche apportate al codice della libreria nelle nuove versioni. Per questo motivo è spesso decisivo effettuare un downgrade di jQuery alla versione che si rivela più stabile in questi browser.

Per esperienza posso dirvi che la versione 1.4 si è rivelata funzionare meglio delle ultime versioni. Quindi potete dare ad IE 6 e 7 il seguente codice:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Vi consiglio di utilizzare uno script lato server per dare solo alle versioni di Explorer selezionate questa versione specifica di jQuery.

Individuare Internet Explorer

A mio avviso il modo migliore per dare del codice solo ad alcune versioni di Internet Explorer inferiori alla 10 sono ancora i commenti condizionali. Tuttavia, esistono anche altri metodi per farlo usando jQuery, e sono riassunti in questa discussione su Stack Overflow.

Un metodo che potrebbe soppiantare l'uso dei commenti condizionali è quello dell'individuazione delle caratteristiche supportate da Internet Explorer. Il problema di questo metodo è che è meno rapido e pratico dei commenti condizionali.