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 qui.

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.

Ti potrebbero interessare

Come scegliere un hosting WordPress per il tuo nuovo CMS

Come scegliere l’hosting WordPress per il tuo nuovo CMS

Aziende Italia offre un servizio di hosting di prima qualità per il tuo CMS WordPress con blog o sito web. Precisione, performance e assistenza.

Ogni [...]

3 commenti che dovresti cancellare subito dal tuo blog

Come gestire al meglio i commenti sul tuo blog

Cancellare i commenti dal blog è un momento importante che non va sottovalutato. Ecco perché dovresti essere preparato...

Stiamo parlando di una delle merci più preziose dei blog, [...]

Server dedicati e cloud: quando un dedicato è più conveniente

Server dedicati vs Server cloud: quando un dedicato è migliore

Nel corso degli ultimi anni i sistemi cloud hanno cambiato in modo significativo l'erogazione dei servizi web. Grazie agli sviluppi della tecnologia oggi è possible [...]

Cisco
DELL
Intel
NetApp
OnApp
Ripe