Današnji web preglednik je došao daleko od ludih dana gdje je bilo kakva konzistentnost cross-preglednika bila željna razmišljanja. Današnji web preglednici su svi vrlo usklađeni sa standardima. Oni lijepo igraju zajedno i daju prilično dosljedan prikaz stranice na različitim preglednicima. To uključuje najnovije verzije preglednika Google Chrome, Microsoft Edgea, Mozilla Firefoxa, Operaa, Safarija i raznih preglednika pronađenih na bezbroj mobilnih uređaja koji se koriste za pristup web stranici danas.
Iako je napredak svakako napravljen kada se radi o preglednicima weba i načina na koji oni prikazuju CSS, još uvijek postoje nekonzistentnosti između tih različitih softverskih opcija. Jedna od uobičajenih nedosljednosti jest način na koji ti preglednici izračunavaju margine, padding i granice prema zadanim postavkama.
Zbog tih aspekata okvira model utječe na sve HTML elemente, a budući da su neophodni za izradu izgleda stranica, nedosljedan prikaz znači da stranica može izgledati sjajno u jednom pregledniku, ali izgleda lagano u drugom. Za borbu protiv ovog problema mnogi web dizajneri normaliziraju ove aspekte modela kutija. Ova je praksa također poznata kao "nuliranje" vrijednosti za margine, padding i granice.
Napomena o zadanim postavkama preglednika
Svi web preglednici imaju zadane postavke za određene aspekte prikaza stranice. Na primjer, hiperveze su plave boje i podcrtane su prema zadanim postavkama. To je konzistentno u različitim preglednicima, i iako je to nešto što većina dizajnera mijenja kako bi odgovaralo dizajnu svojih projekata, činjenica da svi oni počinju s istim zadanim postavkama olakšava izvršavanje tih promjena. Nažalost, zadana vrijednost za margine, padding i granice ne uživaju istu razinu dosljednosti unakrsnog preglednika.
Normaliziranje vrijednosti za margine i padding
Najbolji način rješavanja problema nedosljednog modela kutija je postavljanje svih margina i vrijednosti padanja HTML elemenata na nulu. Postoji nekoliko načina na koje možete to učiniti dodavanjem ovog CSS pravila na svoj stilski list:
* {margin: 0; padding: 0; }Ovo pravilo CSS koristi znak * ili zamjenski znak. Taj znak znači "sve elemente" i temeljno bi trebao odabrati svaki HTML element i postaviti margine i padding na 0. Iako je ovo pravilo vrlo neodređeno, jer je u vašem vanjskom stilskom listu, to će imati veću specifičnost od zadanog preglednika vrijednosti. Budući da su te zadane postavke prepisivanje, ovaj će stil postići ono što postavljate.
Druga je mogućnost primijeniti te vrijednosti na HTML i elemente tijela. Budući da će svi ostali elementi na vašoj stranici biti djeca tih dvaju elemenata, CSS kaskada treba primijeniti te vrijednosti na sve ostale elemente.
html, tijelo {margin: 0; padding: 0; }To će započeti vaš dizajn na istom mjestu na svim preglednicima, ali jedna stvar koju trebate zapamtiti jest da jednom kada uključite sve margine i padding, morat ćete ih selektivno ponovno uključiti za određene dijelove web stranice kako biste postigli izgled i osjećaju da je vaš dizajn poziva.
granice
Možda mislite da "no preglednici nemaju granicu oko elementa tijela prema zadanim postavkama". Ovo nije strogo točno. Starije inačice programa Internet Explorer imaju prozirnu ili nevidljivu granicu oko elemenata. Ako ne postavite granicu na 0, ta granica može poremetiti izgled stranice. Ako ste odlučili nastaviti podržavati ove zastarjele inačice IE, morat ćete to riješiti dodavanjem sljedećeg na svoje tijelo i HTML stilove:
HTML, tijelo {
margina: 0px;
padding: 0px;
granica: 0px;
}
Slično kako ste isključili margine i padding, ovaj novi stil će također isključiti zadane granice. Isto možete učiniti isto tako što ćete upotrijebiti zamjenski znak koji je prikazan ranije u članku.
Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 27.9.16.