26 Settembre ’06 - Publicato in Italiano il 07 Ottobre ’06

12 Lezioni per chi ha paura dei CSS e degli Standard

di Ben Henick, traduzione Giorgio Cardellini

"Translated with the permission of A List Apart Magazine."

Quando ho avuto a che fare per la prima volta con i fogli di stile (CSS) nell'autunno del 1998 il mio principale problema era riuscire a far muovere le cose o farle cambiare di colore, soltanto sei mesi più tardi ho incominciato ad utilizzare i CSS per controllare il Layout e non i comportamenti.

Ho impiegato due anni per liberarmi dalla prigione delle Tabelle e ce ne son voluti altri due prima che riuscissi a creare layout che originariamente erano stati pensati per le tabelle.

Anche se a quei tempi dovevo trattare con mezzi anacronistici quali Netscape 4.0 e Internet Explorer 5.0, impiegai tantissimo tempo a prender padronanza con i CSS.

Si trovano tantissimi libri e articoli in giro compresi quelli scritti in questa rivista (a list apart). Molti di questi lavori sono rivolti a sviluppatori inesperti che tentano di imparare tramite gli esempi letterali, ma pochi di loro ammetterebbero che usare i CSS per creare siti "amichevoli" richiede un'esperienza che persino molti sviluppatori esperti non hanno. Tutto questo azzoppa un sacco di persone talentuose e per ben due anni ho cercato le parole che avrebbero alleviato i loro dolori.

I pianti di dolore che ora sento da parte di altri sviluppatori sono soltanto l'eco dei miei che feci anni fa. Così penso che sia meglio raccontare quello che ho imparato in questi anni.

Lezione No 1: Tutto quello che sai è sbagliato...

Visto che siamo sulla stessa lunghezza d'onda, vorrei sottolineare il fatto che se stai iniziando a lavorare con i CSS, quello che hai imparato fin ora probabilmente ti sembrerà inutile, o anche peggio. C'è un problema che bisogno tirar fuori e sistemare con rapidità e clemenza.

Sicuramente sarai ben ferrato in soggetti come design, ottimizzazione, esperienza utente, programmazione, e project management. Comunque i presupposti sui quali sei solito applicare queste conoscenze, quando passi alle tecniche di produzione secondo gli standard, cambiano, (avvolte drammaticamente)

Come risultato, l'unica cosa che puoi fare è gettar via tali presupposti e aspettative, prendere una bella lavagna pulita e cominciare ad usarla. Rimboccati le mani e impara qualcosa di nuovo. Quando si parla di Layout e rappresentazione, cerca di togliere dal tuo vocabolario "ma" e "forse", sostituiscili con "come" e "perchè" e impegnati a raggiungere gli obbiettivi del progetto.

A livello di realizzazione, questo è come la differenza tra il markup tabellare e quello semantico:

Infine, non dimenticare che ci son cose che possono essere fatte con il layout a tabelle e altre con i CSS. Alcune di queste capacità si escludono a vicenda ma questo non sminuisce il potere dei CSS.

Lezione No 2: Senza soffrire non riuscirai ad avere lo stesso layout ovunque...

Ci sono enormi differenze tra i diversi motori del rendering, e le specifiche W3C giustificano queste differenze. Puoi usare dei trucchi, accomodare qualcosa, inventare codice, ma se vuoi preservare la tua vita sociale impererai a lasciar stare le piccole differenze e a convincere il tuo committente a fare altrettanto.

Lezione No 3: Sarai costretto a scegliere tra l'astratto e ciò che è praticabile

La vita e il lavoro spesso diventano una serie di compromessi, specialmente quando si è in un momento di transizione. La cosa migliore che puoi fare perché le cose girino a tuo favore è pianificare efficacemente.

Di volta in volta incontrerai situazioni in cui dovrai scegliere il male minore o addirittura situazioni in cui non avrai questa scelta. Come quei siti che non passano il test dell'accessibilità o il test di validazione e sarai obbligato ad accettare questi risultati anche quando quello che hai fatto è assolutamente corretto.

Ricorda il valore degli obbiettivi del tuo progetto. Riconosci la politica del tuo posto di lavoro. Decidi cos'è veramente importante per te come professionista. Scegli il terreno di battaglia, affronta la lotta... combatti ciò che puoi vincere.

