Ular nima va nima uchun ularni ishlatish kerak
CSS-sotuvchi prefikslari, shuningdek, ba'zida tanilgan yoki CSS brauzerining prefikslari brauzer tuzuvchilarning barcha CSS-larda to'liq qo'llab-quvvatlanmasdan oldin yangi CSS xususiyatlarini qo'llab-quvvatlashiga yordam beradi. Bu brauzer ishlab chiqaruvchisi ushbu yangi CSS funktsiyalari qanday amalga oshirilishini aniqlayotgan sinov va tajriba davrida amalga oshirilishi mumkin. Ushbu prefiks bir necha yil avval CSS3ning ko'tarilishi bilan mashhur bo'ldi.
CCS3 birinchi marta ishga tushirilgach, turli xil brauzerlar turli vaqtlarda bir qator qiziqarli xususiyatlarga ega bo'ldi. Misol uchun, webkit bilan ishlaydigan brauzerlar (Safari va Chrome) birinchi bo'lib transformatsiya va o'tish kabi animatsiya uslubidagi ba'zi xususiyatlarni joriy qilishgan. Sotuvchi oldindan belgilangan xususiyatlardan foydalangan holda, veb-dizaynerlar ushbu yangi funksiyalardan o'z ishlarida foydalana olishdi va ularni har qanday brauzer ishlab chiqaruvchisini qo'lga olishini kutish o'rniga ularni darhol qo'llab-quvvatlaydigan brauzerlarda ko'rgan!
Shunday qilib, veb-sayt ishlab chiquvchisi nuqtai nazaridan brauzerlar prefikslari brauzerlarning ushbu uslublarni qo'llab-quvvatlayotganligini bilib olsangiz, saytga yangi CSS xususiyatlarini qo'shish uchun ishlatiladi. Turli xil brauzer ishlab chiqaruvchilari xususiyatlarini bir-biridan boshqacha tarzda yoki turli xil sintaksis yordamida amalga oshirganda, bu ayniqsa foydali bo'lishi mumkin.
CSS brauzerini ishlatishingiz mumkin bo'lgan prefikslar (ularning har biri boshqa brauzerga xos) quyidagilardir:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Ko'pgina hollarda, yangi CSS uslubi xususiyatlaridan foydalanish uchun standart CSS xususiyatini olasiz va har bir brauzer uchun old qo'shimchani qo'shasiz. Prefixed versiyalar har doim birinchi bo'lib (istalgan tartibda), normal CSS xususiyati esa oxirgi bo'ladi. Masalan, sizning hujjatga CSS3-ga o'tishni xohlasangiz, o'tish xususiyatini quyida ko'rsatilgan tarzda ishlatasiz:
-webkit- o'tish: barcha 4s qulaylik;
-moz- o'tish: barcha 4s qulaylik;
-ms- o'tish: barcha 4s qulaylik;
-o- o'tish: barcha 4s qulaylik;
o'tish: barcha 4s qulaylik;
Eslatma: Ba'zi brauzerlarda boshqalarnikidan farqli xususiyatlar uchun boshqa sintaksisi borligini yodda tuting, shuning uchun xususiyatning brauzerdan oldingi versiyasi standart funktsiyaga o'xshashligini taxmin qilmang. Misol uchun, CSS gradyentini yaratish uchun siz lineer-gradient xususiyatidan foydalanasiz. Firefox, Opera va Chrome va Safari-ning zamonaviy versiyalari ushbu xususiyatni tegishli prefiks bilan ishlasa, Chrome va Safari dasturlarining dastlabki versiyalari oldindan yaratilgan xususiyatni-veb-dizayn-gradientlardan foydalanadi. Bundan tashqari, Firefox standart qiymatlardan farqli qiymatlarni ishlatadi.
CSS-ning odatiy bo'lmagan, noyob versiyasi bilan deklaratsiyani har doim tugatishga sabab shuki, brauzer qoidani qo'llab-quvvatlasa, u ulardan foydalanadi. CSS-ni qanday o'qilishini eslab ko'ring. Keyinchalik avvalgi qoidalar avvalgi holatlardan ustun turadi, agar spetsifikatsiya bir xil bo'lsa, shuning uchun brauzer qoida sotuvchisi versiyasini o'qib chiqadi va agar u oddiy ishni qo'llab-quvvatlamasa, undan foydalansa, sotuvchi versiyasini bekor qiladi haqiqiy CSS qoidasi.
Sotuvchi prefikslari xaker emas
Sotuvchi prefikslari birinchi marta kiritilganda, ko'plab veb-mutaxassislar turli xil brauzerlarni qo'llab-quvvatlash uchun veb-sayt kodini kesib o'tishning quyuq kunlariga (" Bu sayt eng yaxshi IEda " xabarlarini eslab qoling) eslab qolingmi yoki yo'qmi degan savolga qiziqish uyg'otdi. CSS sotuvchisi prefikslari hack emas, va siz ularni ishingizda foydalanish haqida hech qanday ogohlantirishlarga ega bo'lmasligi kerak.
CSS hack boshqa xususiyatni to'g'ri ishlashi uchun boshqa element yoki xususiyatni amalga oshirishda kamchiliklarni ishlatadi. Misol uchun, quti modeli ovozli oilaviy xususiyatni tahlil qilishda yoki brauzerlar qanday qilib teskari sindirishni (\) tahlil qilishda ekspluatatsiya qilingan kamchiliklarni buzadi. Biroq, bu hacklar Internet Explorer 5.5 ning box modelini qanday ishlashini va Netscapening qanday talqin qilganligi va ovozli oilaviy uslub bilan aloqasi yo'qligi o'rtasidagi farqni hal qilish uchun ishlatilgan. Yaxshiyamki, bu ikki eskirib qolgan brauzer bu kunlarda bizda tashvishlanmaydigan narsadir.
Bir sotuvchi old qo'shimchani yo'q qilish emas, chunki spetsifikatsiyani mulkning qanday amalga oshirilishi uchun qoidalar o'rnatishiga imkon beradi, ayni paytda brauzerlarni boshqa narsalarni buzmasdan boshqa xususiyatda amalga oshirish imkonini beradi. Bundan tashqari, ushbu prefikslar CSS xususiyatlari bilan ishlaydi , natijada ular spetsifikatsiyaning bir qismi bo'ladi . Mulkni erta olish uchun oddiy kodni qo'shamiz. CSS qoidasini odatiy, prekast bo'lmagan xususiyat bilan tugatishning yana bir sababi. Shunday qilib, to'liq brauzerni qo'llab-quvvatlashga erishilgandan so'ng oldingi versiyalarni qoldirishingiz mumkin.
Brauzerning ma'lum bir xususiyatni qo'llab-quvvatlashini bilmoqchimisiz? CanIUse.com sayti bu axborotni to'plash va qaysi brauzerlar va qaysi brauzerlarning qaysi versiyalari hozirda bir xususiyatni qo'llab-quvvatlashini bilish uchun ajoyib manba.
Vendor prefikslari vaqtinchalik, lekin zerikarli
Ha, barcha brauzerlarda ishlash uchun 2-5 marta xususiyatlarni yozib olishni xohlayotgandir va takrorlab turishi mumkin, lekin bu vaqtinchalik holat. Misol uchun, bir necha yil oldin, qutiga yumaloq burchak o'rnatishingiz kerak edi:
-moz-chegara radiusi: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;
Ammo endi bu brauzerlar ushbu xususiyatni to'liq qo'llab-quvvatlash uchun kelganlar, siz faqat standartlashtirilgan versiyani talab qilasiz:
border-radius: 10px 5px;
Chrome 5.0-versiyadan boshlab CSS3 xususiyatini qo'llab-quvvatladi, Firefox uni 4.0 versiyasiga qo'shdi, Safari 5.0 da, Opera 10.5 da, 4.0 da iOS-da va 2.1 da Android-ga qo'shib qo'ydi. Internet Explorer 9 hatto oldingi versiyani qo'llab-quvvatlamaydi (va IE 8 va pastki uni old qo'shimchali yoki prefikssiz qo'llab-quvvatlamaydi).
Brauzerlarning o'zgaruvchanligi va eskicha brauzerlarni qo'llab-quvvatlash uchun ijodiy yondashuvlar eng zamonaviy uslublardan ko'p yillar o'tgan veb-sahifalarni yaratishni rejalashtirmaguningizcha talab qilinadi. Oxir-oqibat, brauzerning prefikslarini yozish juda oson bo'lib, undan foydalanish mumkin bo'lgan boshqa xatolarni topishingizni talab qiluvchi xatoliklarni topish va ulardan foydalanish kelajakdagi versiyada o'rnatilishi mumkin.