Articolo in origine scritto per
css-d wiki,
un 'archivio a lungo termine' della mailing list
css-discuss.
I bug dei CSS possono essere difficili da isolare in modo osceno, specie quando si trovano nel mezzo di una pagina complessa e vasta con molti fogli di stile esterni. Oltre a questo vi è il fatto che pochi web designer hanno abbastanza esperienza per essere sicuri che quello che vedono È davvero un bug e non un errore nella stesura del codice.
Spesso la gente, quando si trova di fronte ad un bug misterioso, ci si butta alla cieca, e solo per pura fortuna troveranno una risposta. Così non va.
Seguendo la procedura riportata di seguito, si può ottenere rapidamente una chiara comprensione del problema, liberando così il web designer dall'onere di trovare una scappatoia o di evitare il bug in toto.
Troppo spesso questa fase non viene seguita, il che è una vergogna, poichè la maggior parte dei bug misteriosi sono semplicemente dovuti a errori nel codice o nella digitazione. Per fortuna, sono disponibili strumenti di validazione online (HTML, CSS). Questi strumenti metteranno in luce errori nella validazione, e daranno anche degli avvertimenti sul codice qualora questo può causare dei conflitti con i fogli di stile utente et similia. Attenzione comunque: sono noti anche casi di errori anche con un codice apparentemente valido. Questo è abbastanza raro, comunque.
Se tutto il CSS della pagina è contenuto nel documento sorgente, o se si trova all'interno di un solo file .css esterno, allora andate alla fase successiva. Altrimenti, è meglio inserire il CSS in un singolo documento.
Nota: Assicuratevi di avere copie di tutti i documenti prima di iniziare, non dopo, quando è troppo tardi.
Dopo aver tagliato ogni collegamento esterno, salvate e visualizzate la pagina. Se il collegamento è rimosso e il bug scompare, incollate il file .css nella locazione del collegamento. Se il collegamento è tagliato e il bug persiste, andate al collegamento successivo. Nel caso del tag <link>, il nuovo CSS incorporato deve essere racchiuso in <style></style>. Importante: ogni file .css esterno deve essere collocato nella stessa locazione del collegamento che lo richiama nella pagina.
Se non ci sono più file .css esterni e il bug è ancora presente, è tempo di iniziare il vero lavoro.
Qui si tratta di tagliare sezioni di codice, salvare il file, e vedere se il bug è scomparso o meno. Se il bug è scomparso, incollate la sezione appena tagliata e tagliate la sezione successiva. Ovviamente, se il bug è ancora lì, non incollate la vecchia sezione di nuovo, ma passate alla successiva. Questo metodo si applica sia al CSS che all'HTML. Fare prima l'uno o l'altro dipende da voi.
Un metodo alternativo è quello di circondare le sezioni di codice con dei commenti. Questo vi semplifica la vita se dovete recuperare il codice nel caso abbiate 'perso' il bug e il sorgente risulti confuso, anche se è fin troppo facile annidare per sbaglio i commenti (non buono). Questo metodo non è veloce come il primo.
Dovete tenere a mente anche tutti i CSS 'inline' all'interno dell'HTML, e trattarli come il CSS incorporato. Se tagliate una regola di stile inline, e il bug ne risulta influenzato, incollatela nell'elemento head all'interno della regola appropriata e dopo le altre proprietà che si trovano in quella regola. Questo dovrebbe prevenire ogni alterazione nella cascata. Non dimenticate di visualizzare la pagina, tanto per essere sicuri.
Ricordate che qui il nostro obiettivo è quello di mantenere il bug presente mentre rimuoviamo quanto più codice possibile. Man mano che si va avanti le porzioni di codice si fanno sempre più piccole. Passate dall'HTML al CSS e viceversa, e non fermatevi finchè non c'è rimasto neppure un solo bit di codice che possa essere rimosso senza perdere il bug.
A questo punto la pagina è quello che si dice un 'test case minimale'. Ora potete aver risolto il problema e avergli detto addio, ma se non è così, fate un passo indietro e date un'occhiata a fondo al codice e alla pagina. Qui è dove la conoscenza del codice, le capacità di analisi e un osservazione acuta danno i loro frutti. Potreste 'giocare' col codice o andare su una buona risorsa come il W3C, o un pò l'uno o un pò l'altro. È fatta, comunque: a questo punto avrete imparato, garantito.
Come ultima spiaggia c'è sempre la mailing list css-discuss. Ogni bug che può sopravvivere a questo trattamento e continuare a ridersela, mi presenterà come una persona davvero in gamba ai suoi amici. E non dover mettere le mani su una montagna di documenti è davvero una gran cosa, prendetemi in parola. Sotto ora! Voglio dire, sbrigatevi ! Bè, lo sapete quello che voglio dire.
Holly e John
Contatta Holly
Contatta John
Špositioniseverything
Ultimo aggiornamento: 2 febbraio 2003
Creato nel Giorno della Marmotta (2 febbraio), 2003