Današnji spletni brskalnik je precej potekal od norih dni, ko je bila kakršna koli konsistenca med brskalniki preprosta želja. Današnji spletni brskalniki so vsi zelo skladni s standardi. Igrajo lepo skupaj in prinašajo dokaj dosledno prikazovanje strani v različnih brskalnikih. To vključuje najnovejše različice brskalnika Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari in različne brskalnike, ki so na voljo na številnih mobilnih napravah , s katerimi se danes dostopajo do spletnega mesta.
Čeprav je bil dosežen napredek, ko gre za spletne brskalnike in kako prikazujejo CSS, še vedno obstajajo neskladja med temi različnimi programskimi možnostmi. Ena od skupnih nedoslednosti je, kako ti brskalniki privzeto izračunajo robove, bloke in meje.
Zaradi teh vidikov škatle model učinkuje vse HTML elemente in ker so bistvene pri ustvarjanju postavitev strani, neskladen prikaz pomeni, da stran lahko videti super v enem brskalniku, vendar pa nekoliko videti v drugem. Za boj proti tej težavi številni spletni oblikovalci normalizirajo te vidike modela škatle. Ta praksa je znana tudi kot "zeroing out" vrednosti za robove, oblazinjenje in meje.
Opomba o privzetih nastavitvah brskalnika
Vsi spletni brskalniki imajo privzete nastavitve za določene vidike prikaza strani. Na primer, hiperpovezave so modre in podčrtano privzeto. To je skladno v različnih brskalnikih, čeprav je to nekaj, kar se večina oblikovalcev spremeni v skladu z oblikovalskimi potrebami njihovega specifičnega projekta, dejstvo, da se vsi začnejo z istimi privzetimi nastavitvami, olajša te spremembe. Na žalost privzeta vrednost za robove, oblazinjenje in meje ni enaka ravni konsistentnosti med brskalniki.
Normiranje vrednosti za robove in obloge
Najboljši način za rešitev problema neskladnega modela polja je nastaviti vse robove in padding vrednosti HTML elementov na nič. Obstaja nekaj načinov, kako to lahko storite je, da to pravilo CSS dodate v svojo slogovno oznako:
* {margin: 0; oblazinjenje: 0; }To pravilo CSS uporablja znak * ali nadomestni znak. Ta znak pomeni "vse elemente" in bi v bistvu izbral vsak HTML element in nastavil robove in oblazinjenje na 0. Čeprav je to pravilo zelo nespecificno, ker je v zunanji slogi, bo imelo višjo specifičnost kot privzeti brskalnik vrednote. Ker so te privzete vrednosti tisto, kar prepisujete, bo ta en slog uresničil, kaj želite narediti.
Druga možnost je, da te vrednosti uporabimo v HTML in telesnih elementih. Ker bodo vsi drugi elementi na vaši strani otroci teh dveh elementov, mora kaskad CSS te vrednosti uporabiti za vse te druge elemente.
html, telo {margin: 0; oblazinjenje: 0; }To bo začelo vaš design na istem mestu v vseh brskalnikih, vendar je ena stvar, da se spomnite, da je, ko enkrat obrnete vse robove in padding off, jih boste morali selektivno ponovno vključiti za določene dele vaše spletne strani, da bi dobili videz in čutite, da zahteva vaša zasnova.
Meje
Morda razmišljate "vendar noben brskalnik nima meje okrog elementa telesa privzeto". To ni popolnoma res. Starejše različice Internet Explorerja imajo pregledno ali nevidno roko okoli elementov. Razen če nastavite mejo na 0, lahko ta meja zaplete vaše postavitve strani. Če ste se odločili, da boste še naprej podpirali te zastarele različice IE, boste morali to nasloviti tako, da dodate naslednje v svoje telo in HTML sloge:
HTML, telo {
margin: 0px;
padding: 0px;
border: 0px;
}
Podobno, kako ste izklopili robove in oblazinjenje, bo ta novi slog tudi izklopil privzete meje. Prav tako bi lahko storili isto stvar z uporabo nadomestnega nadomestnega znaka, prikazanega prej v članku.
Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 27.9.16.