Hvað eru þau og hvers vegna þú ættir að nota þau
CSS seljanda forskeyti, einnig þekktur sem eða CSS vafraforskeyti, eru leið fyrir vafrara að bæta við stuðningi við nýjar CSS-aðgerðir áður en þessi eiginleikar eru að fullu studd í öllum vöfrum. Þetta getur verið gert á meðan á prófunar- og tilraunartímabili stendur þar sem framleiðandi vafrans ákvarðar nákvæmlega hvernig þessar nýju CSS-aðgerðir verða hrint í framkvæmd. Þessar forskeyti varð mjög vinsælar við hækkun CSS3 fyrir nokkrum árum.
Þegar CCS3 var fyrst kynnt, byrjaði fjöldi spennandi eiginleika að ná mismunandi vöfrum á mismunandi tímum. Til dæmis voru netþjónarþjóðirnar (Safari og Chrome) fyrstu sem kynndu eiginleika eiginleika fjör-stíl eins og umbreytingu og umskipti. Með því að nota eigendaskiptaforrit, gætu vefhönnuðir notið þessar nýju eiginleikar í starfi sínu og séð þau á vafra sem studdu þau strax, í stað þess að þurfa að bíða eftir öllum öðrum vafraframleiðendum til að ná upp!
Svo frá sjónarhóli framkvæmdaraðila fyrir framan vefinn eru vafraforskeyti notaðir til að bæta við nýjum CSS-eiginleikum á síðuna, en með því að hafa huggun að vita að vafrarnir styðja þessa stíl. Þetta getur verið sérstaklega gagnlegt þegar mismunandi framleiðendur vafrans innleiða eiginleika á aðeins mismunandi hátt eða með öðru samhengi.
CSS vafraforskeyti sem hægt er að nota (hver þeirra er sérstaklega fyrir annan vafra) eru:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Í flestum tilfellum, til að nota nýjan CSS stíl eign, þú tekur venjulega CSS eign og bæta forskeyti fyrir hverja vafra. Fyrirframgreindar útgáfur myndu alltaf koma fyrst (í hvaða röð sem þú vilt) meðan venjuleg CSS eign kemur síðast. Til dæmis, ef þú vilt bæta við CSS3 umskipti í skjalið þitt, þá ættir þú að nota umskipti eignina eins og sýnt er hér að neðan:
-webkit- umskipti: öll 4s vellíðan;
-moz- umskipti: öll 4s vellíðan;
-ms- umskipti: öll 4s vellíðan;
-ó- umskipti: öll 4s vellíðan;
umskipti: öll 4s vellíðan;
Athugaðu: Mundu að nokkrir vöflur hafa mismunandi setningafræði fyrir ákveðnar eignir en aðrir gera, svo ekki gera ráð fyrir að vafraforskeyti útgáfa af eign sé nákvæmlega sú sama og venjuleg eign. Til dæmis, til að búa til CSS gradient , notarðu línulega-hallandi eignina. Eldur, óperur og nútíma útgáfur af Chrome og Safari nota þessi eign með viðeigandi forskeyti meðan snemma útgáfur af Chrome og Safari nota forskeyti eigna-vefkveikja Einnig notar Firefox mismunandi gildi en venjulegir.
Ástæðan fyrir því að þú endir alltaf yfirlýsingu þína með eðlilegu, ótilgreindri útgáfu CSS eignarinnar er þannig að þegar vafrinn styður regluna mun það nota það. Mundu hvernig CSS er lesið. Seinna reglurnar hafa forgang á undanförnum árum ef sérstakleikurinn er sá sami, svo að vafra myndi lesa seljandaútgáfu reglunnar og nota það ef það styður ekki eðlilega einn, en þegar það gerist mun það hunsa seljandaútgáfu með raunveruleg CSS reglan.
Seljandaforskeyti eru ekki hakk
Þegar seljandaforskeyti voru fyrst kynntar, spurðu margir fagfólk á vefnum hvort þeir væru reiðhestur eða vakt aftur til myrkursdaganna sem fóru fram á kóða vefsíðu til að styðja við mismunandi vafra (muna að þessi síða sé best skoðað í IE ). Forskeyti CSS seljenda eru hins vegar ekki tölvusnápur, og þú ættir ekki að hafa neina fyrirvara um notkun þeirra í vinnunni þinni.
A CSS hakk nýtur galla í framkvæmd annars þáttar eða eignar til þess að fá annan eign til að virka rétt. Til dæmis notaði kassaklúbburinn galli við að flokka radd fjölskyldu eignarinnar eða hvernig vafrar flokka bakslag (\). En þessi hack var notuð til að leysa vandamálið af því hvernig Internet Explorer 5.5 höndlaði kassann líkanið og hvernig Netscape túlkaði það og hafði ekkert að gera með rödd fjölskyldu stíl. Sem betur fer eru þessar tvær gamaldags vafrar sjálfur sem við höfum ekki áhyggjur við þessa dagana.
Seljandi forskeyti er ekki hakk vegna þess að það gerir forskriftinni kleift að setja upp reglur um hvernig eignir gætu verið framkvæmdar en á sama tíma leyfa vafraaðilar að framkvæma eign á annan hátt án þess að brjóta allt annað. Ennfremur eru þessi forskeyti að vinna með CSS eiginleika sem að lokum verði hluti af forskriftinni . Við erum einfaldlega að bæta við kóða til að fá aðgang að eigninni snemma. Þetta er önnur ástæða fyrir því að þú lýkur CSS reglunum með eðlilegum, ótilgreindum eignum. Þannig geturðu sleppt fyrirfram ákveðnum útgáfum þegar fullur stuðningur við vafra er náð.
Viltu vita hvað vafrinn styður fyrir tiltekna eiginleika? Vefsíðan CanIUse.com er yndisleg úrræði til að safna þessum upplýsingum og láta þig vita hvaða vafrar, og hvaða útgáfur af þessum vöfrum, styðja nú við eiginleika.
Seljandi Forskeyti eru pirrandi en tímabundin
Já, það gæti verið pirrandi og endurtekið að þurfa að skrifa eignirnar 2-5 sinnum til að fá það að verkum í öllum vöfrum en það er tímabundið. Til dæmis, fyrir nokkrum árum, að setja ávalið horn á kassa sem þú þurfti að skrifa:
-moz-landamæris-radíus: 10px 5px;
-webkit-landamærin-toppur-vinstri-radíus: 10px;
-webkit-landamæri-toppur-hægri-radíus: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-landamærin-botn-vinstri-radíus: 5px;
Landamærusvið: 10px 5px;
En nú þegar vafrar hafa komið til að styðja þessa eiginleika fullkomlega, þá þarftu í raun aðeins staðlaða útgáfu:
Landamærusvið: 10px 5px;
Chrome hefur stutt CSS3 eignina frá útgáfu 5.0, Firefox setti það í útgáfu 4.0, Safari setti það í 5,0, Opera í 10,5, IOS í 4.0 og Android í 2.1. Jafnvel Internet Explorer 9 styður það án forskeyti (og IE 8 og lægra styður það ekki með eða án forskeyta).
Mundu að vafrar eru alltaf að fara að breytast og skapandi aðferðir við að styðja eldri vafra verða nauðsynlegar nema þú ætlar að byggja upp vefsíður sem eru ár að baki flestum nútímalegum aðferðum. Að lokum er miklu auðveldara að skrifa vafraforskeyti en að finna og nýta villur sem eru líklega fastar í framtíðinni, þar sem þú þarft að finna aðra villu til að nýta og svo framvegis.