Өнөөдрийн вэб хөтөч вэбсайт хөтөч нь ямар нэгэн хөндлөн браузерын нийцтэй байдал нь хүсүүштэй сэтгэгдэл байсан галзуу өдрүүдээс хол замыг туулсан байна. Өнөөдрийн вэб хөтөч нар бүгд стандартыг дагаж мөрддөг. Тэд хамтдаа сайхан тоглож, янз бүрийн хөтөч дээрээ нэлээн тууштай хуудсыг үзүүлэх боломжтой. Энэ нь Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari болон сүүлийн үеийн вэбсайтад хандах хөдөлгөөнт төхөөрөмжүүдийн олон тооны хөтөч бүхий сүүлийн үеийн хувилбаруудаас бүрдэнэ.
Вэб браузер болон CSS хэрхэн харуулах талаар гарсан ахиц дэвшил гарсны дараа эдгээр төрөл бүрийн програм хангамжийн сонголтууд хоорондоо зөрчилдөхгүй хэвээр байна. Нийтлэг зөрчилдөөнүүдийн нэг бол эдгээр хөтөчүүд нь үндсэн мөр, далбаа, хил хязгаарыг хэрхэн тооцдогийг харуулдаг.
Хайрцгийн загваруудын эдгээр хэсгүүдийн улмаас бүх HTML элементүүд нөлөөлж, тэдгээр нь хуудасны бүтэц үүсгэхэд нэн чухал тул нийцэмжгүй дэлгэц нь нэг хуудсанд маш сайн харагдах боломжтой гэсэн үг юм. Энэ асуудлыг шийдэхэд олон вэб дизайнерууд хайрцаг загварын загварыг хэвшүүлэх болно. Энэ практикийг хил хязгаар, дэвсгэр, хил хязгаарын утгыг "тэглэх" гэж нэрлэдэг.
Хөтөч анхдагчдын тухай тэмдэглэл
Вэб хөтчүүд бүгд вэб хуудсын тодорхой талбарын хувьд үндсэн тохиргоотой байдаг. Жишээ нь, холбоосууд нь цэнхэр бөгөөд анхдагчаар онцолсон байдаг. Энэ нь янз бүрийн хөтөч дээр тулгуурладаг бөгөөд ихэнх дизайнерууд өөрсдийн тусгайлсан төслийн дизайны хэрэгцээнд нийцүүлэн өөрчилдөг боловч эдгээр нь бүгд анхдагч утгуудаас эхэлдэг нь эдгээр өөрчлөлтүүдийг хийхэд илүү хялбар болгодог. Харамсалтай нь, хил хязгаар, дэвсгэр болон хил хязгаарт зориулсан анхдагч утга нь вэб хөтчийн нийцтэй байдал ижил түвшинд байдаггүй.
Үржүүлэлтийн болон матрицын утгыг хэвийн болгох
Тохиромжгүй хайрцагны загварыг шийдэх хамгийн сайн арга бол HTML элементүүдийн бүх захын болон нягтруулгын утгуудыг тэг болгох явдал юм. Үүнийг хийх цөөн хэдэн арга зам бол энэ CSS дүрмийг өөрийн загварын хуудсан дээр нэмэх явдал юм:
* {маржин: 0; Налуу: 0; }Энэ CSS дүрэм нь * эсвэл орлуулагддаг тэмдэгтийг ашигладаг. Энэ тэмдэгт нь "бүх элементүүд" гэсэн үг бөгөөд энэ нь үндсэндээ HTML элементийг сонгож, захын болон зөөллөлтийг 0 болгон тохируулах болно. Энэ дүрэм нь маш тодорхойгүй, энэ нь таны гадаад хэв маягт байгаа учраас энэ нь анхдагч хөтөчөөс илүү өвөрмөц чанартай байх болно үнэ цэнэ. Эдгээр нь анхдагч утгуудыг дарж бичсэн байгаа тул энэ загвар таны хийх гэж байгаа тушаалыг биелүүлэх болно.
Өөр нэг арга бол эдгээр утгыг HTML болон биеийн элементүүдэд хэрэглэх явдал юм. Таны хуудсан дахь бусад элементүүд нь эдгээр хоёр элементийн хүүхдүүд байх тул CSS-ийн цэврүү нь эдгээр утгыг бусад бүх элементэд хэрэглэж байх ёстой.
html, body {margin: 0; Налуу: 0; }Энэ нь таны загвар дизайныг бүх хөтөч дээрээ байрлуулж эхлэх болно. Гэхдээ санах нэг зүйл бол та бүх захиа эргүүлээд эргүүлээд эргүүлж харахын тулд вэб хуудсын тодорхой хэсгүүдийг сонгон эргүүлэх хэрэгтэй. Таны дизайн шаарддаг гэж боддог.
Батс
Та "бодож байх боловч хөтөч нь анхдагчаар биеийн элементийн эргэн тойронд хил байдаггүй". Энэ нь үнэн биш юм. Internet Explorer-ийн хуучин хувилбарууд нь ил тод, үл үзэгдэгч хил хязгаартай байдаг. Хэрвээ та хил 0-ийг тохируулахгүй бол энэ хилийн хуудасны байрлалыг эвдэж болно. Хэрэв та IE-ийн хуучин хувилбаруудыг үргэлжлүүлэн дэмжинэ гэж шийдсэн бол та дараахь зүйлийг өөрийн HTML-тэй биендээ нэмж дараах байдлаар хандах хэрэгтэй болно:
HTML, body {
margin: 0px;
padding: 0px;
border: 0px;
}
Хэрвээ та хажуугийн болон дэвсгэртийг хэрхэн унтраасантай төстэй бол энэ шинэ загвар нь анхдагч хил хязгаарыг унтрааж болно. Та өгүүллээр өмнө нь жагсаасан орлуулагч сонгогчийг ашиглан ижил зүйлийг хийж болно.
Женнифер Кэрнин эх нийтлэл. 9/27/16 дээр Жереми Герард засварлав.