Čo sú predpony dodávateľa alebo prehliadača CSS?

Predpony dodávateľov CSS, niekedy tiež známe ako alebo CSS predpony prehľadávača sú spôsob, ako môžu tvorcovia prehľadávačov pridať podporu pre nové funkcie CSS skôr, ako budú tieto funkcie plne podporované vo všetkých prehľadávačoch. Môže sa to stať počas určitého obdobia testovania a experimentovania, keď výrobca prehliadača presne určuje, ako budú tieto nové funkcie CSS implementované. Tieto predpony sa stali veľmi populárnymi s nástupom CSS3 Pred niekoľkými rokmi.

Počiatky predpôn dodávateľa

Keď bol CCS3 predstavený prvýkrát, do rôznych prehliadačov začalo naraz prichádzať niekoľko vzrušujúcich vlastností v rôznych časoch. Napríklad prehliadače poháňané Webkitom (Safari a Chrome) ako prvé predstavili niektoré vlastnosti v štýle animácie, ako je transformácia a prechod. Použitím prefixu dodávateľa vlastnosti, mohli weboví dizajnéri tieto nové funkcie používať pri svojej práci a umožniť im ich vidieť v prehliadačoch ktoré ich hneď podporili, namiesto toho, aby museli čakať, kým ich chytí každý ďalší výrobca prehľadávačov hore!

Bežné predpony

Z pohľadu front-endového webového vývojára sa teda predvoľby prehľadávača používajú na pridanie nových funkcií CSS na web, pričom majú pohodlie s vedomím, že tieto štýly budú prehliadače podporovať. To môže byť obzvlášť užitočné, keď rôzni výrobcovia prehľadávačov implementujú vlastnosti trochu iným spôsobom alebo s inou syntaxou.

Môžete použiť predpony prehliadača CSS (každá z nich je špecifická pre iný prehliadač):

• Android:

  -webkit-

• Chrome:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -pani-

• iOS:

  -webkit-

• Opera:

  -o-

• Safari:

  -webkit-

Pridanie predvoľby

Ak chcete použiť úplne novú vlastnosť štýlu CSS, vo väčšine prípadov použijete štandardnú vlastnosť CSS a pridáte predponu pre každý prehliadač. Predponované verzie budú vždy na prvom mieste (v ľubovoľnom poradí, ktoré uprednostňujete), zatiaľ čo normálna vlastnosť CSS bude na poslednom mieste. Napríklad ak chcete do dokumentu pridať prechod CSS3, použili by ste vlastnosť prechodu, ako je uvedené nižšie:

-webkit-transition: všetky 4s uľahčujú;
-moz-prechod: všetky 4s uľahčujú;
-ms-transition: všetky 4s uľahčujú;
-o-prechod: všetky 4s uľahčujú;
prechod: všetky 4s ľahkosť; 

Pamätajte, že niektoré prehliadače majú pre niektoré vlastnosti inú syntax ako iné, takže nepredpokladajte, že verzia vlastnosti s predponou v prehliadači je úplne rovnaká ako štandardná vlastnosť. Napríklad na vytvorenie gradientu CSS použijete vlastnosť lineárny gradient. Prehliadače Firefox, Opera a moderné verzie prehliadača Chrome a Safari používajú túto vlastnosť s príslušnou predponou, zatiaľ čo staršie verzie prehliadačov Chrome a Safari používajú predponovanú vlastnosť -webkit-gradient.

Firefox tiež používa iné hodnoty ako štandardné.

Dôvod, prečo vždy končíte svoju deklaráciu s normálnou, predponou verzie vlastnosti CSS, je ten, že keď prehliadač toto pravidlo podporuje, bude ho používať. Pamätajte, ako sa číta CSS. Ak sú špecifickosti rovnaké, novšie pravidlá majú prednosť pred tými skoršími, takže prehľadávač by prečítal verziu Pravidlo a použite, že ak nepodporuje ten normálny, ale ak to urobí, prepíše verziu predajcu so skutočným CSS. pravidlo.

Predpony dodávateľov nie sú hackom

Pri prvom zavedení predpôn dodávateľov mnoho webových profesionálov uvažovalo, či ide o hack alebo o vrátiť sa do temných dní rozvetvovania kódu webových stránok a podporovať tak rôzne prehliadače (pamätajte na to "Najlepšie sa táto stránka pozerá v IE„správa). Predpony dodávateľov CSS však nie sú hackermi a nemali by ste si robiť výhrady k ich použitiu vo svojej práci.

Hack CSS využíva chyby v implementácii iného prvku alebo vlastnosti, aby zabezpečil správne fungovanie inej vlastnosti. Napríklad model boxu hack využil chyby pri analýze rodiny hlasov alebo v tom, ako prehliadače analyzujú spätné lomky \. Ale tieto hacky boli použité na vyriešenie problému rozdielu medzi tým, ako a ako program Internet Explorer 5.5 zaobchádzal s modelom krabice Netscape tlmočili a nemajú nič spoločné so štýlom hlasovej rodiny. Našťastie sú to tieto dva zastarané prehliadače, s ktorými sa dnes nemusíme starať.

Predpona dodávateľa nie je hacker, pretože umožňuje špecifikácii nastaviť pravidlá pre implementáciu vlastnosti, a zároveň umožňuje tvorcom prehľadávačov implementovať vlastnosť iným spôsobom bez toho, aby došlo k rozbitiu všetkého inak. Ďalej tieto predpony pracujú s vlastnosťami CSS bude nakoniec súčasťou špecifikácie. Jednoducho pridávame nejaký kód, aby sme získali prístup k nehnuteľnosti skôr. To je ďalší dôvod, prečo ukončíte pravidlo CSS s normálnou vlastnosťou bez predpony. Takto môžete predinštalované verzie zrušiť, keď získate úplnú podporu prehľadávača.

Predpony dodávateľov sú nepríjemné, ale dočasné

Áno, môže to byť nepríjemné a opakujúce sa, keď budete musieť vlastnosti napísať dvakrát až päťkrát, aby fungovali vo všetkých prehliadačoch, ale je to dočasná situácia. Napríklad len pred niekoľkými rokmi, aby ste nastavili zaoblený roh na políčko, ktoré ste museli napísať:

-moz-border-radius: 10px 5px;
-webkit-border-left-top-radius: 10px;
-webkit-border-right-radius: 5px;
-webkit-border-right-right-radius: 10px;
-webkit-border-border-left-radius: 5px;
polomer okraja: 10px 5px; 

Teraz, keď prehliadače začali túto funkciu plne podporovať, potrebujete skutočne iba štandardizovanú verziu:

polomer okraja: 10px 5px; 

Prehliadač Chrome podporuje vlastnosť CSS3 od verzie 5.0, Firefox ju pridal do verzie 4.0, Safari do verzie 5.0, Opera v 10.5, iOS v 4.0 a Android v 2.1. Aj Internet Explorer 9 ho podporuje bez predpony (a IE 8 a nižšie ho nepodporovali s alebo bez) predpony).

Pamätajte, že prehliadače sa budú vždy meniť a pokiaľ sa na to neplánujete, budú potrebné kreatívne prístupy k podpore starších prehliadačov vytváranie webových stránok ktoré sú roky pozadu za najmodernejšími metódami. Napísanie predpôn prehľadávača je nakoniec oveľa jednoduchšie ako vyhľadanie a zneužitie chýb, ktoré budú s najväčšou pravdepodobnosťou opravené v budúcej verzii. To vyžaduje, aby ste našli ďalšiu zneužitú chybu a podobne.