Javascript e CSS: separare l'azione dalla presentazione

di: Peter-Paul Koch     20 Ottobre 2004

Questo articolo è stato pubblicato originariamente su Digital Web Magazine (http://www.digital-web.com). Appare qui in traduzione con il permesso dell'editore.

Titolo originale: Separating behavior and presentation
URL: http://www.digital-web.com/articles/separating_behavior_and_presentation/

Facciamo il punto della situazione:

  • La separazione della presentazione dalla struttura è iniziata agli albori della rivoluzione CSS. Si è rivelato un processo molto più complicato di quanto si pensasse, ma con un duro lavoro di prova ed errore, siamo ora in grado di padroneggiare i principi di base.
  • La separazione dell'azione dalla struttura non è invece ancora iniziata, ma ci sono le premesse perché sia davvero semplice. (cfr. Articolo: Il nuovo Javascript: separare l'azione dalla struttura)

Questo articolo si occupa del terzo tipo possibile di separazione, quello tra azione e presentazione.

Secondo la moderna teoria del web development, è possibile realizzare con i CSS molte delle funzioni tradizionalmente realizzate con Javascript. Per esempio, le ricerche di Eric Meyer mostrano come si possano creare con i soli CSS persino i menu a tendina, da tempo ritenuti dominio esclusivo di pesanti e complesse librerie Javascript: bastano poche righe di codice costruite intorno al selettore li:hover.

Se ignoriamo i problemi di compatibilità tra i browser e sappiamo di poter creare splendidi menu a tendina sia con i CSS che con Javascript, quale dei due linguaggi dovremmo usare? I menu a tendina hanno a che fare con l'azione o con la presentazione?

Un dilemma simile può sorgere intorno alle tecniche di image replacement. Negli ultimi mesi sono state pubblicate una ventina di estensioni, modifiche, variazioni di questa tecnica, ma tutte si basano sui CSS. Nessuno sembrava interessato alla loro implementazione con Javascript, così l'ho fatto io.

Se confrontiamo il mio script con la migliore variazione sul tema basata sui CSS (probabilmente il metodo della cover-up span di Pixy), quale sceglieremmo? La mia soluzione è superiore a quella con i CSS? O è meglio utilizzare i CSS per implementare un image replacement? E in entrambi i casi, perché?

Preferenze personali

Al momento, molti sembrano rispondere a questi dilemmi in base alle proprie preferenze personali. È legittimo. Se uno lavora bene e velocemente con i CSS ma trova complicato Javascript, è naturale che preferisca operare con ciò che conosce.

Le sole preferenze personali, però, non aiutano più di tanto. Se ci sono ragioni oggettive e stringenti per realizzare un certo effetto con Javascript, dovremmo essere in grado di farlo, a prescindere da ciò che preferiamo.

Uno sviluppatore web client-side dovrebbe sempre avere qualche conoscenza di questo linguaggio. Non significa dover conoscere alla perfezione l'intera specifica del W3C DOM, ma almeno sapere cosa si può fare e come lavorare sugli script creati da altri. Solo così saremo in grado di decidere consapevolmente di non usare Javascript.

Guide JavaScript

Guida Node.js

Il framework che permette di per usare V8, l'interprete JavaScript...

Canvas, guida ai framework

Canvas, tra gli elementi di HTML5 è forse quello di maggior impatto....

Guida jQuery UI

Creare siti ricchi e dinamici con jQuery UI, il progetto ufficiale...

Altre guide

Newsletter @JavaScript

Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso JQuery e Ajax per Webmaster

03 Luglio 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti