Il-web browser tal-lum mxiet ħafna 'il bogħod mill-ġranet crazy fejn kull tip ta' konsistenza bejn il-brawżers kienet ħasra. Il-web browsers tal-lum huma konformi ħafna mal-istandards. Huma jilagħbu nicely flimkien u jwasslu wirja tal-paġna pjuttost konsistenti madwar il-bosta browsers. Dan jinkludi l-aħħar verżjonijiet ta 'Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, u l-bosta browsers misjuba fuq in- numru kbir ta' apparati mobbli li qed jintużaw biex jaċċessaw il-websajt illum.
Filwaqt li ċertament sar progress fil-każ ta 'web browsers u kif juru CSS, għad hemm inkonsistenzi bejn dawn l-għażliet ta' softwer varji. Wieħed mill-inkonsistenzi komuni huwa kif dawk il-browsers jikkalkulaw il-marġni, il-padding u l-fruntieri awtomatikament.
Minħabba dawn l-aspetti tal-effett tal-mudell tal-kaxxa l-elementi HTML kollha, u minħabba li huma essenzjali biex jinħolqu layouts tal-paġni, wirja inkonsistenti tfisser li paġna tista 'tidher kbira f'wieħed mill-brawżers, imma tħares ftit f'ieħor. Biex tiġġieled din il-problema, ħafna disinjaturi tal-web jinnormalizzaw dawn l-aspetti tal-mudell tal-kaxxa. Din il-prattika hija magħrufa wkoll bħala "zeroing out" il-valuri għall-marġini, l-ikkuttunar, u l-fruntieri.
Nota dwar Defaults tal-Browser
Il-browsers tal-Web kollha għandhom settings awtomatiċi għal ċerti wirjiet ta 'paġna. Per eżempju, l-hyperlinks huma blu u enfasizzati b'mod awtomatiku. Dan huwa konsistenti bejn bosta browsers, u għalkemm hija xi ħaġa li l-biċċa l-kbira tad-disinjaturi jinbidlu biex jissodisfaw il-ħtiġijiet tad-disinn tal-proġett speċifiku tagħhom, il-fatt li dawn kollha qed jibdew bl-istess nuqqasijiet jagħmilha aktar faċli biex isiru dawn il-bidliet. Sfortunatament, il-valur awtomatiku għall-marġini, il-padding u l-fruntieri ma jgawdux mill-istess livell ta 'konsistenza bejn il-browser.
Normalizzazzjoni ta 'Valuri għal Margini u Padding
L-aħjar mod biex tissolva l-problema tal-mudell tal-kaxxa inkonsistenti huwa li jiġu stabbiliti l-marġini kollha u l-valuri tal-ikkuttunar tal-elementi HTML għal żero. Hemm ftit modi li inti tista 'tagħmel dan huwa li żżid din ir-regola tas-CSS għall-folja tal-istil tiegħek:
* {marġini: 0; padding: 0; }Din ir-regola tas-CSS tuża l-karattru * jew wildcard. Dak il-karattru jfisser "l-elementi kollha" u bażikament għandu jagħżel kull element HTML u stabbilixxa l-marġini u l-ikkuttunar għal 0. Għalkemm din ir-regola hija ferm mhux speċifika, minħabba li hija fil-folja tal-istil esterna tiegħek, ikollha speċifikazzjoni ogħla mill- il-valuri jagħmlu. Peress li dawk in-nuqqasijiet huma dak li int qed tikteb mill-ġdid, dan l-istil wieħed ser iwettaq dak li qed tistipula li tagħmel.
Għażla oħra hija li dawn il-valuri jiġu applikati għall-HTML u l-elementi tal-ġisem. Minħabba li l-elementi l-oħra kollha fil-paġna tiegħek se jkunu tfal ta 'dawn iż-żewġ elementi, il-kaskata CSS għandha tapplika dawn il-valuri għal dawk l-elementi l-oħra kollha.
html, korp {marġini: 0; padding: 0; }Dan se jibda d-disinn tiegħek fl-istess post fuq il-browsers kollha, iżda ħaġa waħda li għandek tiftakar hija li ladarba inti dawwar il-marġni u l-ikkuttunar off, ikollok bżonn tagħżelhom b'mod selettiv għal partijiet speċifiċi tal-paġna web tiegħek biex tikseb il-ħarsa u jħoss li d-disinn tiegħek jitlob.
Fruntieri
Jista 'jkun qed taħseb "iżda l-ebda browsers m'għandhom fruntiera madwar l-element tal-ġisem f'kontumaċja". Dan mhux strettament veru. Verżjonijiet anzjani ta 'Internet Explorer għandhom fruntiera trasparenti jew inviżibbli madwar l-elementi. Sakemm ma ssettjax il-fruntiera għal 0, dik il-fruntiera tista 'toqgħod fuq it-taqsim tal-paġni tiegħek. Jekk iddeċidejt li ser tkompli tappoġġja dawn il-verżjonijiet antikwati ta 'IE, ikollok tindirizza dan billi żżid dan li ġej mal-ġisem tiegħek u l-istili HTML:
HTML, korp {
marġni: 0px;
ikkuttunar: 0px;
fruntiera: 0px;
}
Simili għall-mod kif intejt il-marġni u l-ikkuttunar, dan l-istil ġdid se jbiddel il-fruntieri awtomatiċi. Int tista 'wkoll tagħmel l-istess ħaġa billi tuża s-selettur tal-wildcard murija qabel fl-oġġett.
Artikolu oriġinali minn Jennifer Krynin. Editjat minn Jeremy Girard fid-9/27/16.