Nonostante le novità introdotte da HTML5 e CSS3, e il costante lavoro di definizione degli standard da parte del W3C, non è ancora terminata l'epoca delle problematiche associate allo sviluppo di codice cross-browser. Un esempio molto semplice, che impatta proprio le specifiche dell'HTML5, riguarda la proprietà innerText degli elementi HTML. Sembra che questa proprietà, nata come codice nativo per Internet Explorer, diventerà presto uno standard dell'HTML5.
Il condizionale è d'obbligo: diciamo “sembra” perché, fin tanto che l'HTML5 non sarà ufficiale, possiamo ragionevolmente supporre che l'innerText diventerà uno standard, ma senza averne la certezza. Usiamo il condizionale anche per un altro motivo: la distinzione tra cosa è “standard” e cosa non lo è non è affatto ovvia, come abbiamo in parte discusso in questo articolo.
Le specifiche dell'HTML5 sono già adottate da quasi un terzo dei principali siti mondiali, il che suggerisce che il nuovo linguaggio di markup potrebbe diventare uno “standard” prima di essere ufficializzato dal W3C. Ma esiste il rovescio della medaglia: il fatto che l'HTML5 non sia ancora ufficiale autorizza alcuni produttori ad attendere. Questo sembra essere il caso della proprietà innerText, che nonostante sia candidata a far parte dell'HTML5, al momento non è ancora supportata da Firefox. Ci troviamo così in una situazione contraddittoria: se scegliamo di essere lungimiranti, utilizzando l'HTML5, rischiamo di dover affrontare ancora una volta le “vecchie” problematiche di cross-browser. Viceversa, se restiamo fedeli agli standard attuali, ignorando le specifiche HTML5, non beneficiamo di quelle novità che mirano proprio a risolvere la questione della compatibilità tra browser diversi.
Ecco perché può essere utile rispolverare le vecchie tecniche di cross-browsing, adattandole alla situazione attuale. Nel caso delle proprietà supportate dagli elementi HTML ci viene incontro l'operatore in di JavaScript. Si tratta di un operatore a volte frainteso, che vale la pena imparare ad usare nel modo corretto.
L'operatore “in”
Chi lavora con altri linguaggi di programmazione, o ha alle spalle molti anni di SQL e PL/SQL, potrebbe cadere nella trappola di usare l'operatore in nel modo sbagliato. L'esempio tipico è
var arr = new Array(5);
for (i = 0 ; i < arr.length ; i++) arr[i] = 10 + i;
if ('11' in arr) alert('Trovato');
se eseguiamo il codice qui sopra, il valore 11 non verrà mai trovato nell'array. L'operatore in ha infatti uno scopo diverso, che è quello di verificare se una certa proprietà è disponibile all'interno di un oggetto, oppure di scorrere tutte le proprietà di un oggetto.
Consideriamo ad esempio
var myObject = { name : "Hello", tag : "World" };
for (a in myObject) alert(a);
in questo caso otterremo due notifiche di alert: una per la proprietà name, una per la tag. L'operatore in può essere anche usato per indagare se una proprietà è disponibile nell'elemento HTML, ad esempio
if ('name' in myObject) alert('trovato');
qui sopra l'operatore in serve a controllare la condizione “l'oggetto myObject ha una proprietà di nome name?”. Se la condizione è verificata scatta la notifica.
Torniamo ora alla questione della proprietà innerText e vediamo un modo di affrontare il problema. Innanzitutto chiariamo la situazione: ogni elemento HTML, quando viene gestito attraverso il DOM, è quasi sempre un oggetto. Ciò significa che qualsiasi elemento può essere maneggiato esattamente come nel caso qui sopra. Possiamo quindi scrivere
<p id="entry">Testo di prova</p>
<p id="result" style="COLOR:red"/>
<script language="JavaScript" type="text/javascript">
var r = document.getElementById('result');
var e = document.getElementById('entry');
if ('innerText' in r) {
r.innerText = 'Inner: ' + e.innerText;
}
else {
r.textContent = 'Content: ' + e.textContent;
}
</script>
l'esempio qui sopra non serve a nulla, perché si occupa solo di travasare il contenuto del primo paragrafo nel secondo, ma evidenzia un possibile uso dell'operatore in. In questo caso usiamo l'operatore innerText solamente se supportato dall'oggetto HTML (il paragrafo r), altrimenti usiamo lo standard attualmente indicato dal W3C, che è textContent.
Ribadiamo che si tratta solo di un esempio didattico, per mostrare un possibile uso dell'operatore in. Nel caso specifico della proprietà innerText, dato che disponiamo già di un'alternativa valida (la proprietà textContent) è abbastanza inutile distinguere i due casi: tanto vale usare sempre textContent per risolvere il problema alla radice. E' però bene ricordarsi dell'operatore in durante la fase di transizione verso l'HTML5, perché ci permette di scrivere sin da oggi codice HTML5 senza preoccuparci di quando diventerà standard, e soprattutto senza dover usare le vecchie tecniche di cross-browsing. Invece di identificare il tipo di browser, ed eseguire codice diverso in base alla tipologia del client, grazie all'operatore in possiamo semplicemente indagare se una proprietà esiste, senza chiederci quale browser sta visualizzando la pagina.
