Što su CSS dobavljači ili prefiksi preglednika?

Prefiksi dobavljača CSS-a, poznatiji i kao ili CSS prefiksi preglednika, način su na koji proizvođači preglednika mogu dodati podršku nove značajke CSS-a prije nego što su te značajke u potpunosti podržane u svim preglednicima. To se može učiniti tijekom svojevrsnog razdoblja testiranja i eksperimentiranja u kojem proizvođač preglednika točno određuje kako će se primijeniti ove nove CSS značajke. Ti su prefiksi postali vrlo popularni s porastom CSS3 Prije nekoliko godina.

Podrijetlo prefiksa dobavljača

Kada je CCS3 prvi put predstavljen, brojna su uzbuđena svojstva počela napadati različite preglednike u različito vrijeme. Na primjer, preglednici s webkit-om (Safari i Chrome) prvi su uveli neka svojstva u stilu animacije poput transformiranja i prijelaza. Korištenjem prefiksa dobavljača Svojstva, web dizajneri su mogli koristiti te nove značajke u svom radu i omogućiti im da ih vide u preglednicima koji su ih odmah podržali, umjesto da moraju čekati da ih uhvati svaki drugi proizvođač preglednika gore!

Uobičajeni prefiksi

Dakle, iz perspektive front-end web programera, prefiksi preglednika koriste se za dodavanje novih CSS značajki na web mjesto, a istovremeno imaju udobnost znajući da će preglednici podržavati te stilove. To može biti posebno korisno kada različiti proizvođači preglednika implementiraju svojstva na malo drugačije načine ili s različitom sintaksom.

Prefiksi CSS preglednika koje možete koristiti (od kojih je svaki specifičan za drugi preglednik) su:

• Android:

  -webkit-

• Krom:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -ms-

• iOS:

  -webkit-

• Opera:

  -o-

• Safari:

  -webkit-

Dodavanje prefiksa

U većini slučajeva, da biste koristili potpuno novo svojstvo CSS stila, uzimate standardno svojstvo CSS i dodajete prefiks za svaki preglednik. Verzije s prefiksom uvijek bi bile na prvom mjestu (u bilo kojem redoslijedu koji želite), dok će normalno svojstvo CSS-a biti zadnje. Na primjer, ako želite dodati CSS3 prijelaz u svoj dokument, koristili biste svojstvo prijelaza kao što je prikazano u nastavku:

-webkit-prijelaz: lakoća svih 4-ih;
-moz-prijelaz: sve 4-e lakoća;
-ms-prijelaz: sve 4s lakoća;
-o-prijelaz: lakoća svih 4-ih;
prijelaz: sve 4s lakoća; 

Imajte na umu da neki preglednici imaju različitu sintaksu za određena svojstva od drugih, pa nemojte pretpostavljati da je inačica svojstva s prefiksom preglednika potpuno ista kao i standardno svojstvo. Na primjer, za stvaranje CSS gradijenta koristite svojstvo linearnog gradijenta. Firefox, Opera i moderne verzije Chromea i Safarija koriste to svojstvo s odgovarajućim prefiksom, dok rane verzije Chromea i Safarija koriste prefiksirano svojstvo -webkit-gradient.

Također, Firefox koristi vrijednosti koje se razlikuju od standardnih.

Razlog što izjavu uvijek završite s normalnom, nefirmiranom verzijom svojstva CSS-a je taj da će, kada preglednik podržava pravilo, upotrijebiti to. Sjetite se kako se čita CSS. Kasnija pravila imaju prednost nad ranijima ako je specifičnost ista, pa bi preglednik čitao verziju dobavljača dobavljača pravilo i upotrijebite da ako ne podržava normalnu verziju, ali kad to učini, nadjačat će verziju dobavljača sa stvarnim CSS-om Pravilo.

Prefiksi dobavljača nisu hak

Kada su prefiksi dobavljača prvi put predstavljeni, mnogi su se web stručnjaci pitali jesu li hak ili ne vratite se u mračne dane forkiranja koda web stranice za podršku različitim preglednicima (sjetite se toga "Ovo se mjesto najbolje gleda u IE"poruka). Prefiksi dobavljača CSS-a nisu hakiranje i ne biste trebali imati rezerve oko njihove upotrebe u svom radu.

CSS hack iskorištava nedostatke u implementaciji drugog elementa ili svojstva kako bi postigao da neko drugo svojstvo radi ispravno. Na primjer, box model hakirao je nedostatke u raščlanjivanju glasovne obitelji ili u načinu na koji preglednici raščlanjuju kose crte \. No, ovi su hakovi korišteni za rješavanje problema razlike između načina na koji je Internet Explorer 5.5 postupao s modelom okvira i kako Netscape protumačio i nema nikakve veze sa obiteljskim stilom glasa. Srećom ova dva zastarjela preglednika su oni kojima se danas ne moramo baviti.

Prefiks dobavljača nije hakiranje, jer omogućuje specifikaciji postavljanje pravila za primjenu svojstva, dok istovremeno omogućuje proizvođačima preglednika da implementiraju svojstvo na drugačiji način bez da sve razbiju drugo. Nadalje, ovi prefiksi rade sa CSS svojstvima koja na kraju će biti dio specifikacije. Jednostavno dodajemo neki kôd kako bismo rano dobili pristup nekretnini. To je još jedan razlog zbog kojeg CSS pravilo završavate s normalnim svojstvom bez prefiksa. Na taj način možete ispustiti prefiksirane verzije nakon što se postigne puna podrška preglednika.

Prefiksi dobavljača dosadni su, ali privremeni

Da, moglo bi se osjećati dosadno i ponavljati se kad bih svojstva morao napisati 2-5 puta da bi funkcioniralo u svim preglednicima, ali to je privremena situacija. Na primjer, prije samo nekoliko godina, da biste postavili zaobljeni kut na kutiju, morali ste napisati:

-moz-radijus-granice: 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;
radijus obruba: 10px 5px; 

Ali sada kada su preglednici u potpunosti podržavali ovu značajku, stvarno vam treba samo standardizirana verzija:

radijus obruba: 10px 5px; 

Chrome podržava svojstvo CSS3 od verzije 5.0, Firefox ga je dodao u verziji 4.0, Safari ga dodao u 5.0, Opera u 10.5, iOS u 4.0, a Android u 2.1. Čak ga i Internet Explorer 9 podržava bez prefiksa (a IE 8 i stariji ga nisu podržavali sa ili bez prefiksi).

Imajte na umu da će se preglednici uvijek mijenjati i trebat će kreativni pristupi podršci starijim preglednicima, osim ako to ne planirate izrada web stranica koji su godinama iza najsuvremenijih metoda. Na kraju, pisanje prefiksa preglednika mnogo je lakše od pronalaženja i iskorištavanja pogrešaka koje će najvjerojatnije biti ispravljene u budućoj verziji, zahtijevajući da pronađete drugu pogrešku za iskorištavanje i tako dalje.