Apa sing padha lan apa sing kudu digunakake
Awalan vendor CSS, uga kedadeyane dikenal minangka utawa awalan browser CSS , minangka cara kanggo pembuat browser nambah dukungan kanggo fitur CSS anyar sadurunge fitur-fitur kasebut wis didhukung kanthi lengkap ing kabeh browser. Iki bisa ditindakake sajrone wektu pangujian lan eksperimen ing ngendi pabrikan browser nemtokake persis carane fitur-fitur CSS kasebut bakal dileksanakake. Prefiks iki dadi populer banget karo munculé CSS3 sawetara taun kepungkur.
Nalika CCS3 wiwitan diwiwiti, sapérangan jinis sing bungah wiwit ngganggu browser sing béda ing wektu sing béda. Contone, browser kanthi webkit (Safari lan Chrome) minangka sing pisanan ngenalake sawetara sifat gaya animasi kaya transformasi lan transisi. Kanthi nggunakake properti prefixed vendor, perancang web bisa nggunakake fitur-fitur anyar ing karya lan nduduhake ing browser sing ndhukung dheweke langsung, tinimbang kudu ngenteni saben produser browser liyane kanggo nyekel!
Dadi saka perspektif pangembang web ngarep, prefixes browser digunakake kanggo nambah fitur-fitur CSS anyar menyang situs nalika duwe rasa nyaman yen browser bakal ndhukung gaya kasebut. Iki bisa mbiyantu banget nalika manufaktur browser sing beda-beda nyetel sifat kanthi cara sing beda-beda utawa karo sintaks sing beda.
Awalan browser CSS sing bisa digunakake (saben sing spesifik kanggo browser sing beda) yaiku:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Ing sawetara kasus, nggunakake properti gaya CSS anyar, sampeyan njupuk properti standar CSS lan nambahake awalan kanggo saben browser. Versi prefixes mesthi bakal kasedhiya pisanan (miturut urutan sing luwih disenengi) nalika properti CSS normal bakal dadi pungkasan. Contone, yen sampeyan pengin nambah transisi CSS3 menyang dokumen, sampeyan bakal nggunakake properti transisi kaya sing kapacak ing ngisor iki:
-webkit- transisi: kabeh 4s ease;
-moz- transisi: kabeh 4s ease;
-ms- transisi: kabeh 4s ease;
-o- transisi: kabeh 4s ease;
transisi: kabeh 4s ease;
Cathetan: Elinga, sawetara browser duwe sintaks sing beda kanggo sifat tartamtu tinimbang wong liya, supaya ora nganggep yen versi prefixed saka properti persis padha karo properti standar. Contone, kanggo nggawe gradien CSS , sampeyan nggunakake properti linear-gradient. Firefox, Opera, lan versi modern saka Chrome lan Safari nggunakake properti kasebut karo awalan sing cocok nalika versi awal Chrome lan Safari nggunakake prefixed property -webkit-gradient. Uga, Firefox migunakake angka sing beda saka sing standar.
Alesan sing tansah mungkasi pranyatan sampeyan karo versi normal sing ora di-prefixed saka sifat CSS supaya nalika browser ndhukung aturan kasebut, bakal nggunakake sing kasebut. Elinga carane maca CSS. Aturan sing bakal diawali luwih penting tinimbang sing luwih spesifik, saengga browser bakal maca versi vendor aturan lan nggunakake yen ora ndhukung sing normal, nanging yen ora, bakal ngatasi versi vendor karo aturan CSS sing nyata.
Vendor Prefixes Not a Hack
Nalika prefixes vendor kawiwitan dituduhake, akeh profesional web kepingin weruh yen ana hack utawa shift bali menyang dina-dina peteng ngelingi kode situs web kanggo ndhukung browser liyane (eling sing " Situs iki paling disenengi ing IE " pesen). Prefiks vendor CSS ora dadi hacks, nanging, sampeyan kudu ora menehi prentah babagan nggunakake ing karya sampeyan.
A CSS hack exploits flaws ing implementasine liyane unsur utawa properti kanggo njaluk liyane properti kanggo bisa digunakake kanthi bener. Contone, model kothak ngganggu cacat eksploitasi ing parsing saka properti omah swara utawa cara parsing ngetungake backslashes (\). Nanging hacks iki digunakake kanggo ndandani masalah sing beda antarane carane Internet Explorer 5.5 ditangani model kothak lan carane Netscape nggujokake, lan duwe apa-apa karo gaya kulawarga swara. Alhamdulillah, browser loro sing wis suwé iki ora duwé rasa isin kanggo dina iki.
Pucukan vendor ora minangka hack amarga ngidini spesifikasi nyiyapake aturan babagan carane properti bisa dileksanakake, nalika ing wektu sing padha ngijini nggawe panganggo browser kanggo ngleksanakake properti kanthi cara sing beda tanpa mbebasake kabeh liya. Salajengipun, prefiks punika nggarap sifat CSS ingkang pungkasanipun dados bagian saking spesifikasi . Kita mung nambah sawetara kode kanggo entuk akses menyang properti awal. Iki minangka alesan liya kok sampeyan mungkasi aturan CSS kanthi properti sing ora di-prefixed. Mangkono sampeyan bisa nyelehake versi prefixed yen dhukungan browser lengkap wis dirampungake.
Pengin ngerti apa dhukungan browser kanggo fitur tartamtu? Situs web CanIUse.com minangka sumber apik kanggo ngumpulake informasi kasebut lan ngidini sampeyan ngerti browser, lan versi saka browser kasebut, saiki ndhukung fitur.
Vendor Prefixes are Annoying But Temporary
Ya, bisa uga aran ngganggu lan bola-bali kudu nulis properti 2-5 kaping supaya bisa digunakake ing kabeh browser, nanging kahanan sakupenge. Contone, sawetara taun kepungkur, kanggo nyetel sudhut bunder ing kothak sampeyan kudu nulis:
-moz-border-radius: 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;
Nanging saiki browser sing wis ndhukung fitur iki, sampeyan mung perlu versi standar:
border-radius: 10px 5px;
Chrome ndhukung properti CSS3 wiwit versi 5.0, Firefox ditambahake ing versi 4.0, Safari ditambahake ing 5.0, Opera ing 10.5, iOS ing 4.0, lan Android ing 2.1. Malah Internet Explorer 9 ndhukung tanpa ater-ater (lan IE 8 lan ngisor ora ndhukung utawa tanpa prefiks).
Elinga yen browser bakal tansah owah-owahan lan pendekatan kreatif kanggo ndhukung browser lawas bakal dibutuhake kajaba sampeyan lagi mbangun ing kaca - kaca web sing taun sakdurunge metode paling modern. Ing pungkasan, nulis awalan browser luwih gampang tinimbang nemokake lan ngeksploitasi kasalahan sing bakal paling apik ditrapake ing versi mangsa, sing mbutuhake sampeyan nemokake kesalahan liyane kanggo ngeksploitasi lan sateruse.