Shfletuesi i sotëm i internetit ka bërë një rrugë të gjatë nga ditët e çmendura ku çdo lloj konsistencë ndër-shfletuesi ishte dëshira e dëshiruar. Shfletuesit e sotëm të internetit janë të gjitha në përputhje me standardet. Ata luajnë bukur së bashku dhe japin një ekran mjaft të qëndrueshëm faqe nëpër shfletues të ndryshëm. Kjo përfshin versionet më të fundit të Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari dhe shfletuesit e ndryshëm që gjenden në një numër të pajisjeve mobile që përdoren për të hyrë në faqen e internetit sot.
Përderisa progresi është bërë sigurisht në lidhje me shfletuesit e internetit dhe mënyrën se si ata shfaqin CSS, ka ende mospërputhje midis këtyre opsioneve të ndryshme të softuerit. Një nga mospërputhjet e zakonshme është se si këto shfletues llogaritin kufijtë, mbushjen dhe kufijtë sipas parazgjedhjes.
Për shkak të këtyre aspekteve të modelit të kutisë, të gjithë elementët HTML, dhe për shkak se ato janë thelbësore në krijimin e faqeve të faqeve, një ekran i paqëndrueshëm do të thotë që një faqe mund të duket e mrekullueshme në një shfletues, por duken pak në një tjetër. Për të luftuar këtë problem, shumë web designers normalizojnë këto aspekte të modelit të kuti. Kjo praktikë është e njohur edhe si "zeroing out" vlerat për kufijtë, mbushje, dhe kufijtë.
Një Shënim mbi Parametrat e Shfletuesit
Shfletuesit e internetit të gjithë kanë parametrat e parazgjedhur për disa aspekte të shfaqjes së një faqeje. Për shembull, hyperlinks janë blu dhe nënvizohet nga default. Kjo është e qëndrueshme në të gjithë shfletuesit e ndryshëm, dhe megjithëse është diçka që shumica e projektuesve ndryshojnë për t'iu përshtatur nevojave të projektimit të projektit të tyre specifik, fakti që të gjithë po fillojnë me të njëjtat standarte, e bën më të lehtë për t'i bërë këto ndryshime. Mjerisht, vlera e parazgjedhur për kufijtë, mbushjet dhe kufijtë nuk gëzojnë të njëjtin nivel të qëndrueshmërisë në mes të shfletuesit.
Normalizimi i vlerave për margjinat dhe mbushjet
Mënyra më e mirë për të zgjidhur problemin e modelit të kutisë jokonsistente është vendosja e të gjitha kufijve dhe mbushjes së vlerave të elementeve HTML në zero. Ka disa mënyra që ju mund ta bëni këtë është që të shtoni këtë rregull CSS në fletën tuaj të stilit:
* {margin: 0; mbushje: 0; }Ky rregull CSS përdor karakterin * ose wildcard. Ky karakter do të thotë "të gjithë elementët" dhe në thelb do të përzgjedhë çdo element HTML dhe do të vendosë margjinat dhe mbushjet në 0. Edhe pse ky rregull është shumë i paspecifikuar, sepse është në stilet e jashtme tuaj, ai do të ketë një specifikë më të lartë sesa shfletuesi i parazgjedhur vlerat. Meqenëse këto standarte janë ato që po mbishkruani, ky stil do të arrijë atë që po vendosni të bëni.
Një tjetër mundësi është që këto vlera të zbatohen tek elementët e HTML dhe të trupit. Meqë të gjithë elementët e tjerë në faqen tuaj do të jenë fëmijë të këtyre dy elementeve, kaskada e CSS duhet t'i zbatojë këto vlera në të gjitha ato elemente të tjera.
html, trup (diferencë: 0; mbushje: 0; }Kjo do të fillojë dizajnin tuaj në të njëjtin vend në të gjithë shfletuesit, por një gjë për të kujtuar është që sapo të ktheheni të gjitha kufijtë dhe mbushje jashtë, do t'ju duhet t'i ktheni ato në mënyrë selektive për pjesë specifike të faqes suaj për të arritur pamjen dhe mendoni se dizajni juaj kërkon.
Borders
Ju mund të jeni duke menduar "por asnjë shfletues nuk ka një kufij rreth elementit të trupit nga default". Kjo nuk është saktësisht e vërtetë. Versionet e vjetra të Internet Explorer kanë një kufi transparent ose të padukshëm rreth elementëve. Nëse nuk e caktoni kufirin në 0, kjo kufizim mund të bllokojë faqosjet tuaja të faqes. Nëse keni vendosur që ju do të vazhdoni të mbështetni këto versione antikuar të IE, do t'ju duhet të adresoni këtë duke shtuar në vijim në trupin tuaj dhe stilet HTML:
HTML, trup {
margjina: 0px;
mbushje: 0px;
kufiri: 0px;
}
Ngjashëm me atë se si i fikët kufijtë dhe mbushjet, ky stil i ri gjithashtu do të fikur kufijtë e paracaktuar. Ju gjithashtu mund të bëni të njëjtën gjë duke përdorur përzgjedhësin e shkronjës që tregohet më herët në artikull.
Artikulli origjinal nga Jennifer Krynin. Redaktuar nga Jeremy Girard më 9/27/16.