Ano ang mga ito at kung bakit dapat mong gamitin ang mga ito
Ang mga prefix ng vendor ng CSS, na kilala rin bilang o prefix ng browser ng CSS , ay isang paraan para sa mga gumagawa ng browser upang magdagdag ng suporta para sa mga bagong tampok ng CSS bago ang mga tampok na ito ay ganap na suportado sa lahat ng mga browser. Ito ay maaaring gawin sa panahon ng isang uri ng pagsubok at panahon ng pag-eksperimento kung saan ang tagagawa ng browser ay nagpasiya nang eksakto kung paano ipapatupad ang mga bagong tampok ng CSS na ito. Ang mga prefix na ito ay napakapopular sa pagtaas ng CSS3 ilang taon na ang nakalilipas.
Kapag ang CCS3 ay unang ipinakilala, ang isang bilang ng mga nasasabik na ari-arian ay nagsimulang tumama ng iba't ibang mga browser sa iba't ibang oras. Halimbawa, ang mga webkit na pinagagana ng mga browser (Safari at Chrome) ay ang mga unang nagpapakilala sa ilan sa mga katangian ng estilo ng animation tulad ng pagbabagong-anyo at paglipat. Sa pamamagitan ng paggamit ng mga prefix na katangian ng vendor, ginamit ng mga taga-disenyo ng web ang mga bagong tampok na iyon sa kanilang trabaho at ipinapakita ang mga ito sa mga browser na suportado ang mga ito kaagad, sa halip na maghintay para sa bawat iba pang mga tagagawa ng browser upang abutin!
Kaya mula sa pananaw ng isang front-end na web developer, ang mga prefix ng browser ay ginagamit upang magdagdag ng mga bagong tampok ng CSS sa isang site habang nakakapag-aliw na alam na ang mga browser ay sumusuporta sa mga estilo. Ito ay maaaring maging kapaki-pakinabang lalo na kapag ang iba't ibang mga tagagawa ng browser ay nagpapatupad ng mga katangian sa bahagyang iba't ibang paraan o may ibang syntax.
Ang prefix ng CSS browser na magagamit mo (bawat isa ay tiyak sa ibang browser) ay:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Sa karamihan ng mga kaso, upang magamit ang isang tatak ng bagong estilo ng estilo ng CSS, kinukuha mo ang karaniwang property ng CSS at idagdag ang prefix para sa bawat browser. Ang mga prefix na bersyon ay laging nanggagaling (sa anumang pagkakasunud-sunod na gusto ninyo) habang ang normal na ari-arian ng CSS ay darating na huling. Halimbawa, kung nais mong magdagdag ng paglipat ng CSS3 sa iyong dokumento, gagamitin mo ang pag-aari ng paglipat tulad ng ipinapakita sa ibaba:
-webkit- transition: lahat ng 4s kadalian;
-moz- transition: lahat ng 4s kadalian;
-ms- transition: lahat ng 4s kadalian;
-O transisyon: lahat ng 4s kadalian;
paglipat: lahat ng 4s kadalian;
Tandaan: Tandaan, ang ilang mga browser ay may ibang syntax para sa ilang mga pag-aari kaysa iba, kaya huwag ipalagay na ang prefix na bersyon ng isang property ng browser ay eksaktong kapareho ng karaniwang ari-arian. Halimbawa, upang lumikha ng CSS gradient , gagamitin mo ang linear-gradient property. Ginagamit ng Firefox, Opera, at modernong mga bersyon ng Chrome at Safari ang property na may naaangkop na prefix habang ang mga naunang bersyon ng Chrome at Safari ay gumagamit ng prefix na property -webkit-gradient. Gayundin, ang Firefox ay gumagamit ng iba't ibang mga halaga kaysa sa mga pamantayan.
Ang dahilan kung bakit palagi mong tinatapos ang iyong deklarasyon sa normal, di-prefix na bersyon ng property ng CSS ay kaya na kapag ang isang browser ay sumusuporta sa tuntunin, gagamitin nito ang isang iyon. Tandaan kung paano nabasa ang CSS. Ang mga tuntunin sa ibang pagkakataon ay nangunguna sa mga nauna kung ang pagiging totoo ay pareho, kaya ang isang browser ay magbasa ng bersyon ng patnugot ng isang patakaran at gamitin iyon kung hindi nito sinusuportahan ang normal na isa, ngunit kapag ginagawa nito, ito ay sasapawan ang bersyon ng vendor ang aktwal na panuntunan ng CSS.
Ang Vendor Prefixes ay Hindi isang Hack
Kapag ang prefix ng vendor ay unang ipinakilala, maraming mga propesyonal sa web ang nagtaka kung sila ay isang tadtarin o isang shift pabalik sa madilim na araw ng forking isang code ng website upang suportahan ang iba't ibang mga browser (tandaan ang mga " Ang site na ito ay pinakamahusay na tiningnan sa IE " mensahe). Ang mga prefix ng mga vendor ng CSS ay hindi hacks, gayunpaman, at dapat kang magkaroon ng walang reserbasyon tungkol sa paggamit nito sa iyong trabaho.
Ang CSS hack ay nagsasamantala ng mga depekto sa pagpapatupad ng isa pang elemento o ari-arian upang makakuha ng isa pang ari-arian upang gumana nang tama. Halimbawa, ang kahon ng modelo ng kahon na sinasamantalang pinagsamantalahan sa pag-parse ng ari-arian ng boses na pamilya o sa kung paano i-parse ang mga browser ng backslashes (\). Ngunit ang mga hacks na ito ay ginagamit upang ayusin ang problema ng pagkakaiba sa pagitan ng kung paano ang Internet Explorer 5.5 ay nakontrol ang modelo ng kahon at kung paano ito binigyang kahulugan ng Netscape, at walang kinalaman sa estilo ng pamilya ng boses. Sa kabutihang palad ang dalawang hindi napapanahong browser na ito ay wala kaming mga alalahanin sa mga araw na ito.
Ang prefix ng isang vendor ay hindi isang tadtarin dahil pinapayagan nito ang pagtutukoy na mag-set up ng mga patakaran para sa kung paano maaaring ipatupad ang isang ari-arian, habang sa parehong oras na nagpapahintulot sa mga gumagawa ng browser na ipatupad ang isang ari-arian sa ibang paraan nang hindi sinasadya ang lahat ng iba pa. Bukod dito, ang mga prefix na ito ay nagtatrabaho sa mga katangian ng CSS na kalaunan ay magiging bahagi ng detalye . Nagdagdag lamang kami ng ilang code upang ma-access nang maaga ang property. Ito ay isa pang dahilan kung bakit natapos mo ang panuntunan ng CSS sa normal, di-prefix na property. Sa ganoong paraan maaari mong i-drop ang prefix na bersyon kapag ang buong suporta sa browser ay nakamit.
Gusto mong malaman kung ano ang sinusuportahan ng browser para sa isang partikular na tampok? Ang website CanIUse.com ay isang kahanga-hangang mapagkukunan para sa pagtitipon ng impormasyong ito at ipapaalam sa iyo kung aling mga browser, at kung aling mga bersyon ng mga browser, kasalukuyang sinusuportahan ang isang tampok.
Ang Vendor Prefixes ay nakakainis Ngunit Pansamantalang
Oo, maaaring makaramdam ng nakakainis at paulit-ulit na magsulat ng mga ari-arian 2-5 beses upang makuha ito upang gumana sa lahat ng mga browser, ngunit ito ay isang pansamantalang sitwasyon. Halimbawa, ilang taon na ang nakalilipas, upang magtakda ng isang bilugan na sulok sa isang kahon na kailangan mong 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;
Ngunit ngayon na ang mga browser ay dumating upang ganap na suportahan ang tampok na ito, kailangan mo lamang ang standardized na bersyon:
border-radius: 10px 5px;
Sinusuportahan ng Chrome ang property ng CSS3 mula noong bersyon 5.0, Idinagdag ito ng Firefox sa bersyon 4.0, idinagdag ito ng Safari sa 5.0, Opera sa 10.5, iOS sa 4.0, at Android sa 2.1. Kahit na sinusuportahan ito ng Internet Explorer 9 nang walang prefix (at IE 8 at mas mababa ay hindi sinusuportahan ito nang walang prefix).
Tandaan na ang mga browser ay palaging magiging pagbabago at malikhaing diskarte sa pagsuporta sa mas lumang mga browser ay kinakailangan maliban kung nagpaplano ka sa pagtatayo ng mga web page na taon sa likod ng pinaka modernong paraan. Sa wakas, ang pagsulat ng mga prefix ng browser ay mas madali kaysa sa paghahanap at pagsasamantala ng mga error na malamang na maayos sa isang bersyon sa hinaharap, na nangangailangan na makakita ka ng isa pang error na pagsamantalahan at iba pa.