Ieri avevo 2 minuti liberi, e ho pensato che era il momento giusto per un esperimento. Quanto tempo ci avrei messo per trasformare questo blog, il cui HTML e' stato sviluppato assolutamente di getto, in xhtml strict valido? Risposta: ci ho messo circa 10 minuti. I problemi erano relativi ad un paio di <tag /> non chiusi, la action del form era POST invece che post... e (quale orrore!) aling="left" in alcune immagini invece di utilizzare il posizionamento con float:left.

Differenza tra valido e funzionante

Il fatto che questo blog o qualunque altro sito sia xhtml strict non significa molto dal punto di vista della compatibilita' con i diversi browser. Questo e' vero, pero'... se non si utilizza il giusto doctype e ci sono errori di markup (ad esempio annidamenti non valide di elementi HTML) e' piu' difficile far funzionare bene le cose ovunque: non solo i browser non implementano tutti esattamente la specifica, ti ci metti pure tu a violarla avventurandoti nel sentiero del come si comporta il browser xyz con questa funzionalita' non specificata formalmente da nessuna parte.

Come se non bastasse gli errori di markup o di doctype possono causare un sacco di problem con Javascript per colpa di un DOM che non funziona come ci si aspetta. D'altra parte fissarsi sulla validazione puo' essere una perdita di tempo mentre si sviluppa, perche' bisogna essere molto piu' concentrati sul fatto che il sito funzioni bene con almeno Firefox, IE, Opera, Konqueror e Safari, nel tentativo di coprire gran parte del mercato. C'e' un modo per mediare tra questi divesi aspetti.

Poche regole, ma buone

Eppure come ha dimostrato il mio piccolo esperimento questo blog che e' stato scritto senza pensare alla validazione poteva essere trasformato in un documento valido nel giro di 10 minuti. Se si seguono alcune regole, si finisce per scrivere xhtml piu' o meno valido che non crea troppi problemi con di compatibilita'. Cerco di elencarne alcune che io stesso tento di seguire:

• Utilizzate sempre il giusto DOCTYPE.
• Cercare di creare la struttura del sito utilizzando dei DIV posizionati tramite i CSS
• Non creare troppe classi, utilizzare i selettori dei CSS nella forma #id nometag, e sfruttare il fatto che gli elementi possono avere una lista di classi e non una sola. Per cui se avete molte cose con il colore di sfondo aziendale puo' valere la pena di creare una classe ourbgcolor e aggiungere tale classe ogni volta che serve invece di duplicare le informazioni in giro per il CSS.
• Usare le tabelle quando servono! Se una cosa e' una tabella, e non state usanto TABLE per creare layout, e' sacrosanto utilizzare una tabella! Vi evita un sacco di problemi, funziona ovunque, ed e' valido.
• Separare il javascript dall'HTML cosi' come si fa con lo stile. Quando e' possibile e pratico invece di fare qualcosa come <... onclick="..."> date un ID all'elemento e a fine pagina aprite un tag <script> utilizzando document.getElementById('id').onclick = function() { ... }.
• Non dimenticate di chiudere in maniera corretta i tag come br o img, di utilizzare alt nelle immagini, evitate align in favore della proprieta' text-algin o float in base alla necessita'.

Di tanto in tanto provate a validare il sito e sistemate quello che non va bene, il risultato e' che quando un documento e' valido potete usare la validazione come test. Se avete un problema di posizionamento su una pagina che prima validava in maniera corretta riprovate la validazione, magari avete dimenticato di chiudere un tag o ci sono tag annidati non validi. Se il documento non e' valido avrete 100 warning ed errori di tutti i tipi ed e' difficile essere aiutati in queste condizioni, se invece il documento e' valido potreste trovare il reale problema di posizionamento con un click.