Тэдгээр нь юу вэ, яагаад тэдгээрийг ашиглах ёстой вэ?
CSS худалдагчийн угтварууд, мөн заримдаа CSS хөтөч угтвар гэж нэрлэдэг бөгөөд эдгээр функцуудыг бүх хөтчүүдэд бүрэн дэмжигдэхээс өмнө шинэ CSS боломжуудыг дэмждэг болгохын тулд хөтөч үйлдвэрлэгчдэд зориулж дэмжлэг үзүүлэх арга юм. Хөтөч үйлдвэрлэгч эдгээр шинэ CSS функцүүд хэрхэн хэрэгжихийг тодорхойлдог сорилт, туршлагын туршид үүнийг хийж болно. Эдгээр угтварууд нь хэдхэн жилийн өмнө CSS3- ийн өсөлттэй ихээхэн алдартай болсон.
CCS3 анх нэвтэрч эхлэхэд маш их сонирхолтой шинж чанарууд нь өөр өөр цагт янз бүрийн хөтчүүдэд халдах болжээ. Жишээлбэл, вебкит хөдөлгүүрт хөтчүүд (Safari болон Chrome) нь хувиргах, шилжилтийн үйл явцын зарим шинжийг танилцуулах анхны хэлбэрүүд байсан. Үйлдвэрлэгчийн урьдчилсан шинж чанарыг ашигласнаар вэб дизайнерууд эдгээр шинэ функцуудыг ажилдаа ашиглаж чаддаг байсан бөгөөд тэднийг бусад бүх хөтөч үйлдвэрлэгчдийг хүлээж авахын оронд тэдгээрийг шууд дэмжигдсэн хөтчүүд дээр харууллаа!
Тиймээс урд талын вэб хөгжүүлэгчийн үүднээс вэб хөтчийн угтварууд нь сайтын шинэ CSS функцүүдийг нэмэхийн тулд ашигладаг бөгөөд энэ нь хөтөчүүд тэдгээр загваруудыг дэмждэг гэдгийг мэддэг. Янз бүрийн хөтөч үйлдвэрлэгчид шинж чанаруудыг арай өөр аргаар эсвэл өөр синтакс ашиглан хэрэгжүүлбэл энэ нь ялангуяа ашигтай байдаг.
Таны ашиглаж болох CSS хөтчийн угтварууд (өөр өөр браузерын хувьд өөр өөр байдаг):
- Андройд: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Ихэнх тохиолдолд, шинэ CSS загварын өмчийг ашиглахын тулд стандарт CSS өмчийг авч, браузер бүрт зориулсан угтварыг нэмнэ. Урьдчилан хэвлэгдсэн хувилбарууд нь үргэлж эхний ээлжинд ирдэг (таны хүссэн дарааллаар). Жишээлбэл, хэрэв та документэд CSS3 шилжүүлэхийг нэмэхийг хүсвэл дараах шилжилтийн шилжилтийн хөрөнгийг ашиглах болно:
-webkit- transition: бүх 4-н хялбар;
-мөн- шилжилт: бүх 4-н хялбар;
-мас- шилжилт: бүх 4-н хялбар;
-и шилжилт: бүх 4-н хялбар;
Шилжилт: бүх 4-н хялбар;
Тэмдэглэл: Зарим хөтөч нь зарим шинж чанарыг бусдынхаас өөр синтакстай байдгийг санаарай. Иймээс браузерын prefixed хувилбар нь стандарт шинжтэй яг адилхан байдаг. Жишээ нь, CSS градиент үүсгэхийн тулд та шугаман-градентыг ашигладаг. Firefox, Opera, болон Chrome болон Safari-ийн орчин үеийн хувилбарууд нь энэ угтварыг уг кредит ба өмнөх хувилбарууд нь уг prefixed property -webkit-градиентыг ашигладаг. Мөн Firefox нь стандартуудыг бодвол өөр өөр утгуудыг ашигладаг.
CSS-ийн өмчийн хэвийн бус угтвартай хувилбараар үргэлжлүүлэх шалтгаан нь хөтөч дүрмийг дэмжсэн үед үүнийг ашиглах болно. CSS хэрхэн уншиж байгааг санаарай. Дараагийн дүрмүүд нь өвөрмөц байдал ижил байвал хэрэв хөтөч нь дүрэм журмын үйлдвэрлэгчийн хувилбарыг уншиж, хэрэв энэ нь хэвийн дэмждэггүй бол үүнийг дараа нь үйлдвэрлэгчийн хувилбарыг дарж өөрчлөх болно. бодит CSS дүрмүүд.
Худалдагчийн давуу талууд нь Хакер биш юм
Үйлдвэрлэгчийн угтварыг анх танилцуулсны дараа олон вэбсайтууд нь хакердсан эсвэл өөр өөр хөтөчийг дэмжихийн тулд вэбсайтын кодыг хаахын тулд харанхуй өдрүүдэд шилжих эсэх нь эргэлзэж байсан (" Энэ сайт нь IE дээр хамгийн сайн үзсэн " гэдгийг санаарай). CSS худалдагчийн угтварууд нь хакерууд биш, харин тэдгээрийг ашиглахад ямар нэгэн захиалга өгөх шаардлагагүй юм.
CSS өөр нэг эд хөрөнгийг зөв ажиллахын тулд өөр нэг элемент буюу өмчийг хэрэгжүүлэхэд алдаа гардаг. Жишээ нь, хайрцаг загвар нь гэр бүлийн өмчийн шинж чанарыг задлан шинжилж, эсвэл хөтөчийг хэрхэн хакердсаныг (\) харуулдаг. Гэхдээ эдгээр серверүүд нь Internet Explorer 5.5 хайрцагны загварыг хэрхэн зохицуулах, Netscape хэрхэн тайлбарласан, ялгааг нь засахын тулд асуудлыг шийдэхэд хэрэглэгдэж байсан бөгөөд дуу хоолойны гэр бүлийн хэв маягтай ямар ч холбоогүй юм. Эдгээр хоёр хоцрогдсон хөтчүүдийг бид өнөөдөр өөрсдөдөө санаа тавьдаггүйд баярлалаа.
Борлуулагчийн угтвар нь хакердахыг хэрхэн хэрэгжүүлж болох дүрмийг тохируулахыг зөвшөөрдөг тул борлуулагчийн угтвар нь хакер биш, харин бусад зүйлсийг зөрчихгүйгээр өөрөөр хийх боломжийг хөтөлөгчид олгодог. Түүнээс гадна эдгээр угтварууд нь CSS шинж чанаруудтай ажиллах бөгөөд энэ нь эцэст нь тодорхойлолтуудын хэсэг байх болно . Бид түрээслүүлэхийн тулд зарим кодыг нэмж байна. Энэ нь CSS-ийн дүрмийг энгийн хэвийн бус prefixed property-тэй цуцлах бас нэг шалтгаан юм. Бүрэн браузерын дэмжлэг хангагдсан бол уг аргаар өмнөх хувилбаруудыг унагаж болно.
Тодорхой функцийг хөтөчөөр дэмжих талаар мэдэхийг хүсч байна уу? CanIUse.com вэбсайт нь энэ мэдээллийг цуглуулж, аль хөтөч болон аль хөтөчдийн аль хувилбарууд нь одоо ямар нэгэн онцлогийг дэмжиж байгааг танд мэдэгдэх боломжийг олгодог.
Худалдагчийн давуу талууд нь сэтгэл хөдөлгөм боловч түр зуурын байна
Тиймээ, бүх төрлийн хөтчүүд дээр ажиллахын тулд шинж чанаруудыг 2-5 удаа бичиж байх хэрэгтэй, гэхдээ энэ нь түр зуурын нөхцөл байдал юм. Жишээ нь, хэдхэн жилийн өмнө бичсэн хайрцган дээр бөөрөнхий буланг байрлуул:
-moz-border-radius: 10px 5px;
- вэбсайт-хилийн дээд зүүн радиус: 10px;
- вэбвайт-хилийн дээд баруун радиус: 5px;
-Веккит-боомт-доод-баруун радиус: 10px;
-Вербит-боомт-доод-зүүн радиус: 5px;
хилийн радиус: 10px 5px;
Гэхдээ одоо хөтөч энэ функцийг бүрэн дэмжиж ирэхэд та зөвхөн стандартчилагдсан хувилбар л хэрэгтэй.
хилийн радиус: 10px 5px;
Chrome 5.0 хувилбараас хойш CSS3 өмчийг дэмжсэн бол Firefox 4.0 хувилбарт нэмэгдсэн, Safari 5.0-д 5.0, Opera 10.5, iOS 4.0, Android-д 2.1-д нэмэгдсэн. Internet Explorer 9 ч гэсэн үүнийг угтваргүйгээр дэмждэг (мөн IE 8 ба түүнээс доош нь үүнийг угтвартай эсвэл үгүйсгэлгүйгээр дэмждэггүй).
Хөтөч нь үргэлж өөрчлөгдөж, хуучин хөтөчүүдийг дэмжих бүтээлч арга барилыг хамгийн орчин үеийн аргын арваас хэдэн жилээр вэб хуудас бүтээхээр төлөвлөж байгаа бол танд хэрэгтэй болно гэдгийг санаарай. Эцэст нь хэлэхэд, хөтчийн угтвар бичих нь ирээдүйд хувилбараар засагдах магадлалыг илрүүлэх, ашиглахаас хамаагүй хялбар бөгөөд ашиглахын тулд өөр нэг алдааг олохыг шаарддаг.