Best Practices CSS: l’organizzazione dei fogli di stile

Quando ci occupiamo della presentazione di un'applicazione o di un sito Web molto del lavoro riguarda la grafica e la definizione dei fogli CSS. Spesso ci concentriamo solamente sui dettagli, ovvero sulla valorizzazione delle proprieta CSS, scegliendo con cura ogni selettore ed ogni regola del foglio di stile. Occuparsi della presentazione non si limita a questo aspetto, ma dovrebbe considerare anche questioni architetturali, come ad esempio: preferiamo inserire tutte le regole CSS in un unico foglio di stile esterno o frammentarle tra fogli diversi? Dobbiamo evitare i fogli di stile interni o esistono eccezioni? La definizione delle regole CSS dev'essere gestita in modo manuale o puo interagire con JavaScript? Chiaramente non esistono risposte universali a queste domande, ma le risposte dipendono dai requisiti specifici del progetto su cui stiamo lavorando.

Inclusione a run-time

Inclusione a run-time

Approfondiamo la possibilità di includere un foglio di stile CSS a run-time, ovvero senza includerlo all’interno della tag head. Questo può essere fatto in modi diversi: una delle soluzioni più semplici è quella di usare JavaScript. Esiste però un potenziale rischio: alcuni browser potrebbero non permettere l’operazione, vuoi perché troppo vecchi (ormai piuttosto improbabile), vuoi perché l’utente ha disabilitato JavaScript per motivi di sicurezza. Quest’ultimo scenario non è trascurabile, perché alcune aziende impongono di disabilitare JavaScript come policy aziendale. Il codice in questione è il seguente

Siccome il codice viene eseguito durante il caricamento la pagina, anche se JavaScript funziona correttamente l’utente potrebbe notare un cambiamento nella presentazione. In altre parole l’utente vedrebbe prima aprirsi la pagina in un certo modo (cioè senza il CSS che verrà caricato dinamicamente), e dopo una frazione di secondo vedrebbe l’aspetto della pagina cambiare sotto i propri occhi.

Ecco che entra in ballo la teoria suggerita dal Progressive Enhancement. La metodologia può essere riassunta in tre punti:

  • Presentazione minimale: la nostra pagina deve essere fruibile, seppur in modo scarno e minimale, anche nei browser che non utilizzano JavaScript. Nella pratica ciò significa che i contenuti devono essere visualizzati comunque. Successivamente, se possibile, possiamo arricchire (enhance) i contenuti dal punto di vista grafico o funzionale.
  • Browser non aggiornato : il codice JavaScript deve funzionare anche se l’utente non ha aggiornato il browser e alcune librerie.
  • Link esterni: se la pagina richiede particolari librerie esse vanno caricate come link esterni alla pagina e mai incluse in essa. In questo modo, se il browser non supporta delle librerie o tecnologie, garantiamo comunque la fruizione dei contenuti o del servizio.

Vediamo come applicare la metodologia nella pratica. Supponiamo di voler includere alcuni fogli di stile a run-time, usando il codice JavaScript visto sopra. In questo caso dobbiamo assicurarci che la pagina sia utilizzabile anche senza il foglio specifico che carichiamo via JavaScript. In altre parole deve esserci un foglio CSS di default, probabilmente comune all’intera applicazione, che si occupa di garantire almeno il layout. Ciò suggerisce, ad esempio, di specificare il layout dei componenti in un foglio comune a tutte le pagine e andare poi a caratterizzare la presentazione nei fogli specifici (quelli caricati via JavaScript).

La metodologia Progressive Enhancement suggerisce anche un modo di risolvere il problema della presentazione discontinua della pagina, ovvero il cambiamento che l’utente percepisce nell’istante in cui carichiamo dinamicamente un nuovo foglio di stile. Consideriamo ad esempio la seguente soluzione realizzata usando jQuery:

In questo modo il codice JavaScript che si occupa di caricare i fogli CSS necessari alla pagina viene eseguito solamente mentre gli elementi in questione (nel nostro esempio content, nav e menu) sono nascosti. Solo alla fine andiamo a visualizzare nuovamente gli elementi che ci interessano.

Questo modo di lavorare funziona anche se il browser non permette l’esecuzione di JavaScript, perché in tal caso gli elementi HTML non verrebbero neppure nascosti e quindi resterebbero visibili. L’esempio qui sopra è volutamente semplificato al massimo, l’importante è cogliere la relazione tra teoria e pratica: abbiamo garantito una presentazione minimale della pagina anche quando il browser non è aggiornato, e l’abbiamo fatto usando una libreria esterna (cioè jQuery) per nascondere i contenuti mentre la pagina viene caricata. Le parole scritte in corsivo sono esattamente l’applicazione dei principi del Progressive Enhancement. L’esempio dovrebbe mostrare come sia possibile passare dalla teoria alla pratica qualsiasi sia la situazione da affrontare, sia essa pratica (dettagli di implementazione) o architetturale (design dell’applicazione).