Bugungi veb-brauzer aql bovar qilmaydigan kunlardan uzoqlashdi, bu erda har qanday o'zaro faoliyat brauzerining kelishuvi istakni o'ylaydigan bo'ldi. Bugungi kunda veb-brauzerlar juda mos standartlardir. Ular birgalikda yaxshi o'ynaydilar va har xil brauzerlar bo'ylab juda izchil sahifani namoyish qiladilar. Bunga Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari va bugungi kunda veb-saytga kirish uchun ishlatiladigan ko'plab mobil qurilmalarda topilgan turli brauzerlarning so'nggi versiyalari kiradi.
Veb-brauzerlar va CSS-ni namoyish qilishda, albatta, muvaffaqiyatga erishilgan bo'lsa-da, bu turli xil dasturiy ta'minot imkoniyatlari o'rtasida nomuvofiqliklar mavjud. Odatiy holatlardan biri bu brauzerlarning chekka bo'shlig'ini, to'ldirishni va chegaralarni qanday qilib hisoblashidir.
Qator modelining bu jihatlari tufayli barcha HTML elementlari ta'sir qiladi va ular sahifa tartibini yaratishda muhimdir, chunki unda barqaror bo'lmagan ekran sahifaning bir brauzerda yaxshi ko'rinishi mumkin, biroq boshqasiga biroz tushadi. Ushbu muammoni hal qilish uchun, veb-dizaynerlar ko'pchiligi quti modelining bu aspektlarini normallashtiradilar. Ushbu amaliyot marginlar, bo'shliqlar va chegaralar uchun qadriyatlarni "yo'q qilish" deb ham ataladi.
Brauzerning standart sozlamalari to'g'risidagi eslatma
Veb-brauzerlarning barchasi bir sahifaning muayyan ko'rish tomonlari uchun standart sozlamalarga ega. Misol uchun, ko'priklar ko'k va asl qiymati bo'yicha chizilgan. Bu turli brauzerlar bo'yicha izchil va har qanday dizaynerlar o'ziga xos loyiha dizayn ehtiyojlariga mos keladigan o'zgarishlarga qaramasdan, ularning barchasi bir xil varsayımlarla boshlanganligi, bu o'zgarishlarni yanada qulay holga keltirur. Afsuski, chekka bo'shliqlar, to'ldirishlar va chegaralar uchun standart qiymat bir xil brauzerlarning kelishuv darajasiga ega emas.
Yon bo'shliqlari va to'ldirish uchun me'yorlarni me'yorlash
Mos kelmaydigan quti modelining muammoni hal qilishning eng yaxshi usuli - HTML elementlarning barcha chekkalari va to'ldirish qiymatlarini nolga o'rnatish. Buni amalga oshirishning bir necha yo'li bor: bu CSS qoidasini uslub sahifangizga qo'shish:
* {margin: 0; padding: 0; }Ushbu CSS qoidasi * yoki joker belgini ishlatadi. Bu belgi «barcha elementlar» degan ma'noni anglatadi va u asosan har bir HTML elementini tanlaydi va chekkalarni belgilaydi va 0 ga to'ldiradi. Ushbu qoidalar juda noaniq bo'lsa-da, tashqi uslublar ko'rinishida bo'lsa, u asl qiymati brauzer qadriyatlar. Ushbu varsayımlar, qayta yozgan narsalar bo'lgani uchun, bu bir uslub, nima qilayotganingizni amalga oshiradi.
Yana bir variant - ushbu qiymatlarni HTML va tana elementlariga qo'llash. Sahifangizdagi barcha boshqa elementlar bu ikki elementning farzandlari bo'lishiga qarab, CSS kaskadi ushbu qiymatlarni boshqa barcha elementlarga qo'llashi kerak.
html, body {margin: 0; padding: 0; }Bu sizning dizayningizni barcha brauzerlarda bir joyda boshlaydi, lekin esda tutish kerak bo'lgan narsa shundaki, siz barcha chekka burchaklarni ochib, to'ldirganingizdan so'ng, veb-sahifangizning ko'rinishini olish uchun ularni qay tarzda qaytib qo'yishingiz kerak va sizning dizayningiz sizni qiziqtirayotganini his qilasiz.
Chegaralar
Fikrlashingiz mumkin "lekin hech qanday brauzerlarda sukut bo'yicha tananing elementi atrofida chegara yo'q". Bu haqiqatan ham to'g'ri emas. Internet Explorer oldingi versiyalari elementlar atrofida shaffof yoki ko'rinmas chegaraga ega. Chegarani 0 ga o'rnatmasangiz, u chegara sizning sahifa tartibini buzishi mumkin. Agar IE ning eskirib qolgan versiyalarini qo'llab-quvvatlashni davom ettirmoqchi bo'lsangiz, buni tanangizga va HTML uslubiga quyidagilarni qo'shish orqali murojaat qilishingiz kerak bo'ladi:
HTML, body {
margin: 0px;
to'ldirish: 0px;
border: 0px;
}
Yon bo'shliqlarni qanday qilib o'chirib qo'yishingiz va shunga o'xshash yangi uslublar sizning standart chegaralarni ham o'chirib qo'yadi. Bundan oldingi maqolada ko'rsatilgan joker tanlovchidan foydalanib, xuddi shu narsani qilishingiz mumkin.
Jennifer Kryninning original maqolasi. Jeremy Girard 9/27/16 tomonidan tahrirlangan.