Unsa kini sila ug nganong kinahanglan nimo kining gamiton
Ang mga prefix nga vendor sa CSS, nga usahay gitawag nga CSS prefixes, usa ka pamaagi alang sa mga tiggamit sa browser nga makadugang sa suporta alang sa bag-ong mga feature sa CSS sa wala pa kini nga mga feature hingpit nga gisuportahan sa tanang mga browser. Mahimo kini sa panahon sa usa ka matang sa testing ug panahon sa pag-eksperimento diin ang tiggama sa browser nagtino kon unsaon nga ipatuman kining mga bag-ong CSS features. Kini nga mga prefix nahimong popular kaayo sa pagtubo sa CSS3 pipila ka tuig na ang milabay.
Sa diha nga ang CCS3 unang gipaila, usa ka gidaghanon sa mga excited properties nagsugod sa pag-igo sa lainlaing mga browser sa nagkalainlaing mga panahon. Pananglitan, ang webkit nga gipadagan nga mga browser (Safari ug Chrome) mao ang mga una nga nagpaila sa pipila sa mga kinaiya sa estilo sa animation sama sa pagbag-o ug pagbag-o. Pinaagi sa paggamit sa prefix nga mga propyedad sa vendor, ang mga designers sa web nakagamit sa mga bag-ong bahin sa ilang trabaho ug gipakita kini diha sa mga browser nga nagsuporta kanila diha-diha dayon, imbis nga maghulat alang sa matag laing tiggamit sa browser aron makasagubang!
Busa gikan sa panglantaw sa usa ka front-end nga web developer, ang mga prefix sa browser gigamit aron sa pagdugang sa bag-ong mga feature sa CSS ngadto sa usa ka site samtang nahupay nga nasayud nga ang mga browser mosuporta sa mga estilo. Kini makatabang ilabi na kung ang nagkalainlaing mga tiggamit sa browser nagpatuman sa mga kabtangan sa gamay nga nagkalainlain nga mga paagi o uban sa lain nga syntax.
Ang CSS browser prefix nga imong magamit (ang matag usa nga espesipiko sa laing browser) mao ang:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Sa kadaghanan nga mga kaso, sa paggamit sa usa ka bag-o nga estilo sa CSS nga kabtangan, gikuha nimo ang standard CSS property ug idugang ang prefix alang sa matag browser. Ang mga prefix nga mga bersyon sa kanunay moabut sa una (sa bisan unsang pagkasunod nga gusto nimo) samtang ang normal nga CSS nga propyedad moabut sa katapusan. Pananglitan, kon gusto ka magdugang og transisyon sa CSS3 sa imong dokumento, imong gamiton ang transisyon nga propiedad sama sa gipakita sa ubos:
-webkit- transition: tanan 4s kasayon;
-moz- transition: tanan 4s kasayon;
-mga transisyon: tanan nga 4s kasayon;
-o nga pagbalhin: tanan nga 4s kasayon;
transisyon: tanan 4s kasayon;
Hinumdumi: Hinumdumi, ang pipila ka mga browser adunay lain nga syntax alang sa pipila nga mga kabtangan kay sa uban, busa ayaw hunahunaa nga ang prefix nga bersyon sa usa ka propiedad sa browser susama gayud sa standard property. Pananglitan, sa paghimo og gradient sa CSS , imong gigamit ang linear-gradient property. Ang Firefox, Opera, ug modernong mga bersyon sa Chrome ug Safari nagagamit sa maong propyedad uban sa tukmang prefix samtang ang unang bersyon sa Chrome ug Safari naggamit sa prefix nga property -webkit-gradient. Usab, ang Firefox naggamit sa nagkalainlain nga mga bili kay sa mga sumbanan.
Ang rason nga kanunay nimong tapuson ang imong deklarasyon sa normal, dili prefix nga bersyon sa propiedad sa CSS mao nga kon ang usa ka browser nagsuporta sa lagda, magamit kini. Hinumdomi kung giunsa pagbasa ang CSS. Ang ulahing mga kalagdaan mag-una sa mga nauna kung ang pagkasayod managsama, aron ang usa ka browser magbasa sa bersyon sa vendor sa usa ka lagda ug gamiton nga kung kini wala magsuporta sa normal, apan sa higayon nga kini mahitabo, kini madaut sa bersyon sa vendor nga ang tinuod nga lagda sa CSS.
Ang Vendor Prefixes Dili Usa ka Hack
Sa diha nga una nga gipaila ang mga prefix sa vendor, daghang mga propesyonal sa web naghunahuna kon kini usa ka hack o pagbalhin balik ngadto sa mangitngit nga mga adlaw sa pagpugong sa kodigo sa usa ka website sa pagsuporta sa lainlaing mga browser (hinumdomi kadtong " Ang site nga kini labing maayo nga gitan-aw sa IE " nga mga mensahe). Ang mga prefix sa CSS vendor dili hacks, hinoon, ug kinahanglan nga wala ka magbalhay mahitungod sa paggamit niini sa imong trabaho.
Ang usa ka CSS hack nagapahimulos sa mga sayup diha sa pagpatuman sa laing elemento o kabtangan aron sa pagkuha sa laing propiedad nga magtrabaho sa husto. Pananglitan, ang modelo sa kahon nga hack nga gipahimuslan nga mga sayup sa pagtapos sa pagpanag-iya sa pamilya sa tingog o kon giunsa pagsalba sa mga browser ang mga backslash (\). Apan kini nga mga pananglitan gigamit aron masulbad ang problema sa kalainan tali sa kung giunsa sa Internet Explorer 5.5 ang pagdumala sa modelo sa kahon ug kung giunsa kini paghubad sa Netscape, ug wala'y labot sa estilo sa tingog sa pamilya. Mapasalamaton nga kining duha ka daan nga mga browser mao ang wala namo mabalaka niining mga adlawa.
Ang usa ka prefix sa vendor dili usa ka hack tungod kay kini nagtugot sa paghatag detalye sa mga lagda kon unsaon nga ang usa ka kabtangan mahimo nga ipatuman, samtang sa samang higayon nga ang mga tiggamit sa browser sa pagpatuman sa usa ka kabtangan sa usa ka laing paagi nga dili mabungkag ang tanan. Dugang pa, kini nga mga prefix naglihok sa mga kabtangan sa CSS nga sa kadugayan mahimong usa ka bahin sa paghingalan . Nagdugang lamang kami og pipila ka mga code aron ma-access ang mga butang sa sayo pa. Kini mao ang laing hinungdan kung nganong imong gitapos ang CSS rule uban ang normal, dili prefix nga kabtangan. Nianang paagiha mahimo nimong ihulog ang prefix nga mga bersiyon sa higayon nga makab-ot ang bug-os nga suporta sa browser.
Gusto nga mahibal-an kon unsa ang suporta sa browser alang sa usa ka bahin? Ang website CanIUse.com usa ka talagsaon nga kapanguhaan alang sa pagpundok niini nga kasayuran ug pagpahibalo kanimo kung unsang mga browser, ug ang mga bersyon sa mga browser, nga nagsuporta sa usa ka bahin.
Ang mga Vendor Prefixes mao ang Annoying But Temporary
Oo, mahimong makalagot ug magbalik-balik nga isulat ang mga kabtangan 2-5 ka beses aron kini mahimo sa tanan nga mga browser, apan kini usa ka temporaryo nga sitwasyon. Pananglitan, pipila lang ka tuig na ang milabay, aron ibutang ang usa ka lingin nga kanto sa usa ka kahon nga imong isulat:
-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;
Apan karon nga ang mga browerers miabut sa bug-os nga pagsuporta niini nga bahin, gikinahanglan gayud nimo ang standardized version:
border-radius: 10px 5px;
Gipaluyohan sa Chrome ang property nga CSS3 sukad sa bersyon 5.0, gidugang kini sa Firefox sa bersyon 4.0, gidugang kini ni Safari sa 5.0, Opera sa 10.5, iOS sa 4.0, ug Android sa 2.1. Bisan ang Internet Explorer 9 nagsuporta niini nga walay usa ka prefix (ug ang IE 8 ug ubos ang wala mosuporta niini o walay mga prefix).
Hinumdomi nga ang mga browser kanunay nga mag-usab ug mamugnaon nga mga pamaagi sa pagsuporta sa mga daan nga mga browser nga gikinahanglan gawas kon magplano ka sa pagtukod sa mga pahina sa web nga mga tuig luyo sa labing modernong pamaagi. Sa katapusan, ang pagsulat sa mga prefix sa browser mas sayon kay sa pagpangita ug pagpahimulos sa mga sayop nga lagmit nga mapiho sa usa ka umaabot nga bersyon, nga nagkinahanglan nga makakita ka og lain nga sayop nga pahimuslan ug padayon.