Kasutage varude ja piiride nullimiseks CSS-i

Selles artiklis selgitatakse, kuidas seda kasutada CSS nullini veerised ja piirnevad, nii et teie veebilehti renderdatakse pidevalt igas brauseris.

Ääriste ja polstrite väärtuste normaliseerimine

Parim viis vastuolulise kasti mudeli probleemi lahendamiseks on kõigi HTML-elementide veeriste ja täiteväärtuste nullimine. Selle CSS-reegli lisamiseks oma stiililehele on mitu võimalust.

Isegi kui see reegel pole spetsiifiline, kuna see on teie välises stiililehes, on selle spetsiifilisus suurem kui brauseri vaikeväärtustel. Kuna need vaikeväärtused kirjutate üle, täidab see üks stiil seda, mida kavatsete teha.

Kui olete kõik veerised ja polsterdused välja lülitanud, peate need oma veebisaidi teatud osade jaoks valikuliselt uuesti sisse lülitama, et saavutada välimus ja tunne, mida teie kujundus nõuab.

Ääriste normaliseerimiseks kasutage CSS-i

Vanemad Internet Exploreri versioonid

oli elementide ümber läbipaistev või nähtamatu piir. Kui te ei määra piiriks 0, võib see piir teie lehe paigutused sassi ajada. Kui olete otsustanud jätkata IE vananenud versioonide toetamist, peate sellega tegelema, lisades oma keha ja HTML-stiilidele järgmise:

HTML, body {
veeris: 0px;
polster: 0px;
 ääris: 0px;
}

Sarnaselt sellele, kuidas veerised ja polsterdused välja lülitasite, lülitab see uus stiil välja ka vaikepiirid. Sama saate teha ka artiklis varem näidatud metamärgivalija abil.

Miks on veebidisainis järjepidevad marginaalid ja piirid olulised?

Tänane veebibrauser on jõudnud kaugele pöörastest päevadest, kus igasugune brauseriteülene järjepidevus oli soovmõtlemine. Tänapäeva veebibrauserid vastavad täielikult standarditele. Nad mängivad kenasti koos ja pakuvad üsna ühtset lehe kuvamist erinevates brauserites. See hõlmab Google Chrome'i, Microsoft Edge'i, Mozilla Firefoxi, Opera, Safari ja mitmesuguste brauserite uusimaid versioonelugematu arv mobiilseadmeid täna veebisaitidele juurdepääsemine.

Kuigi brauserite CSS-i kuvamisel on kindlasti tehtud edusamme, on nende erinevate tarkvaravõimaluste vahel endiselt vastuolusid. Üks levinumaid vastuolusid on see, kuidas need brauserid arvutavad vaikimisi veerised, täidise ja äärised.

Kuna kastimudeli need aspektid mõjutavad kõiki HTML-elemente ja kuna need on lehe loomisel hädavajalikud paigutusega, tähendab ebajärjekindel kuvamine seda, et leht võib ühes brauseris hea välja näha, kuid sissepoole veidi välja lülitada teine. Selle probleemiga võitlemiseks normaliseerivad paljud veebidisainerid kasti mudeli neid aspekte. Seda tava tuntakse ka kui nullimine veeriste väärtused, polsterdusja piirid.

Märkus brauseri vaikeväärtuste kohta

Veebibrauserid määravad iga lehe kuvamise aspektide jaoks vaikesätted. Näiteks hüperlingid on vaikimisi sinised ja allajoonitud. See käitumine on erinevates brauserites järjepidev ja kuigi enamik disainereid muudab seda disainile vastavaks nende konkreetsete projektide vajaduste jaoks muudab nende tegemise lihtsamaks asjaolu, et nad kõik alustavad samade vaikeväärtustega muudatused. Kahjuks ei ole veeriste, polstrite ja ääriste vaikeväärtus samal tasemel brauseriülese järjepidevusega.