Što su oni i zašto ih trebate koristiti
Prefiks dobavljača CSS-a, također poznat kao prefiks preglednika ili CSS , način je da proizvođači preglednika dodaju podršku za nove CSS značajke prije nego što te značajke budu u potpunosti podržane u svim preglednicima. To se može obaviti tijekom nekog razdoblja testiranja i eksperimentiranja gdje proizvođač preglednika određuje točno kako će se ove nove značajke CSS implementirati. Ovi prefiks postali su vrlo popularni s porastom CSS3 prije nekoliko godina.
Kada je CCS3 prvi put uveden, broj uzbuđenih svojstava počeo je pogoditi različite preglednike u različito vrijeme. Na primjer, preglednici s webkom (Safari i Chrome) bili su prvi koji su uveli neke od svojstava stila animacije kao što su transformacija i prijelaz. Koristeći unaprijed određena svojstva dobavljača, web dizajneri su mogli koristiti te nove značajke u svom radu i vidjeti ih na preglednicima koji su ih podržali odmah, umjesto da moraju čekati svaki drugi proizvođač preglednika da nadoknadi!
Dakle, iz perspektive razvojnog programera web sučelja, prefiksima preglednika upotrebljavaju se za dodavanje novih CSS značajki na web sučelje, dok se utješi znajući da će preglednici podržavati te stilove. To može biti osobito korisno kada različiti proizvođači preglednika implementiraju svojstva na nešto drugačije načine ili s drugačijom sintaksom.
CSS preglednik prefiks koji možete koristiti (svaki je specifičan za drugi preglednik) su:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
U većini slučajeva, da biste koristili potpuno novi entitet CSS stila, uzmite standardni CSS entitet i dodajte prefiks za svaki preglednik. Predefinirane verzije uvijek bi dolazile prvo (u bilo kojem redoslijedu koji želite) dok će normalno CSS svojstvo trajati posljednje. Na primjer, ako želite dodati prijelaz CSS3 na svoj dokument, koristite prijelazni entitet kao što je prikazano u nastavku:
-webkit- transition: sve 4s jednostavnost;
-moz- prijelaz: sve 4s jednostavnost;
-ms- prijelaz: sve 4s jednostavnost;
- tranzicija: sve 4 jednostavnosti;
tranzicija: sve 4s jednostavnost;
Napomena: Imajte na umu da neki preglednici imaju drugačiju sintaksa za određena svojstva od drugih, stoga nemojte pretpostavljati da je inačica entiteta predefinirana preglednikom ista kao i standardni entitet. Na primjer, za stvaranje gradijenta CSS koristite element linearnog gradijenta. Firefox, Opera i moderne verzije preglednika Chrome i Safari upotrebljavaju tu entitet s odgovarajućim prefiksom dok ranije verzije Chromea i Safari upotrebljavaju prefiksnu imovinu -webkit-gradijent. Također, Firefox koristi različite vrijednosti od onih standardnih.
Razlog da uvijek završite svoju deklaraciju s normalnom, nepredviđenom verzijom CSS imovine jest tako da kada preglednik podržava pravilo, to će upotrijebiti. Zapamtite kako se CSS čita. Kasnija pravila imaju prednost nad ranijima ako je specifičnost istovjetna, tako da preglednik pročita verziju dobavljača pravila i koristi ga ako ne podržava normalan, ali jednom kada to učini, nadjačat će verziju dobavljača pomoću stvarni CSS pravilo.
Prefiksi dobavljača nisu hakeri
Kada su prvi put predstavljeni dobavljači, mnogi se web stručnjaci pitaju jesu li bili hakirani ili pomaknuti natrag u mračne dane krivotvorenja koda web stranice za podršku različitim preglednicima (sjetite se onih " Ovo je mjesto najbolje pregledano u IE " porukama). Prefiksi dobavljača CSS-a, međutim, nisu hackovi, a ne biste trebali imati nikakvih rezervi o njihovu korištenju u svom radu.
CSS hack iskorištava nedostatke u provedbi drugog elementa ili imovine kako bi se drugo imanje ispravno radilo. Na primjer, hakerski model hack iskoristio je nedostatke u analiziranju svojstva glasovne obitelji ili u načinu na koji preglednici analiziraju unatrag (\). Ali ti se hakeri koristili za rješavanje problema razlike između načina na koji je Internet Explorer 5.5 upravljao modelom kutija i kako je Netscape tumačio, a nemaju nikakve veze sa stilom glasovne obitelji. Srećom, ova dva zastarjela preglednika su one koje mi nemamo sami sebi s tim danima.
Prefiks dobavljača nije hak, jer dopušta specifikaciji postavljanje pravila o načinu implementacije entiteta, a istodobno omogućava proizvođačima preglednika da implementiraju entitet na drugačiji način, a da ne razbije sve ostalo. Nadalje, ti prefiksi rade s CSS svojstvima koja će na kraju biti dio specifikacije . Jednostavno dodamo neki kôd kako bismo ranije dobili pristup imovini. Ovo je još jedan razlog zašto završite CSS pravilo s uobičajenom, nepristupačnom svojstvom. Na taj način možete ispustiti predefinirane inačice kada se postigne potpuna podrška preglednika.
Želite li znati koja je podrška preglednika za određenu značajku? Web stranica CanIUse.com je prekrasan resurs za prikupljanje tih informacija i upoznavanje s poznatim preglednicima i verzijama preglednika koji trenutno podržavaju značajku.
Prefiksi dobavljača su dosadni ali privremeni
Da, može se osjećati neugodno i ponavljajuće da moraju napisati svojstva 2-5 puta kako bi funkcionirale u svim preglednicima, ali to je privremena situacija. Na primjer, samo prije nekoliko godina, postavljanje zaobljenog kuta na kutiji koju ste morali napisati:
-moz-granični polumjer: 10px 5px;
-webkit-border-top-left radijus: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left radijus: 5px;
granica radijusa: 10px 5px;
Ali sada kada su preglednici došli u potpunosti podržati tu značajku, zaista vam je potrebna samo standardizirana inačica:
granica radijusa: 10px 5px;
Chrome je podržao CSS3 od verzije 5.0, Firefox ga je dodao u verziji 4.0, Safari je dodao u 5.0, Opera u 10.5, iOS u 4.0 i Android u 2.1. Čak i Internet Explorer 9 podržava ga bez prefiksa (i IE 8 i niže ga nisu podržavali sa ili bez prefiksa).
Imajte na umu da će se preglednici uvijek mijenjati i bit će potrebni kreativni pristup podršci starijim preglednicima, osim ako planirate izgraditi web stranice koje su godinama iza najsuvremenijih metoda. Naposljetku, pisanje prefiksa preglednika mnogo je lakše od pronalaženja i iskorištavanja pogrešaka koje će najvjerojatnije biti fiksirane u budućoj verziji, a zahtijevaju da pronađete još jednu pogrešku za iskorištavanje i tako dalje.