[Slide] Using DOM Scripting to Plug the Holes in CSS

[pierofix]

Una delle presentazioni emerse da @media sull'argomento Document Object Module + CSS:

- Using DOM Scripting to Plug the Holes in CSS

La trovo semplicemente interessantissima.

[Xinod]

e' vero, interessante

[pierofix]

Ho notato, leggendo di tanto in tanto le discussioni in questo forum, che spesso - nel caso di interazione javascript + CSS - le soluzioni suggerite tendono a preferire un utilizzo un po' improprio di javascript.

Prendiamo questo esempio: al click del mouse su un elemento, questo assume colore rosso. (Semplifico il caso, che comunque sarebbe gestibile completamente con CSS.)

La soluzione che spesso suggerite assomiglia a questa:

XHTML

<p id="par" onclick="colora()">
   Io sono un paragrafo e me ne vanto.
</p>


Javascript

function colora()
{
   document.getElementById('par').style.color = 'red';
}

Ora, mi chiedo, perchè non applicare anche qui il concetto di separazione tra contenuto e forma, tanto caro alla nuova filosofia di progettazione?

Si avrebbe così una separazione completa tra i tre elementi, ad ognuno dei quali verrebbe assegnato il compito per cui è stato inventato:

1. struttura descrittiva di markup (XHTML);
   
2. presentazione delle informazioni (CSS);
   
3. comportamento (script lato client).

La soluzione di prima potrebbe diventare:

XHTML

<p id="par">
   Io sono un paragrafo e me ne vanto.
</p>


CSS

.selezionato
{
   color:red;
}


Javascript

var paragrafo = document.getElementById('par');
paragrafo.onclick = function()
{
   this.className = 'selezionato';
}

In tal modo otteniamo:

1. un markup più pulito ed essenziale, non sporcato da attributi di evento e via dicendo;
   
2. la parte che riguarda la grafica è gestita da CSS, come è giusto che sia;
   
3. il javascript deve essere progettato con più coscienza e con maggior rispetto degli standard, avvicinandosi così anche al DOM del W3C.

Trovo che sia un approccio più intelligente e ponderato, no? Come mai non è molto discusso, da queste parti? Forse mi perdo io qualche passaggio?

Mi piacerebbe avere la vostra opinione in merito.

[Xinod]

il tuo discorso in linea teorica non fa una piega e al momento lo si sposa senza troppi arrovellamenti
nella pratica pero' ci si deve confrontare con interpretazioni un po' arbitrarie da parte dei singoli browser e, x restare sull' esempio specifico, className x molto tempo e' stato considerato "da evitare" perche' non supportato da vecchie versioni di opera (non ricordo precisamente se 7 compresa o esclusa).
oggi questo potrebbe essere irrelevante ma all' epoca era un buon deterrente all' utilizzo del className, da qui l' abitudine a non farvi completamente affidamento dove l' obiettivo e' uno scripting cross-browser, almeno limitato ai browser moderni.

ciao

[pierofix]

Ah, ok: era quindi un problema di compatibilità?

Adesso molto probabilmente questi inconvenienti si saranno sistemati, quindi ritengo che sia il caso di cominciare a utilizzare questo tipo di soluzioni, no?

[Mich_]

Sono perfettamente d'accordo su quanto espresso nell'ultimo post di Piero.
In qualche occasione avevo anch'io proposto una soluzione di quel tipo, ma con qualche variante.

Anzitutto lo script di Pero ha necessita` di essere inserito dopo la definizione dell'oggetto, quindi dentro il body, e questo non mi piace molto (sempre nell'ambito della separazione).

Per cui propenderei per:

HTML
<p id="par" class="normale" onclick="selez(1,this);" onblur="selez(0,this);">
   Io sono un paragrafo e me ne vanto.
</p>


CSS
.normale {
   color: black;
}
.selezionato{
   color:red;
}


Javascript
function selez (on, ogg) {
   ogg.className = on ? 'selezionato' : 'normale';
}

naturalmente (come diceva anche Piero) questo esempio e` un po' al limite, dato che la cosa si potrebbe fare (browser permettendo) anche con solo CSS, per cui reputo l'uso di JS non adatto (pero` e` adatto per capirci).

[pierofix]

Originariamente inviato da Mich_
lo script di Piero ha necessita` di essere inserito dopo la definizione dell'oggetto, quindi dentro il body, e questo non mi piace molto (sempre nell'ambito della separazione).

Si potrebbe eventualmente inserire tutto il codice javascript visto sopra in una cosa tipo

window.onload = function()
{
   // Qui lo script.
}

In fase di test sul mio computer - prima di postare il codice - avevo fatto proprio così.

naturalmente (come diceva anche Piero) questo esempio e` un po' al limite, dato che la cosa si potrebbe fare (browser permettendo) anche con solo CSS, per cui reputo l'uso di JS non adatto (pero` e` adatto per capirci).

Sì, spero capiate: ho scelto questo esempio solo per pura semplicità nel concetto.

[pierofix]

Mi sento in sintonia con A List Apart. Guardate cos'hanno appena pubblicato:

- Behavioral Separation

[andrea.paiola]

su dai niente di nuovo... http://www.pixline.net/39

[pierofix]

Andrea, come al solito sei superficiale. Io non ho detto che si tratta di una cosa nuova, solo che in questo forum - così come nella pratica comune - l'approccio che ho descritto è sempre poco usato.

Il mio era un invito ad iniziare a prendere in considerazione questo tipo di soluzioni e cominciare così ad adottarle anche in questa sede.