Wat binne se en wêrom dan se brûke moatte
CSS-ferfiersfoarsjenningen, somtiden ek wol bekend as CSS- browser prefikses, binne in manier foar browser makkers om stipe foar nije CSS-funksjes foardat dizze funksjes folslein stipe wurde yn alle browsers. Dit kin dien wurde yn in soarte fan test en eksperimentaasjeperioade wêr't de browser-fabrikant krekt is hoe't dizze nije CSS-funksjes ynfierd wurde. Dizze prefiks wurde tige populêr mei de opkomst fan CSS3 in pear jier lyn.
As CCS3 yn earste ynstânsje yntrodusearre is, begjinne in tal begearte eigenskippen te begjinnen fan ferskate browsers op ferskillende tiden. De webkit-brûkte blêders (Safari en Chrome) wiene bygelyks de earste dy't inkele fan de animaasje-styl-eigenskippen yntrodusearje as transformaat en transysje. Troch gebrûklike eigenskippen fan ferfanger te brûken, kinne web-ûntwerpers de nije funksjes brûke yn har wurk en hawwe se te sjen op de browsers dy't se fuort stipe hawwe, ynstee fan wachtsjen foar elke oare browserhersteller om op te heljen!
Sa fanút it perspektyf fan in front-end web-ûntwikkeler, brûke prefixes fan blêder brûkt om nije CSS-funksjes op in side te tafoegje, wylst komfort wist dat de browsers dizze stilen stypje. Dit kin benammen brûk wêze as ferskate browser-fabrikanten ymposearje op ferskate wizen of mei in oare sytaksje.
De CSS-blêder prefixes dy't jo brûke kinne (elk fan dat is spesifyk foar in oare browser):
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Yn 'e measte gefallen sil in nije brand-CSS-styl-eigenskip brûke, jo brûke it standert CSS-eigenskip en fet it foarkar foar elke browser. De foarkommende ferzjes wolle altyd earst komme (yn elke folchoarder dy jo foarkomme) wylst it normale CSS-eigenskip op it lêst komt. As jo bygelyks in CSS3-oergong oan jo dokumint taheakje wolle, brûke jo it transysjeigens lykas hjirûnder te sjen:
-webkit- oergong: alle 4's maklik;
-moz- oergong: alle 4s maklik;
-ms- oergong: alle 4's maklik;
-o- oergong: alle 4's maklik;
oergong: alle 4s maklik;
Taljochting: Tink derom dat guon browsers in oare syntaksis hawwe foar bepaalde eigenskippen as oaren dwaan, dus net ferjitte dat de browser-ferfankige ferzje fan in eigenskip krekt itselde is as it standert eigendom. Bygelyks om in CSS-gradient te meitsjen , brûk jo it linear-gradiente eigendom. Firefox, Opera en moderne ferzjes fan Chrome en Safari brûke dat eigendom mei it passende prefix, wylst frjemde ferzjes fan Chrome en Safari de foarkommende eigenskip -webkit-gradient brûke. Firefox brûkt ferskillende wearden lykas de standaard.
De reden dat jo jo deklaraasje altyd einigje mei de normale, net-foarkommende ferzje fan it CSS-eigenskip is sadwaande as in browser de regel stipet, dit sil it eins brûke. Tink derom dat CSS lêze is. De lettere regels nimme foardielen oer eardere as de spesifike identiteit is, en in browser soe de ferfanger ferzje fan in regel lêze en brûke dat as it net it normale stipet, mar as dat it docht, sil it ferfanger ferzje oerjaan mei de eigentlike CSS-regel.
Vendorbefetsjes binne gjin Hack
As ferfanger fan foardielen yn earste ynstânsje wiene, hawwe in protte web professionals wekker as se in hack of in skeakelje wiene nei de tsjustere dagen fan it fekjen fan in webstee koade om ferskillende browsers te stypjen (tink derom dat " dizze side is boppe yn IE- berjochten besjoen "). CSS-oanbieders foar prefiks binne net hacks, en jo moatte gjin reservearje hawwe om har te brûken yn jo wurk.
In CSS-hack brûkt mislearring yn 'e ymplemintaasje fan in oar elemint of eigendom om in oare eigendom te krijen om korrekt te wurkjen. Bygelyks, de kastelmodel-hack brûkte tekeningen yn it parsen fan 'e stim-famylje-eigenskip of yn hoe browsers sjogge backslashes (\). Mar dizze hakken waarden brûkt om it probleem te beheinen fan 'e ferskil tusken hoe Internet Explorer 5.5 it kastelmodel behannele en hoe't Netscape it ynterpretearre, en neat mei te dwaan hawwe mei de stamfamylje. Mei tank oan dizze twa ferâldere browsers binne de minsken dy't wy dizze dagen net hawwe.
In ferfangerfoarm is gjin hack omdat it de spesifikaasje regelet om regelstellingen te meitsjen foar hoe't in eigendom útfierd wurde kin, wylst tagelyk de browser makker makket om in eigenskip op in oare manier te meitsjen sûnder alles alles te brekken. Fierder wurkje dizze prefixen mei CSS-eigenskippen dy't úteinlik in ûnderdiel fan 'e specifikaasje wêze . Wy binne gewoan in oantal koade ta te heakjen om tagong te krijen ta it eigendom. Dit is in oare reden wêrom't jo de CSS-regel beëinigje mei it gewoane, net-foarkommende eigendom. Op dizze manier kinne jo de foarkommende ferzjes falle as ien folsleine browser-stipe realisearre is.
Wolle jo witte wat de blêder stipe foar in bepaalde funksje is? De webside CanIUse.com is in prachtige boarne foar it sammeljen fan dizze ynformaasje en lit jo witte wêr't browsers, en hokker ferzjes fan dy browsers, op dit stuit in funksje stypje.
Oanbieders fan Vendor binne ferrassend, mar tydlik
Ja, it soe misledigje en repetitive te meitsjen om de eigenskippen 2-5 kear te skriuwen om it yn alle browsers te wurkjen, mar it is in tydlike situaasje. Bygelyks, gewoan in pear jier lyn, om in rûnte hoeke op in fel te setten, moatte jo skriuwe:
-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;
Mar no't browsers kamen om dizze funksje folslein te stypjen, hawwe jo echt de standertisearre ferzje nedich:
border-radius: 10px 5px;
Chrome hat stipe fan it CSS3-eigenskip sûnt ferzje 5.0, Firefox tafoege it yn ferzje 4.0, Safari tafoege it yn 5.0, Opera yn 10.5, iOS yn 4.0, en Android yn 2.1. Ek Internet Explorer 9 stipet it sûnder in prefix (en IE 8 en leger hat it net stipe mei of sûnder prefixes).
Tink derom dat browsers altyd feroarje moatte en kreative oanwizen om âldere browsers te stypjen sille negearre wurde as jo prate oer webside websteeën dy't jierren binne neist de moderne metoaden. Op it lêst is it skriuwen fan browserfoarsjenningen folle makliker as it finen en ferwiderjen fan flaters dy't meastal yn in takomstige ferzje fêststeld wurde, wêrtroch't jo in oare flater fine om te eksploitearjen en sa.