L'ultima volta che sono andato a fare un picnic, ho meticolosamente messo tutto a prova di formiche. Ma non importava: quei piccoli bastardi si presentavano ovunque. La stessa cosa può accadere a un codice HTML scritto in modo impeccabile: anche se sei sicuro che il tuo codice sia perfetto, un browser può devastare il tuo design creato con cura.
Ci sono tutti i modi in cui i bug possono insinuarsi nelle tue pagine web. Il carattere piccolo che sembra così pulito su un PC potrebbe sembrare minuscolo su un Mac. Le righe spaziatrici che hai aggiunto tra le sezioni di una pagina potrebbero scomparire in Netscape Navigator. O i titoli e sottotitoli esattamente proporzionati su una pagina (come ‹dimensione carattere=4›, ‹dimensione carattere=3›, O ‹dimensione carattere=2› ) potrebbe avere un aspetto diverso su macchine diverse.
È facile presumere che la causa risieda nelle tue capacità di scrittura HTML, dopo tutto, chi non ha commesso un errore evidente nel proprio codice almeno una volta? Ma a volte è colpa del browser. I browser elaborano e leggono l'HTML in modo diverso e ciò può influire sul modo in cui viene visualizzata la pagina. Inoltre, gli utenti potrebbero aver regolato le impostazioni dei caratteri dei loro browser (alcune persone preferiscono leggere tutto in Courier a 16 punti) e questo può far impazzire i tuoi progetti.
Gli sviluppatori Web affrontano la sfida di creare pagine che chiunque, utilizzando qualsiasi browser su qualsiasi piattaforma, possa leggere. Quindi come puoi farlo senza guidare te stesso buggy? È facile: ricorda quali sono i più grandi bug di rendering e risolvili. Questo articolo identifica alcuni dei problemi più comuni e mostra come aggirarli in HTML. (Ho incluso righe di HTML per illustrare i miei punti, ma se vuoi vedere il codice completo, vai a "Codice completo".)
Problema: caratteri incoerentiGli utenti scherzano con le impostazioni dei caratteri dei loro browser per un paio di motivi: legioni di sviluppatori web sono entrati in gioco amore con i caratteri piccoli e Microsoft Internet Explorer ha aggiunto i pulsanti per i caratteri più grandi e più piccoli allo strumento del browser sbarra. Di conseguenza, molti visitatori Web stanno annullando le minuscole specifiche dei caratteri dei designer facendo clic sul pulsante Più grande fino a quando non riescono a leggere il testo. Questo può rendere un layout orribilmente sproporzionato, con spazi di riga gonfiati e sottotitoli gravemente spezzati.
Soluzione: utilizzare tag HTML flessibili L'unico modo in cui puoi assolutamente garantire un aspetto coerente del testo nei browser dei tuoi visitatori è trasformare ogni pagina in un unico grande file GIF, altamente poco pratico. Una soluzione più realistica consiste nel prevenire i contrattempi dei caratteri semplificando l'HTML. Se vuoi un testo piccolo, usa il
Se vuoi incorporare una varietà di dimensioni dei caratteri in una pagina, usa il
In teoria, il primo elemento di una pagina Web, che sia una tabella, un grafico o qualcos'altro, dovrebbe utilizzare l'angolo in alto a sinistra di una finestra del browser come punto di origine. È vero, ma non è esatto. I browser aggiungono spazio che fa migrare il layout a diversi pixel dall'angolo (vedere "Layout alla deriva"). Se è importante che il tuo layout inizi nell'angolo, senza spazi sopra o a sinistra, questo offset del browser potrebbe rovinare l'intero design.
 |
 |
