Msanidi wa kisasa wa leo umekuja kwa muda mrefu kutoka siku za wazimu ambapo aina yoyote ya mstari wa mshambuliaji wa msalaba ulikuwa unafikiria. Vivinjari vya wavuti wa leo ni viwango vyote vinavyolingana. Wanacheza vizuri kwa pamoja na kutoa maonyesho ya ukurasa thabiti katika vivinjari mbalimbali. Hii inajumuisha matoleo ya hivi karibuni ya Google Chrome, Microsoft Edge, Firefox ya Mozilla, Opera, Safari, na vivinjari mbalimbali vilivyopatikana kwenye vifaa vingi vya simu vinavyotumiwa kufikia tovuti ya leo.
Ingawa mafanikio yamefanyika wakati wa kuja kwa wavuti wa wavuti na jinsi wanavyoonyesha CSS, bado kuna kutofautiana kati ya chaguzi hizi za programu mbalimbali. Moja ya kutofautiana kwa kawaida ni jinsi vivinjari hao huhesabu vijiji, ufizi, na mipaka kwa default.
Kwa sababu ya vipengele hivi vya mfano wa sanduku huathiri vipengele vyote vya HTML, na kwa sababu ni muhimu katika kuunda mipangilio ya ukurasa, kuonyesha isiyo sawa kunamaanisha kuwa ukurasa unaweza kuonekana kuwa mzuri katika kivinjari kimoja, lakini angalia kidogo kwa mwingine. Ili kukabiliana na tatizo hili, wabunifu wengi wa wavuti hupunguza hali hizi za mfano wa sanduku. Mazoezi haya pia inajulikana kama "zeroing out" maadili kwa vijijini, padding, na mipaka.
Kumbuka juu ya Defaults ya Kivinjari
Watazamaji wa wavuti wote wana mipangilio ya msingi kwa vipengele fulani vya kuonyesha ukurasa. Kwa mfano, viungo vilikuwa vya rangi ya bluu na imesisitizwa na default. Hii ni thabiti katika vivinjari mbalimbali, na ingawa ni kitu ambacho wabunifu wengi wanabadilishana kulingana na mahitaji ya kubuni ya mradi wao maalum, ukweli kwamba wote wanaanza na vikwazo sawa hufanya iwe rahisi kufanya mabadiliko haya. Kwa kusikitisha, thamani ya default kwa vijiji, padding, na mipaka haifai kiwango kimoja cha ushirikiano wa kivinjari-kivinjari.
Kupunguza maadili ya Vifungu vya Pembejeo na Padding
Njia bora ya kutatua tatizo la mfano wa sanduku linalofautiana ni kuweka margin yote na maadili ya padding ya vipengele vya HTML hadi sifuri. Kuna njia chache ambazo unaweza kufanya hili ni kuongeza utawala huu wa CSS kwenye stylesheet yako:
* {margin: 0; padding: 0; }Utawala huu wa CSS hutumia * au tabia ya wildcard. Tabia hiyo inamaanisha "vipengele vyote" na ingekuwa kimsingi chagua kila kipengele cha HTML na kuweka margins na padding kwa 0. Hata ingawa hii kanuni ni isiyo ya kipekee, kwa sababu iko kwenye stylesheet yako ya nje, itakuwa na sifa maalum zaidi kuliko kivinjari chaguo-msingi maadili kufanya. Kwa kuwa vikwazo hivi nivyo unavyochagua, style hii moja itatimiza kile unachokifanya kufanya.
Chaguo jingine ni kutumia maadili haya kwa vipengele vya HTML na mwili. Kwa sababu mambo mengine yote kwenye ukurasa wako atakuwa watoto wa vipengele hivi viwili, msimu wa CSS unapaswa kutumia maadili haya kwa vipengele vyote vingine.
html, mwili {margin: 0; padding: 0; }Hii itaanza kubuni yako mahali penye kwenye vivinjari vyote, lakini jambo moja kukumbuka ni kwamba mara moja ungeuka pembe zote na kupasuliwa, unahitaji kuwachagua kwa makini sehemu maalum ya ukurasa wako wa wavuti kufikia uangalizi na ujisikie kuwa design yako inahitaji.
Mipaka
Unaweza kuwa unafikiria "lakini hakuna vivinjari vina mpaka kuzunguka kipengele cha mwili kwa default". Hii sio kweli kabisa. Matoleo ya zamani ya Internet Explorer yana mpaka wa wazi au usioonekana karibu na mambo. Isipokuwa ukiweka mpaka hadi 0, mpaka huo unaweza kufuta mipangilio ya ukurasa wako. Ikiwa umeamua kuwa utaendelea kuunga mkono matoleo haya ya zamani ya IE, utahitaji kushughulikia hili kwa kuongeza yafuatayo kwa mitindo yako na mitindo ya HTML:
HTML, mwili {
margin: 0px;
padding: 0px;
mpaka: 0px;
}
Sawa na jinsi ulivyoziba margin na padding, mtindo huu mpya pia utazima mipaka ya default. Unaweza pia kufanya kitu kimoja kwa kutumia mchezaji wa wildcard umeonyeshwa mapema katika makala hiyo.
Makala ya awali na Jennifer Krynin. Iliyotengenezwa na Jeremy Girard mnamo 9/27/16.