Mimicry Diario

Copia e incolla

Tempo fa avevo scritto un intervento sul blog di Html.it piuttosto polemico, in cui, sostanzialmente, accusavo gli sviluppatori di usare molto codice preso in prestito da altri. All'epoca non tenevo conto delle difficoltà che incontra chi inizia a lavorare con i CSS. Io stesso ho usato la tecnica del copia e incolla nei primi mesi del mio studio sui fogli di stile (nel 2005), quindi il mio intervento è stato anche ipocrita. Mea culpa.

Il problema è dello stesso tipo riscontrato nell'apprendimento della scrittura. Quando si impara a scrivere, nei primi tempi si copia soltanto e solo dopo un lungo esercizio ed una crescita intellettuale avviene il passaggio alla scrittura creativa e produttiva, per cui l'autore o l'alunno diventano produttivi e personali dopo questa fase. È una questione di didattica e non tanto di originalità. Dire che nell'apprendimento la fase dell'imitazione non esiste significherebbe negare una tappa ineludibile del cammino formativo di un essere umano.

Tuttavia, affinchè lo studio degli standard del Web diventi proficuo, è necessario abbandonare gradatamente questo approccio per giungere ad una propria maturità professionale. Ecco quindi un breve vademecum per la risoluzione dei problemi con i fogli di stile.

La marcatura

La prima cosa da cui bisogna partire è la scelta degli elementi che andranno a costituire il nostro layout. La scelta dovrebbe essere improntata ad un rispetto semantico del ruolo degli elementi (X)HTML e alla loro giusta collocazione nel flusso. Nello specifico, ecco alcuni consigli pratici che potrebbero risultare utili.

  1. Prima i contenuti

    I contenuti andranno posti prima di tutto il resto. Ciò permette una più agevole lettura da parte dei lettori di schermo ed una migliore indicizzazione.

  2. Evitare la ridondanza

    Si dovrebbero evitare di ripetere alcuni elementi la cui prima istanza è già sufficiente a chiarirne il senso. Esempi di tali elementi sono abbr, acronym, dfn, i quali, data la presenza dell’attributo title possono risultare fastidiosi se ripetuti più volte. Per esempio, se nel primo paragrafo ho specificato che l'acronimo CSS sta per "Cascading Style Sheets" è inutile ripeterlo ancora nel resto del documento.

  3. Rispettare la semantica

    Bisogna rispettare il ruolo che gli elementi svolgono all'interno del documento, senza alterarne la funzione a scopo presentazionale.

  4. Usare gli elementi in modo logico

    Gli elementi andrebbero usati seguendo una logica. Per esempio, per un menu di navigazione è più indicato usare un elenco piuttosto che inserire i link direttamente all’interno di un elemento di blocco (come un paragrafo).

Calcolare lo spazio

Nel layout con i CSS è fondamentale sapere sempre quanto spazio abbiamo a disposizione all'interno del layout. Il box model CSS si basa essenzialmente sulle operazioni di somma e sottrazione. Ci si ricordi sempre che le dimensioni complessive di un blocco contenitore sono date dalla somma dei margini, del bordo, del padding oltre che dalla larghezza e dall'altezza impostate esplicitamente. Attenzione inoltre alle misure relative (em) o percentuali (%): queste misure vengono automaticamente convertite in pixel al momento del rendering finale. Non è affatto vero che un box impostato in percentuale venga trattato in modo diverso dal browser. Le sue dimensioni si adattano si alla dimensione della finestra, ma tali dimensioni vengono calcolate nei corrispettivi pixel. Di fatto, un box in percentuale occuperà sempre una dimensione che viene resa in pixel. Questo è particolarmente vero nel caso delle immagini in percentuale, il cui rendering è sempre dipendente dalle dimensioni del loro blocco contenitore (e tali dimensioni, ricordiamolo, sono calcolate in pixel).

Bug e anomalie

Esiste un importante differenza tra un bug ed un anomalia: un bug è un esplicita violazione delle specifiche CSS, mentre un'anomalia è una differente interpretazione di queste ultime. Al primo tipo appartengono alcuni bug nel float di Internet Explorer 6 (ed inferiori), mentre al secondo alcune peculiarità di Explorer nel calcolo dell'indentazione negativa del testo o del posizionamento di un elemento flottato con un margine orizzontale negativo. Nel caso delle anomalie, le specifiche affermano che "possono esservi dei limiti nell’implementazione specifica", ossia che i browser possono comportarsi in modo non del tutto prevedibile.

Test e debugging

Sia che si tratti di un bug o di un anomalia, la cosa fondamentale è isolare il problema. Per far questo occorre individuare l’elemento affetto dal problema. Per esempio, se si lavora con Internet Explorer 7 (ed inferiori), gran parte dei problemi vengono causati dalla proprietà hasLayout. Per verificare se un elemento ha layout, è possibile usare il seguente pseudo-url JavaScript da inserire nella barra degli indirizzi:

  1. javascript:alert(document.all("id-elemento").currentStyle.hasLayout)

Se il risultato è true l'elemento ha layout, se false l'elemento non ha layout. Si tenga presente che tale proprietà si trasmette da genitore a figlio, quindi molto spesso si tratta di risalire l'albero del documento fino ad individuare l'elemento in questione. Un'altra cosa da tener presente è la modalità di rendering: spesso infatti alcuni bug di Explorer si presentano in modalità standard ma non in modalità quirks e viceversa. A questo punto si può isolare la parte di codice e gli stili relativi che la regolano e creare una pagina di test separata in cui testare varie combinazioni fino a trovare una soluzione. I CSS non dispongono di una modalità step-by-step di debugging, ma è possibile simularla usando i commenti:

  1. #box {
  2. /* width: 50%; */
  3. width: 49%;
  4. }

Possiamo in questo modo provare varie combinazioni tenendo traccia dei cambiamenti. Per Internet Explorer, la soluzione migliore per dare stili separati è quella dei commenti condizionali. Per gli altri browser possiamo utilizzare JavaScript. Per esempio, ipotizzando di dover dare degli stili solo ad Opera potremmo scrivere:

  1. if (window.opera) {
  2. var head = document.getElementsByTagName("head")[0];
  3. var css = document.createElement("link");
  4. css.setAttribute("href", "opera.css");
  5. css.setAttribute("rel", "stylesheet");
  6. css.setAttribute("type", "text/css");
  7. css.setAttribute("media", "screen");
  8. head.appendChild(css);
  9. }

I cosiddetti hack andrebbero evitati perché 1) spesso non sono validi e 2) rallentano il lavoro del browser in fase di parsing e 3) sono una soluzione a breve termine.