Lezione No 4: Se non c'è più niente da aggiungere, Non si ha la perfezione ma se non c'è più niente da tirar via, allora si.

Quando si producono siti che seguano gli standard la cosa più facile da fare è sostenere la vecchia concezione basata sulle tabelle, creando una sovrabbondanza di contenitori per gli elementi. Ma questo adattare il codice al design che sembra la cosa più naturale, rende inutile il tentativo di procedere secondo gli standard.

Non adattare niente, non aggiungere markup se il contesto non lo incoraggia. Per prima cosa concentrati sulle informazioni. Controlla se ci sono più contenuti che hanno la stessa funzione o si possono classificare allo stesso modo. Non aver paura di metterli in Divs e Spans che condividono la stessa classe in un modo che descriva la funzione o la classificazione a cui avevi pensato.

Se invece stai impazzendo con i divs perché vuoi mettere qualcosa in un certo punto ben preciso nel layout, è possibile che tu non stia pensando in maniere globale al tuo progetto e come conseguenza il codice sarà più difficile da sostenere del markup tabellare che stai provando a sostituire.

Mentre pensi alla prossima lezione ricorda... Ogni volta che riesci rimuovi i Tag superflui.

Lezione No 5: Alcuni siti sono come colonne di fumo

In molti casi, la persone responsabile della grafica e del design di un sito non si occupa degli altri aspetti. Se poi non si riesce a creare un sito rigoroso con schermate sufficientemente larghe si avrà un'unica composizione per troppe pagine e un sacco di lavoro per i produttori.

E' esperienza dello scrittore che un risultato del genere sia molto più comune nei piccoli progetti che nei grandi e che li porta a superare in modo spropositato il budget preposto. Invito il lettore a considerare ciò che questo implica.

Nel limite del possibile, incoraggia il graphic designer con cui lavori a rispettare indispensabilmente un pò di coerenza. Se i tuoi incoraggiamenti non hanno effetto, accertati che venga usato un ID unico per l'elemento Body di ogni pagina e goditi gli aspetti positivi: non c'è dubbio che sei in vita.

Lezione No 6: Tempi più lunghi sono inevitabili

Chi realizza i Browser ha avuto cinque anni per realizzare un motore per il rendering delle tabelle uniforme e stabile, e questo è stato reso più semplice dal fatto che prima del rilascio di Gecko e KHTML la maggior parte del motori del rendering avevano grandi punti in comune Mosaic ha dato la vita a Netscape e fu poi venduto alla Microsoft.

Lo stato attuale del rendering delle istruzioni CSS è comparabile al rendering delle tabelle nel 1998... quindi diamo tempo al tempo, e nel frattempo testiamo il layout diligentemente.

La buona notizia è che il tempo necessario a testare e debuggare il layout è recuperato poi dal minor tempo speso per il mantenimento, estensione e la revisione del sito.

Lezione No 7: L'ordinamento coerente ed assennato delle risorse è la cosa migliore

Tutta la tua premura sarà ricambiata se sviluppi siti che sono ancora leggibili quando rimuovi i fogli di stile (cioè che degradano bene). Fare questo porta tanti benefici, come questi:

• Un foglio di stile separato può preparare le pagina per la stampa
• I fogli di stile sono più facili da documentare, normalizzare e mantenere
• Diminuisce lo sparpagliamento del codice e lo scripting
• La navigazione via tastiera del sito è molto più semplice
• Quando il sito sarà riproggettato non ci sarà bisogno di toccarne il contenuto

Lezione No 8: I selettori a cascata sono l'inizio e la fine di regole CSS migliori

Quando si inizia a passare dalle tabelle ad una produzione compatibile con gli standard, non si impazzisce solo per i contenitori, ma anche per piazzare la varie classi e id in tutta la pagina.

Certo, non è sempre così. Per esempio, consideriamo un elemento che dovrebbe contenere i link di navigazione. Un errore molto comune tra i principianti è di costruire il tutto con dei DIV, questo offende i puristi del codice perché rende molto più difficoltosa la navigazione del sito con gli Screen Reader.

Dato che i DIV non sono la soluzione ideale, potremmo usare al suo posto l'elemento lista non ordinata (UL). Uno sviluppatore coscienzioso potrebbe mettere un ID nella lista per indicare la posizione nel menu di navigazione, e una classe per ogni link.

