Tänapäeva veebibrauser on hullumeelsetel päevadel kaugel, kui mis tahes piiriülese brauserite järjepidevus oli soovitav mõtlemine. Tänapäeva veebibrauserid on kõik väga standarditele vastavad. Nad mängivad suurepäraselt koos ja pakuvad üsna järjepideva lehe kuva erinevatel brauseritel. See hõlmab Google Chrome'i uusimaid versioone, Microsoft Edge, Mozilla Firefoxi, Opera, Safari ja mitmesuguseid mobiilseadmeid, mida täna veebisaidile juurde pääsemiseks kasutatakse.
Kuigi edusammud on kindlasti tehtud veebibrauserite ja CSS-i kuvamise kohta, on nende erinevate tarkvaravõimaluste vahel endiselt vastuolud. Üks tavalisest ebajärjekindlusest on see, kuidas need brauserid arvutavad vaikimisi marginaale, polsterdusi ja piiranguid.
Kuna kastmudeli need aspektid mõjutavad kõiki HTML-elemente ja kuna need on lehepaigutuste loomiseks hädavajalikud, näitab ebajärjekindel kuva, et leht võib ühes brauseris suurepäraselt välja näha, kuid mõnes teises on see mõnevõrra välja. Selle probleemiga võitlemiseks normaliseerivad paljud veebidisainerid kasti mudeli neid aspekte. Seda tava nimetatakse ka marginaalide, polsterduse ja piiride väärtuste nullimiseks.
Märkus brauseri vaikeväärtuste kohta
Veebibrauseritel on kõik lehe teatud kuvamisaspektid vaikimisi seaded. Näiteks on hüperlingid vaikimisi sinised ja alla joonitud. See on erinevates brauserites järjepidev ja kuigi see on midagi, mida enamik disainereid muudab, et see vastaks nende konkreetse projekti disainivajadustele, on asjaolu, et need kõik algavad samade vaikeväärtustega, muuta nende muudatused lihtsamaks. Kahjuks pole marginaalide, pindade ja piiride vaikimisi väärtus sama, kui brauseri brauserid.
Normalizing väärtused margins ja padding
Ebaühtlase kasti mudeli probleemi lahendamiseks on parim viis nullida kõik HTML-elementide väärtused ja lisandväärtused. Teil on mõned võimalused selle CSS-reegli lisamiseks oma stiililehele:
* {margin: 0; padding: 0; }See CSS-i reegel kasutab * või metamärke. See tähis tähendab "kõiki elemente" ja see põhiliselt valib iga HTML-i elemendi ja määrab marginaalid ja täisdetaile 0. Kuigi see reegel on väga mittespetsiifiline, kuna see on teie välist stiililaadist, on sellel kõrgem spetsiifilisus kui vaikel brauser väärtused teevad. Kuna need vaikimisi on need, mida te üle kirjutate, täidab see üks stiil seda, mida teete.
Teine võimalus on rakendada neid väärtusi HTML-ile ja keeleelementidele. Kuna kõik teised teie lehe elemendid on nende kahe elemendi lapsed, peaks CSS kaskaadi neid väärtusi kohaldama kõigi nende muude elementidega.
html, keha {margin: 0; padding: 0; }See käivitab teie disaini kõikides brauserites ühes kohas, kuid üks asi, mida meeles pidada, on see, et kui te kõik marginaale ja lisapakkumisi välja lülitate, peate need valikuliselt pöörduma oma veebilehe konkreetsete osade poole, et kuvada ja tunnete, et teie disain nõuab.
Piirid
Võib arvata, "kuid brauseritel pole vaikimisi kehamelementi ümber". See ei ole rangelt tõene. Internet Exploreri vanemate versioonide elementide ümber on läbipaistev või nähtamatu piir. Kui te ei määra piiri 0-ni, võib see piir ületada teie lehe paigutusi. Kui olete otsustanud, et jätkate nende IE varajaste versioonide toetamist, peate selle probleemi lahendama, lisades oma kehale ja HTML-stiilidele järgmised andmed:
HTML, keha {
marginaal: 0px;
padding: 0px;
piiri: 0px;
}
Sarnaselt sellele, kuidas te marginaale ja polsterit välja lülitasite, lülitab see uus stiil vaikimisi ka piirid välja. Samuti võite teha sama asja, kasutades artiklis varem esitatud metoodika valijat.
Jennifer Krynini algne artikkel. Redigeeris Jeremy Girard 27. ja 16. jaanuaril.