Il browser web di oggi ha fatto molta strada dai pazzi giorni in cui qualsiasi tipo di coerenza tra browser era un pio desiderio. I web browser di oggi sono tutti molto conformi agli standard. Giocano bene insieme e offrono una visualizzazione della pagina abbastanza coerente attraverso i vari browser. Ciò include le ultime versioni di Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari e i vari browser presenti sulla miriade di dispositivi mobili utilizzati per accedere al sito Web oggi.
Nonostante i progressi siano stati fatti sicuramente quando si tratta di browser Web e di come vengono visualizzati i CSS, ci sono ancora incongruenze tra queste varie opzioni software. Una delle incoerenze comuni è il modo in cui quei browser calcolano margini, spaziatura e bordi per impostazione predefinita.
A causa di questi aspetti dell'effetto del modello scatolato, tutti gli elementi HTML e perché sono essenziali nella creazione di layout di pagina, una visualizzazione incoerente indica che una pagina può apparire in un browser, ma in un altro in un modo leggermente diverso. Per combattere questo problema, molti web designer normalizzano questi aspetti del modello di box. Questa pratica è anche nota come "azzeramento" dei valori per margini, spaziatura e bordi.
Una nota sui valori predefiniti del browser
Tutti i browser Web hanno impostazioni predefinite per determinati aspetti di visualizzazione di una pagina. Ad esempio, i collegamenti ipertestuali sono blu e sottolineati per impostazione predefinita. Questo è coerente su vari browser e, sebbene sia qualcosa che la maggior parte dei progettisti modifica per adattarsi alle esigenze di progettazione del proprio progetto specifico, il fatto che tutti stiano iniziando con le stesse impostazioni di default rende più facile apportare queste modifiche. Purtroppo, il valore predefinito per margini, spaziatura e bordi non gode dello stesso livello di coerenza cross-browser.
Normalizzazione dei valori per margini e riempimento
Il modo migliore per risolvere il problema del modello di box incoerente è quello di impostare tutti i margini e i valori di padding degli elementi HTML su zero. Ci sono alcuni modi in cui potresti fare questo per aggiungere questa regola CSS al tuo foglio di stile:
Questa regola CSS utilizza il carattere * o carattere jolly. Quel personaggio significa "tutti gli elementi" e fondamentalmente seleziona ogni elemento HTML e imposta i margini e il padding su 0. Anche se questa regola è molto particolare, poiché è nel foglio di stile esterno, avrà una specificità più alta rispetto al browser predefinito i valori lo fanno Dal momento che quelle impostazioni predefinite sono ciò che stai sovrascrivendo, questo stile eseguirà ciò che stai cercando di fare.
Un'altra opzione è applicare questi valori agli elementi HTML e body. Poiché tutti gli altri elementi della pagina saranno figli di questi due elementi, la cascata CSS dovrebbe applicare questi valori a tutti gli altri elementi.
In questo modo avvierai il tuo progetto nello stesso punto su tutti i browser, ma una cosa da ricordare è che una volta girati tutti i margini e il riempimento, dovrai riattivarli selettivamente per parti specifiche della tua pagina web per ottenere l'aspetto e senti che il tuo design richiede.
frontiere
Potresti pensare "ma nessun browser ha un bordo attorno all'elemento body di default". Questo non è assolutamente vero. Versioni precedenti di Internet Explorer hanno un bordo trasparente o invisibile attorno agli elementi. A meno che non imposti il bordo su 0, quel bordo può rovinare i tuoi layout di pagina. Se hai deciso che continuerai a supportare queste versioni antiquate di IE, dovrai risolvere questo problema aggiungendo quanto segue al tuo corpo e agli stili HTML:
HTML, corpo {margine: 0px;imbottitura: 0px; bordo: 0px;} Simile a come hai disattivato i margini e il padding, questo nuovo stile disattiva anche i bordi predefiniti. Puoi anche fare la stessa cosa usando il selettore di caratteri jolly mostrato in precedenza nell'articolo. Articolo originale di Jennifer Krynin. Modificato da Jeremy Girard il 27/09/16.