Disposizione alla deriva Per evitare che i browser spostino il layout di diversi pixel in basso e in alto (a destra), aggiungi gli attributi di margine ( larghezza margine, altezza margine, margine sinistro, margine superiore ) al tuo codice HTML. |
La quantità di spazio extra che un browser aggiunge al tuo layout dipende dalla piattaforma dell'utente: su Mac, se stai visualizzando una pagina con Navigator o Internet Explorer, il layout si sposterà di 8 pixel in basso e di 8 pixel in alto Giusto. Gli utenti di PC se la passano anche peggio: l'offset in Internet Explorer per PC è di 10 pixel in basso e 15 a destra.
Soluzione: aggiungere gli attributi di margine L'offset del browser è uno dei problemi di progettazione più facili da aggirare: basta aggiungere gli attributi di margine al tuo
marginwidth determina quanti pixel di spazio ci sono tra il bordo sinistro di una finestra del browser e gli elementi all'interno del corpo di un documento HTML.
marginheight imposta il posizionamento degli elementi rispetto alla parte superiore del browser.
margine sinistro dice al browser la larghezza in pixel del margine sinistro (simile al file marginwidth attributo).
margine superiore dice al browser la larghezza in pixel del margine superiore (simile al file marginheight attributo).
Anche se sembra esserci una duplicazione nei tag degli attributi, sono necessari tutti e quattro perché Internet Explorer 3.0 supporta il file marginwidth E marginheight mentre i browser 4.0 supportano i tag margine sinistro E margine superiore tag. Sfortunatamente, se i tuoi utenti accedono al tuo sito con Navigator 3.0, sei sfortunato: non c'è modo di sbarazzarsi dell'offset con quel browser.
Problema: riduzione delle celle della tabellaLe tabelle HTML sono state progettate per consentire agli sviluppatori Web di formattare ordinatamente i dati tabulari; non lo sei Veramente dovrebbe usare le tabelle per controllare il layout della pagina. Ma ciò non significa che non possiamo lamentarci del comportamento scorretto dei nostri tavoli usati in modo improprio.
Una delle lamentele più comuni sulle tabelle è che le celle delle tabelle non mantengono le loro dimensioni. (Questo tende a influenzare i visualizzatori di Navigator più spesso rispetto alle loro controparti di Internet Explorer.) Quando scrivi una tabella, dovresti impostare sia la larghezza della tabella che le larghezze del suo componente cellule; questo aiuta il rendering della tabella rapidamente, perché il browser sa quanto deve essere larga ogni cella. Altrimenti, deve leggere il contenuto della tabella e provare a ridimensionare le celle in proporzione.
Ma Navigator potrebbe ancora incorrere in alcuni problemi con le tue tabelle, a volte anche riducendo le celle. Quando il contenuto di una cella non è largo quanto la cella stessa, il browser aggancia la cella alla larghezza del contenuto.
Soluzione 1: Rendi il contenuto della cella della giusta dimensioneUn modo per assicurarsi che una cella non si riduca è riempirla con un contenuto che costringerà una cella a mantenere le sue dimensioni, come nelle celle di esempio seguenti.
Campione 1: ‹td larghezza=”20″› ‹/td›
Campione 2: ‹td width=”400″›‹img src=’banner.gif’ width=”400″›‹/td›
Il primo esempio mostra come utilizzare gli spazi unificatori (   ), utili se utilizzi una cella per lo spazio o per un margine. Il secondo esempio contiene un grafico della stessa larghezza della cella.
Soluzione 2: Rendi flessibile il tuo layoutIl secondo modo per aggirare il problema della riduzione della cella è modificare il layout in modo che la dimensione precisa della cella non abbia importanza. Vedere "Il layout flessibile" per un esempio di un tavolo che può espandersi e contrarsi secondo necessità.
Problema: contenuto delle celle disallineatoUn'altra lamentela comune sulle tabelle è che i contenuti di una cella non si allineano come previsto. Ad esempio, potresti volere che i contenuti di due celle siano adiacenti, ma ti ritroverai con uno spazio bianco tra le celle.
Soluzione 1: non accontentarti degli attributi di tabella predefinitiI browser utilizzano per impostazione predefinita i seguenti attributi: table cellpadding 1 pixel, table cellspacing 1 pixel, valign=top, E allinea=sinistra. Queste impostazioni predefinite possono rovinare l'aspetto di una tabella, quindi spetta a te specificare i valori corretti per il tuo layout. Vedere "Allineamento maligno" per un esempio di come regolare gli attributi.
Soluzione 2: compatta il tuo codiceDopo aver modificato gli attributi della tabella, il risultato finale potrebbe funzionare magnificamente in Internet Explorer ma va comunque storto in Navigator, perché Navigator inserisce uno spazio bianco extra alle interruzioni di riga e duro ritorna.
Puoi eliminare questo spazio bianco compattando il tuo codice: eliminando interruzioni di riga extra, ritorni a capo e tabulazioni. La compattazione non influisce sul formato del testo all'interno
È più difficile da leggere per le persone, ma molto meglio per i browser. Suggerimento: se stai utilizzando BBEdit di Bare Bones Software, puoi utilizzare l'opzione Formatta testo (nel menu Utilità) per compattare il codice; in caso contrario, dovrai eliminare gli spazi bianchi da solo.
Il segreto per pagine prive di bugIl vero segreto per scrivere pagine prive di bug è semplice: evitare di creare pagine complicate. Usare l'HTML come linguaggio di progettazione per controllare gli attributi visivi di una pagina è nel migliore dei casi una proposta complicata, e più trucchi usi, più è probabile che incontri un bug.
Questo non ha lo scopo di scoraggiarti dallo spingere i limiti del design con l'HTML. Se sei veramente impegnato a eseguire un design all'avanguardia online, tuttavia, potresti prendere in considerazione l'idea di utilizzare Macromedia Flash o qualche altra tecnologia che ti dà un grande controllo sull'aspetto visivo del tuo Pagine web.
D'altra parte, c'è un certo fascino zen nello scrivere un semplice HTML: puoi concentrarti sulla creazione del tuo le pagine sembrano attraenti e originali e stai certo che sembreranno coerenti su diversi browser.
La senior editor online LISA SCHMEISER preferisce la codifica all'aperto. È autrice di The Web Design Templates Sourcebook (New Riders, 1997) e The Complete Website Upgrade & Maintenance Guide (New Riders, 1998).aprile 2000 pagina: 106
Codice completo Codice offset del browserIl documento HTML che ho usato per mostrare l'offset del browser sopra era scritto così:
Ora, la versione nuova e non offset si presenta così:
Ecco la tabella prima:
 |
 |
 |
 |
