February 22
Costruire un progetto Web con HTML e Cascading Style Sheets (CSS) è piuttosto semplice, a patto che si bastone con un browser. Troppo spesso, però, quando si visualizza il disegno perfetto in un browser diverso, si vede spazi indesiderati brutti o elementi sovrapposti. Microsoft e Mozilla - per non parlare di Apple, Opera e Google - semplicemente non può essere d'accordo su un comportamento di default per alcune proprietà CSS, in particolare imbottitura e dei margini, in modo da web designer sono quasi sempre costretti ad impiegare soluzioni e trucchi.
IE e Firefox hanno ciascuno fogli di default stile cui si applicano quando nessun altro stile è presente. In questo modo, una pagina HTML semplice, di una antica varietà creato prima che ci fosse CSS, sarà ancora visualizzare il testo essere letti, avendo, ad esempio, lo spazio bianco tra i paragrafi. Il problema è che i vari browser hanno diversi fogli di stile predefinito. Nel caso del tag paragrafo "<p>," IE visualizza un margine solo nella parte inferiore, mentre Mozilla mostra margini nella parte superiore e la parte inferiore. A complicare ulteriormente le cose, altri browser usano padding piuttosto che i margini per creare lo spazio bianco tra gli elementi.
Per rimuovere il comportamento predefinito di qualsiasi elemento in qualsiasi browser, un progettista deve semplicemente impostare esplicitamente sia il suo margine e padding a 0 nella parte superiore del foglio di stile o pagina HTML. Ad esempio, per ripristinare il tag di paragrafo, sono i seguenti:
p {margin: 0; padding: 0}
Ora tutti gli elementi di paragrafo verranno visualizzati senza imbottitura e nessun margine meno che non vengano impostate in modo esplicito.
Una risposta a incongruenze del browser con margini e padding è quello di strappare tutto e ricominciare da capo. CSS offre un modo per fare questo. Nella parte superiore della pagina o foglio di stile, è sufficiente includere questa dichiarazione:
* {Margin: 0; padding: 0}
Ora, lo spazio bianco dichiarato dal foglio di stile predefinito del browser verrà rimosso per tutti gli elementi. Questo vi darà un maggiore controllo sull'aspetto del vostro disegno in tutti i browser. Naturalmente, ciò significa anche se si vuole margini o padding tra i paragrafi, o qualsiasi altro elemento, è necessario metterlo lì da soli con dichiarazioni di stile aggiuntivi.
Mentre la soluzione di reset globale funziona perfettamente su maggior parte degli elementi, ci sono alcuni effetti collaterali indesiderati. In Mozilla, pulsanti che una volta erano animati quando il mouse su o depresso, non saranno animate più. Al fine di ripristinare qualsiasi tipo di effetto, si dovrà progettare e realizzare il proprio. Inoltre, i margini all'interno di elenchi a discesa in Mozilla scompariranno e sarà difficile ripristinare senza alterare la visualizzazione in altri browser. Pertanto, se una pagina utilizza un sacco di elementi del modulo, può essere più saggio di non utilizzare il metodo di reset globale, ma un ripristino più selettiva dei soli elementi che sono la visualizzazione in modo non corretto in alcuni browser.
Un altro problema possibile con la soluzione globale bianco ripristino dello spazio è la prestazione. Dal momento che un reset globale viene applicato indistintamente a tutti gli elementi di una pagina web, anche quelle che potrebbero già avere margini impostato su 0 o il cui comportamento predefinito è accettabile sia in IE e Firefox, si sta eseguendo, le operazioni in più inutili. Mentre la maggior parte dei browser di oggi sono abbastanza veloce che un ritardo minuscola nel rendering pagina non sarà mai evidente per gli utenti finali, alcuni progettisti si sentono ancora come un reset globale è eccessivo e solo raccomandare il ripristino elementi specifici quando il loro comportamento di default sta causando problemi.