De Webbrowser vun haut ass wäit vun de verréckten Deeg komm, wou jiddereng vun der Cross-Browser Konsistenz e Wonsch no denken. D'Websäit vun haut ass all ganz Standardkonform. Si spillen zesummen zesummegesat a liwweren e relativ konsequent Säitseiten iwwert d'verschidde Browser. Dëst beinhalt och déi lescht Versioune vu Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari an déi verschidde Browser déi op der Myriad vu mobilen Apparater fonnt ginn sinn, déi haut d'Websäit kucken.
Iwwerdriwen ass sécherlech gemaach ginn, wann et um Webbrowser kënnt an wéi se CSS affichéieren, sinn nach ëmmer Onkonsequenzen tëschent dësen verschiddene Software-Optiounen. Ee vun de gemeinsame Inconsistencen ass wéi dës Browsers mat Grenzen, Felder a Grenzen errechnen.
Wéinst dës Aspekter vum Këschtmodell effektiv all HTML Elementer, a well se essentiel an der Layout vun Seiten geschafe sinn, kann een onkonsequent representéiert bedeit datt eng Säit gutt an engem Browser kuckt, awer liicht aus engem aneren ze gesinn. Fir dëse Problem ze kämpfen, sinn vill Webdesigner d'Aspekter vum Boxmodell normaliséiert. Dës Praxis ass och als "Null" ausgedréckt fir d'Margen, Padding an Grenzen.
Eng Note op Browser-Standardfaarf
Webbrowser sämtlech Standardeinstellungen fir gewësse Display Aspekter vun enger Säit. Zum Beispill sinn Iwwerleeungen blo an ënnersträicht standardiséiert. Dëst ass konsequent a verschidde Browser, an obwuel et eppes ass datt déi meescht Designer sech an den Designbedürfnisser vun hirem spezifesche Projet änneren, an datt se all mat de selwechte Standardgrënn fänken, ass et méi einfach, dës Verännerungen ze maachen. Leider ass de Standardwäert fir Margen, Fëllementer an Grenzen net genéiss ze genéissen de selwechte Level vun de Browser-Konsistenz.
Normaliséierung Wäerter fir Margren a Padding
Déi bescht Method de Problem vum onkonsistenten Boxmodell ze léisen ass all Margen a Padding Wäerter vun HTML Elementer op Null ze setzen. Et ginn e puer Weeër, déi Dir maache kënnt, ass dës CSS Regel zu Ärem Stuffzeechen ze addéieren:
* {margin: 0; Ufëllen: 0; }}Dës CSS Regel benotzt den * oder Plazebild. Dëst Zeechert heescht "all Elementer" an et wäer grondsätzlech all HTML Element auswielen an d'Margen a Padding op 0 setzen. Och wann dës Regel extrem unspezifesch ass, well et an ärem externen Stylesheet ass e méi héescht Spezifitéit wéi de Standardbrowser Valeuren hunn. Well dës Ofsichtegung wat Dir iwwerschreiwe wëllt, ass eent engem Stil dat Dir maache wëllt.
Eng aner Optioun ass fir dës Wäerter op d'HTML- a Kierperelementer anzebezéien. Well all déi aner Elementer vun Ärer Säit ginn Kanner vun dësen zwee Elementer, ass d'CSS-Kaskad dës Wäerter op all déi aner Elementer anzemëschen.
html, Kierper {margin: 0; Ufëllen: 0; }}Dëst fänkt Äre Design am selwechten Uert op all Browser unzefänken, awer eng Saach ze erënneren ass dat wann Dir all Margen a Padding off, Dir musst wielt wielt op Selektivitéit fir spezifesch Deeler vun Ärer Websäit zréck fir de Look a fille sech datt Äre Design konkret mécht.
Ränner
Dir kënnt dru denken "mee keng Browser hunn eng Grenz ëm de Kierperelement standard". Dëst ass net streng richteg. Déi méi al Versioune vun Internet Explorer hunn eng transparent oder onsichtbar Grenz ëm Elementer. Wann Dir d'Grenz op 0 festgeluegt huet, kann dës Grenz mat Äre Layout'en änneren. Wann Dir décidéiert hutt datt Dir dës al Versioune Versionen vun IE weider ënnerstëtze musst, musst Dir Iech mat dësem Text an Ärem Kierper a HTML Stiwwelen ze bewäerten:
HTML, Kierper {
Rand: 0px;
Padding: 0px;
Grenz: 0px;
}}
Ähnlech wéi Dir d'Margen a Fëllement ausgeschalt huet, gëtt dëse neie Stil och Standardfaarf. Dir kéint och d'selwecht maachen, andeems Dir de Feldschecker selector fréier am Artikel benotzt.
Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard am 9/27/16.