Šta su oni i zašto bi ih trebali koristiti
Prefiks prodavača CSS-a, takođe poznat i kao prefiks pretraživača CSS-a , predstavlja način da proizvođači pretraživača dodaju podršku za nove CSS funkcije pre nego što su ove funkcije u potpunosti podržane u svim pregledačima. Ovo se može učiniti tokom nekog perioda testiranja i eksperimenta, pri čemu proizvođač pretraživača određuje tačno kako će ove nove CSS funkcije biti implementirane. Ovi prefiksi postali su veoma popularni sa porastom CSS3 pre nekoliko godina.
Kada je CCS3 prvi put uveden, veliki broj uzbuđenih svojstava počeo je udarati različitim pregledačima u različito vrijeme. Na primjer, webkit-powered browseri (Safari i Chrome) su bili prvi koji su predstavili neke od stilova animacije, kao što su transformacija i tranzicija. Korišćenjem prefiksnih svojstava prodavaca, web dizajneri su mogli da koriste te nove funkcije u svom radu i da ih vide na pretraživačima koji su ih odmah podržavali, umesto da moraju čekati da svaki drugi proizvođač pretraživača dohvati!
Dakle, iz perspektive prednjeg web programera, prefiksi pretraživača koriste se za dodavanje novih CSS funkcija na web lokaciju dok imaju komfor, znajući da će pretraživači podržati te stilove. Ovo može biti posebno korisno kada različiti proizvođači pregledača implementiraju svojstva na neznatno različite načine ili sa različitim sintaksama.
Prefikse CSS pretraživača koje možete koristiti (svaka od njih je specifična za drugi pretraživač) su:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera:
- Safari: -webkit-
U većini slučajeva, da biste koristili potpuno novu CSS stil svojstvo, uzimate standardnu CSS svojstvo i dodajte prefiks za svaki pretraživač. Prefiksne verzije će uvek biti prve (u bilo kom redosledu koji vam najviše odgovara), dok će normalna vrijednost CSS-a biti poslednja. Na primjer, ako želite dodati prelaz CSS3 u svoj dokument, koristićete svojstvo tranzicije kao što je prikazano ispod:
-webkit- tranzicija: sve 4s lakoće;
-moz- tranzicija: sve 4s lakoće;
-ms- tranzicija: sve 4s lakoće;
-o- tranzicija: sve 4s lakoće;
tranzicija: sve 4s lakoće;
Napomena: Zapamtite, neki pregledači imaju različitu sintaksu za određena svojstva od drugih, tako da ne pretpostavljaju da je prefiksna verzija osobine potpuno ista kao standardna svojina. Na primjer, za kreiranje CSS gradijenta , koristite osobinu linijskog gradijenta. Firefox, Opera i moderne verzije Chrome i Safari koriste tu osobinu sa odgovarajućim prefiksom, dok rane verzije Chrome-a i Safari-a koriste prefiksnu svojinu -webkit-gradijent. Firefox takođe koristi različite vrednosti od standardnih.
Razlog zbog kojeg se vaša deklaracija uvek završava sa normalnom, neprefiksnom verzijom CSS svojstva je takva da kada pregledač podržava pravilo, on će ga koristiti. Zapamtite kako se CSS čita. Kasnije pravila imaju prioritet nad ranijim ako je specifičnost ista, pa bi pregledač pročitao verziju proizvođača pravila i koristio to ako ne podržava normalni, ali kada to uradi, ona će prevazići verziju proizvođača pomoću stvarno CSS pravilo.
Prefiksi dobavljača nisu hack
Kada su prvobitno uvedeni prefiksovi proizvođača, mnogi stručnjaci iz weba se pitali da li su hakeri ili promjene u mračne dane oduzimanja web stranice kod za podršku različitim pregledačima (zapamtite da su " Ova stranica najbolje prikazana u IE " porukama). Međutim, prefiksi dobavljača CSS nisu hacks, i ne biste trebali imati rezervu da ih koristite u svom radu.
CSS hack eksploatiše greške prilikom implementacije nekog drugog elementa ili imovine kako bi dobili drugu osobinu da radi ispravno. Na primer, kutija modela kutije eksploatisala je propuste u analizi svojstva glasa-familije ili u tome kako pretraživači razdvajaju kravate (\). Ali ovi hacks su korišćeni da bi se rešio problem razlika između toga kako Internet Explorer 5.5 upravlja modelom kutije i kako ga Netscape tumači, i nemaju nikakve veze sa stilom familije glasa. Srećom ova dva zastarjela pretraživača su ona o kojima se mi danas ne bavimo.
Prefiks proizvođača nije haker jer omogućava specifikaciji da postavlja pravila kako bi se imovina mogla implementirati, a istovremeno omogućavajući proizvođačima pretraživanja da implementiraju svojstvo na različite načine, a da ne krše sve ostalo. Štaviše, ovi prefiksi rade sa CSS osobinama koja će na kraju biti deo specifikacije . Jednostavno dodamo neki kod kako bismo imali pristup objektu ranije. Ovo je još jedan razlog zašto ste završili CSS pravilo sa normalnim, neprefiksiranim svojstvima. Na taj način možete ispustiti prefiksne verzije kada se postigne potpuna podrška pretraživaču.
Želite znati šta je podrška pretraživača za određenu funkciju? Web stranica CanIUse.com je izvanredan resurs za prikupljanje ovih informacija i obavještavanje o tome koji pretraživači i koje verzije tih pretraživača trenutno podržavaju funkciju.
Prefiksi dobavljača su dosadni ali privremeni
Da, možda bi se osećalo dosadno i ponavljano moralo da napiše osobine 2-5 puta da bi ga radilo u svim pretraživačima, ali to je privremena situacija. Na primer, prije par godina, postavili ste zaokruženi kutak na kutiji koju ste morali napisati:
-moz-granica-radija: 10px 5px;
-webkit-granični-top-lijevi radijus: 10px;
-webkit-granični-top-desni-radijus: 5px;
-webkit-granični-donji-desni-radijus: 10px;
-webkit-granični-donji-lijevi-poluprečnik: 5px;
granični radijus: 10px 5px;
Ali sada kada su pregledači došli u potpunu podršku ovoj funkciji, stvarno vam je potrebna samo standardizovana verzija:
granični radijus: 10px 5px;
Chrome je podržao CSS3 svojstvo od verzije 5.0, Firefox je dodao u verziju 4.0, Safari je dodao u 5.0, Opera u 10.5, iOS u 4.0 i Android 2.1. Čak i Internet Explorer 9 podržava to bez prefiksa (i IE 8 i niži nisu ga podržali sa ili bez prefiksa).
Imajte na umu da će se pretraživači uvek mijenjati i biće potrebni kreativni pristupi podršci starijim pregledačima, osim ako ne planirate izgradnju web stranica koje su godinama iza najmodernijih metoda. Na kraju, pisanje prefiksa pretraživača je mnogo lakše nego pronalaženje i iskorištavanje grešaka koje će najverovatnije biti ispravljene u budućoj verziji, tražeći da pronađete drugu grešku za eksploataciju i tako dalje.