De hjoeddeistige webblêder is in lange wei kommen fan 'e heulende dagen wêr't alle soarte fan cross-browser konsistinsje ferwachte tinke. De hjoeddeiske webbrowsers binne allegear hiel normale standerts. Se spielje moai meiinoar en leverje in frijwat konsekwint side werjefte oer de ferskate browsers. Dit befettet de lêste ferzjes fan Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari en de ferskate browsers fûn op 'e myriade fan mobile apparaten dy't brûkt wurde om hjoed de dei te besjen.
Hoewol't progress is gewoan makke as it giet om webbrowsers en hoe't se CSS werjaan, binne der noch konsekwinsjes tusken dizze ferskate software opsjes. Ien fan 'e mienskiplike inconsistencies is hoe't dy browsers standert rânen, padding, en grinzen falle.
Troch dizze aspekten fan it kastielmodel effektje alle HTML-eleminten, en om't se essinsjeel binne foar it meitsjen fan side-ljeppers, in ûnfoldwaande byld betsjut dat in side in ien blêd makket, mar yn in oar lûd wat te sjen. Om dit probleem te krijen hawwe in protte web-ûntwerpers dizze aspekten fan it fakmodel normalisearje. Dizze praktyk wurdt ek wol bekend as "nulleare" de wearden foar marginen, padding en grinzen.
In opmerking op browsers standert
Web browsers hawwe alle standertynstellingen foar bepaalde werjaan aspekten fan in side. Bygelyks, hyperlinks binne blau en standert standert. Dit is konsekwint oer ferskate browsers, en hoewol it wat is dat de measte ûntwerper-wizigingen feroarje nei de ûntwerpferletten fan har spesifike projekt, it feit dat se allegear begjinne mei deselde standert makket it makliker om dizze wizigingen te meitsjen. Sadwaande, de standertwearde foar rânen, padding en grinzen is net genôch deselde nivo fan cross-browser konsistinsje.
Normearjen fan wearden foar marren en padding
De bêste manier om it probleem te ûntwikkeljen fan 'e inkonsistente fakmodel is om alle rânen en paddingwearden fan HTML-eleminten te setten oant nul. Der binne in pear manieren wêrmei jo dit dwaan koenen is dit CSS-regel oan jo stylblêd ta te foegjen:
* {margin: 0; padding: 0; }Dizze CSS-regel brûkt it * of wildcard-karakter. Dit karakter betsjuttet "alle eleminten" en it soe elk elemint elemint selektearje en de rânen en padding opnimme. Oft dit regel tige ûnbeskosyf is, om't it yn jo eksterne stylblêd is, sil it in hegere speciaal hawwe as de standertblêder wearden dogge. Om't dizze standert binne wat jo oerskriuwe, dizze styl sil fertelle wat jo opsje wolle.
In oare opsje is om dizze wearden oan te passen oan de HTML- en lichems eleminten. Om't alle oare eleminten op jo side bern binne fan dizze twa eleminten, moat de CSS-kaskadearje dizze wearden oan alle oare eleminten tapasse.
html, body {margin: 0; padding: 0; }Dit sil jo ûntwerp yn itselde plak begjinne op alle browsers, mar ien ding om te ferjitten is dat as jo alle rânen en padding útsette, sil jo selektearje om se werom te drukken foar spesifike dielen fan jo webside om it look te berikken en fiele dat jo ûntwerp oanropt.
Grins
Jo kinne tinke "mar gjin browsers hawwe in grins om it lichems elemint standert". Dit is net krekt wier. Aldere ferzjes fan Internet Explorer hawwe in transparante of ûnsichtbere grins om eleminten. As jo de rânen op 0 sette, dan kin dizze grins jo side-lokaasjes misse. As jo besluten hawwe dat jo dizze âldere ferzjes fan IE fierder stypje, moatte jo dit oanmeitsje troch de folgjende ta te heakjen oan jo lichaam en HTML-stilen:
HTML, lichem {
margin: 0px;
padding: 0px;
border: 0px;
}
Similar to how you turned off the margins and padding, this new style will also off default grenades. Jo kinne itselde ding ek dwaan troch de eardere seleksje te brûken yn 'e artikel.
Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard op 9/27/16.