Ecco la tabella successiva:
|
|
|
|
Per eliminare lo spazio indesiderato tra il contenuto della cella, segui questi passaggi (per l'HTML completo prima e dopo, vedi "Codice completo"):
 |
|
Prima |
Dopo |
Fare in modo che i visitatori del tuo sito vedano esattamente il design che intendevi può essere complicato. A volte creare un design che può cambiare a seconda di chi visita il tuo sito è più facile. Nel caso delle tabelle, un'opzione è quella di creare una riga di celle che può ridursi.
In questo esempio, volevo avere una tabella con uno spazio bianco sul lato sinistro, quindi ho formattato la colonna di sinistra in questo modo: ‹td larghezza=”20″› ‹/td›. Scrivendo il codice in questo modo, ho integrato la flessibilità: la colonna sarà larga 20 pixel o si ridurrà alla dimensione del suo contenuto: uno spazio unificatore (   ). La dimensione dello spazio unificatore dipende dalle impostazioni della dimensione del carattere nel browser dell'utente.
 |
Supera in astuzia il browser Anche un browser che restringe la colonna di sinistra in questa tabella non rovinerà il layout. Per assicurarti che la colonna non scompaia, però, devi inserire uno spazio unificatore. |
I browser che leggono e impostano le dimensioni delle celle in base alla loro larghezza specifica imposteranno la larghezza della colonna a 20 pixel; i browser che visualizzano le dimensioni delle celle in base solo alla larghezza del contenuto della cella ridurranno la colonna alla dimensione dello spazio unificatore. Poiché lo scopo della colonna è fornire un buffer di spazio bianco sul lato sinistro della pagina, la pagina viene visualizzata in modo accettabile su qualsiasi browser.