Gestire una marcatura HTML obsoleta o comunque una zuppa di tag è qualcosa che prima o poi capita a tutti. In genere si tratta di una fase preliminare prima del redesign completo di un sito. Spesso il cliente ha una scadenza urgente e non c'è il tempo materiale per cambiare radicalmente la struttura del sito. Quindi ecco una forzata full-immersion nella marcatura degli anni Novanta.
Nessun DOCTYPE
Il DOCTYPE è assente in questo tipo di struttura. Ciò significa che i browser visualizzeranno le pagine in modalità retrocompatibile, ossia in quirks mode. L'errore che si commette in questi casi è quello di aggiungere il DOCTYPE.
Perchè è un errore? Perchè senza DOCTYPE i browser riescono a gestire meglio una marcatura caotica, mentre se specifichiamo una DTD, questi ultimi cercheranno ovviamente di correggere gli errori nel DOM e questo potrebbe creare dei problemi di visualizzazione.
Se invece utilizzate una libreria JavaScript, allora dovete aggiungere il DOCTYPE per permettere alla libreria di funzionare al meglio.
Tag presentazionali
In questo tipo di pagine abbondano tag presentazionali come font o center. Invece di perdere inutilmente del tempo cercando di modificare tutti i tag, potete usare i CSS per uniformarne la presentazione:
font[face],
font[face][size],
font[face][size][color] {
color: #000 !important;
font: normal 16px Arial, sans-serif !important;
}
Ricordate quindi che i tag presentazionali possono essere controllati con i CSS.
Tabelle
In uno scenario del genere le tabelle vengono usate a scopo di layout. Come tali, non è possibile aggiungere degli stili CSS tali da modificarne in qualsiasi modo il rendering.
Non è un'affermazione esagerata: in pagine obsolete la struttura DOM è del tutto caotica, quindi sperare di poter sistemare le cose con delle regole di stile è pura utopia.
Quello che possiamo fare è controllare lo spazio intorno ai blocchi delle tabelle. C'è poi il problema delle immagini all'interno delle tabelle. Essendo in quirks mode, i browser non applicheranno lo standard CSS per quanto riguarda lo spazio bianco intorno alle immagini.
Come ha suggerito Eric Meyer, occorre trasformare le immagini in elementi di blocco:
td img {
display: block;
}
C'è però un problema: le tristemente famose GIF spaziatrici di un pixel. Se trasformiamo tutte le immagini in blocchi, anche queste immagini saranno influenzate dai nostri stili. Purtroppo in questo caso i CSS possono fare poco, a meno che la marcatura di queste immagini non abbia tratti comuni:
td img[src$="1x1.gif"] {
display: inline;
}
Questa soluzione funzionerà se e solo se le GIF spaziatrici sono accomunate da una struttura HTML comune.
Codifica delle pagine
Quasi un anno fa ho dovuto appunto gestire uno scenario di questo genere con l'aggiunta della localizzazione delle pagine in cinese e russo. In tal senso è di fondamentale importanza che:
- Le pagine siano codificate e salvate in UTF-8
- Sia presente il meta tag della codifica.
Quindi:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
Dovete sempre verificare che il vostro editor salvi le pagine nella codifica specificata.
Conclusione
La marcatura obsoleta è una piaga ancora dura da debellare. Ma con un pò di pazienza e attenzione possiamo gestire al meglio anche una situazione non ottimale come questa.