Comunque, in questo caso, ci basterà usare un ID. La rifinitura in questione è resa possibile da un selettore a cascata:

#nav a { color: red; }

Questo selettore dice: "tutti i link nel #nav dovrebbero essere rossi"

Ecco un esempio più complicato:

#bodycopy blockquote.critical {
float: right;
width: 30%;
padding: .5em;
margin: .5em;
}

Gli attributi sopra sarebbero applicati al BLOCKQUOTES assegnato alla classe critical, ma che appare anche dentro #sidebar, questo minimizza il numero di classe e id che dovrebbero essere usati.

In effetti i selettori a cascata, ti permettono di minimizzare le classi e quando vengono usati in combinazione con immagini di background e proprietà per il layout, rendono possibili effetti che le tabelle non potranno mai raggiungere.

Lezione No 9: Nel mondo reale, truccare i fogli di style è una scorciatoia

Si, truccare i fogli di stile è moderatamente irrispettoso della tecnologia che c'è sotto. Si, truccare i fogli di stile introduce la possibilità di avere incubi al rilascio di una versione più aggiornata del browser... come quando sarà rilasciato Internet Explorer 7. si, rende l'intero progetto un disastro che aspetta solo di realizzarsi.

Scegli tra trovare scuse per spiegare al cliente perché qualcosa si vede così male nel suo browser oppure semplicemente sistemalo, quest'ultima scelta comporta certamente meno dolori. truccare i fogli di stile rende la vita un sacco più facile ma solo se fatto in modo saggio e con gli appropriati avvertimenti !

Lezione No 10: Sistemare i bachi del rendering è come giocare a Whack-a-Mole

Con questo intendo dire che quando il bug in un browser viene sistemato, di solito il risultato è la scoperta di un nuovo bug in un altro browser(o una versione diversa dello stesso). Quando succede, aspettati di dover riesaminare tutti i tuoi foglio di stile o almeno una parte.

La buona notizia è che di solito c'è una soluzione a queste situazioni spiacevoli e la maggior parte delle volte può essere trovata cercando nel web stesso. Positioniseverything.net è una risorsa specializzata molto utile in questi casi.

Lezione No 11: Se stai affogando nei fogli di stile, controlla la width e height dell'acqua, floatta senza agitarti troppo e clear i tuoi problemi

Se lavori con i layout a colonna, le sorprese spiacevoli sono comuni. Il modo migliore per ottenere una colonna esteticamente piacevole e con risorse ben ordinate è usare l'attributo float. Comunque, affinché funzioni bene, tutte le tue colonne devono aver l'attributo width ben definito e, in alcuni casi, anche l'attributo height.

Inoltre, potresti ignorare la lezione N° 4 e creare il tuo Layout. Comunque, è un compromesso che ho menzionato nella speranza che venga usato soltanto dopo aver fatto il possibile per realizzare il tutto in un'altra maniera.

Lezione No 12: Le immagini di Background fanno la differenza

Grazie hai problemi del box model dei CSS e all'uso di layout elastici con molti bordi si può ottenere un vero disastro. Si raccomanda la sperimentazione personale, in particolare fate attenzione all'aspetto dei bordi.

Un'altra cosa per la quale credo l'uso delle immagini di background sia appropriata è la sostituzione del testo nelle testate. Facilitano gli Screen reader mantenendo un'elevata qualità della visualizzazione.

Per la cronaca, chi non è d'accordo dovrebbe sapere che non ho mai visto nessun utente navigare il web con i fogli di stile attivati e il caricamento delle immagini disattivato.

In conclusione

Le voci sul Web 2.0, i CSS, e la miriade di altri progetti possono diventare il noioso ruggito di chi a lasciato il la equipaggiato passato per seguire i cambiamenti dell'industria. E' mia speranza aiutare un pò di gente a trovare la strada per raggiungere la cima del mucchio che è il posto dove il web ha bisogno di vedervi.

Sull’autore

Undici anni dopo aver costruito il suo primo sito, Ben Henick è diventato un libero professionista, un membro di The Web Standards Project, anche se a volte parla troppo. Dal 2006 vive vicino Kansas City e cerca in continuazione nuovi clienti.