Čo sú oni a prečo by ste ich mali používať
Predpony predajcov CSS, ktoré sú tiež niekedy známe ako predpony prehliadačov CSS , sú spôsobmi, ktoré výrobcom prehliadača umožňujú pridávať podporu nových funkcií CSS pred tým, ako sú tieto funkcie plne podporované vo všetkých prehliadačoch. To sa môže stať počas akéhokoľvek testovacieho a experimentálneho obdobia, keď výrobca prehliadača presne určuje, ako budú tieto nové funkcie CSS implementované. Tieto predpony sa stali veľmi populárnymi vzhľadom na vzostup CSS3 pred niekoľkými rokmi.
Keď bol prvýkrát zavedený CCS3, množstvo rozrušených vlastností začalo narážať na rôzne prehliadače v rôznych časoch. Napríklad webové prehliadače (Safari a Chrome), ktoré používajú webkit, boli prvé, ktoré predstavili niektoré vlastnosti štýlu animácie, ako transformácia a prechod. Použitím vlastností, ktoré predurčujú dodávateľa, mohli web dizajnéri tieto nové funkcie využívať a nechať ich vidieť na prehliadačoch, ktoré ich okamžite podporovali, namiesto toho, aby museli čakať na to, aby všetci ostatní výrobcovia prehliadli dohnať!
Takže z perspektívy webového vývojára na rozhraní front-end sa predpony prehliadača používajú na pridávanie nových funkcií CSS na webovú lokalitu, pričom majú pohodlie, pretože vedia, že prehliadače podporujú tieto štýly. To môže byť obzvlášť užitočné, keď iní výrobcovia prehliadača implementujú vlastnosti mierne odlišnými spôsobmi alebo inou syntaxou.
Predpony prehliadača CSS, ktoré môžete použiť (každý z nich je špecifický pre iný prehliadač), sú:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Vo väčšine prípadov používate úplne novú vlastnosť štýlu CSS, vezmeme si štandardnú vlastnosť CSS a pridáme predponu pre každý prehliadač. Predplatené verzie by vždy prichádzali ako prvé (v ľubovoľnom poradí, ktoré uprednostňujete), zatiaľ čo normálna vlastnosť CSS príde naposledy. Ak napríklad chcete do dokumentu pridať prechod CSS3, použijete prechodovú vlastnosť, ako je uvedené nižšie:
-webkit- transition: všetky 4s ľahké;
-moz- transition: všetko 4s ľahké;
-ms- prechod: všetko 4s ľahké;
- - prechod: všetky 4s ľahké;
prechod: všetky 4s ľahké;
Poznámka: Niektoré prehliadače majú pre niektoré vlastnosti inú syntax ako iné, takže nepredpokladajte, že verzia prefixu prehliadača je presne rovnaká ako štandardná vlastnosť. Napríklad, ak chcete vytvoriť gradient CSS , použijete vlastnosť lineárneho gradientu. Firefox, Opera a moderné verzie prehliadačov Chrome a Safari používajú túto vlastnosť s príslušnou predponou, zatiaľ čo skoré verzie prehliadačov Chrome a Safari používajú prefixový vlastnosť -webkit-gradient. Tiež Firefox používa odlišné hodnoty ako štandardné.
Dôvod, prečo deklarujete svoju deklaráciu vždy s normálnou, nepredpravenou verziou vlastníctva CSS, je, že keď prehliadač pravidlo podporuje, použije to. Pamätajte si, ako sa číta CSS. Neskoršie pravidlá majú prednosť pred predchádzajúcimi pravidlami, ak je špecifickosť rovnaká, takže prehliadač by si prečítal verziu pravidla dodávateľa a použiť ho, ak nepodporuje normálnu, ale akonáhle to urobí, prepisuje verziu dodávateľa skutočné pravidlo CSS.
Predpony predajcov nie sú hack
Keď boli prvé predstavenia predávajúcich, mnohí weboví odborníci sa pýtali, či sú hackom alebo posunom späť do temných dní, kým kód webových stránok nepotrebuje podporu pre rôzne prehliadače (nezabudnite na správy " Táto stránka je najlepšie zobrazená v správach IE "). Predpony predajcov CSS však nie sú hackami a nemali by ste mať žiadne výhrady k ich používaniu vo vašej práci.
CSS hack využíva nedostatky pri implementácii iného prvku alebo vlastníctva, aby získal inú vlastnosť, aby správne fungovala. Napríklad model box hack využíval nedostatky pri analýze vlastností hlasovej rodiny alebo v tom, ako prehliadače analyzujú spätné lomky (\). Tieto hacky však boli použité na vyriešenie problému rozdielu medzi tým, ako program Internet Explorer 5.5 spracoval model krabice a ako Netscape ho interpretoval, a nemá nič spoločné s rodinným štýlom hlasu. Našťastie tieto dva zastaralé prehliadače sú tie, o ktorých dnes nemáme obavy.
Predpona dodávateľa nie je hack, pretože umožňuje špecifikáciu nastaviť pravidlá pre spôsob implementácie vlastníctva a zároveň umožniť tvorcom prehliadačov implementovať vlastnosť iným spôsobom bez toho, aby porušil všetko ostatné. Okrem toho tieto predpony pracujú s vlastnosťami CSS, ktoré budú nakoniec súčasťou špecifikácie . Jednoducho pridávame kód, aby sme získali prístup k nehnuteľnosti skoro. To je ďalší dôvod, prečo ukončíte pravidlo CSS s normálnou vlastnosťou bez predpony. Týmto spôsobom môžete odstrániť predplatené verzie po dosiahnutí plnej podpory prehliadača.
Chcete vedieť, prečo je podporovaná určitá funkcia prehliadača? Webová lokalita CanIUse.com je skvelým zdrojom zhromažďovania týchto informácií a informovaním o tom, ktoré prehliadače a ktoré verzie týchto prehliadačov momentálne podporujú funkciu.
Predpony dodávateľov sú nepríjemné, ale dočasné
Áno, mohlo by to byť nepríjemné a opakujúce sa, keby ste mali písať vlastnosti 2-5 krát, aby ste to mohli pracovať vo všetkých prehliadačoch, ale je to dočasná situácia. Napríklad, pred niekoľkými rokmi, aby ste zaujali zaoblený roh na krabici, musíte napísať:
-moz-okraj-polomer: 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;
okraj: 10px 5px;
Ale teraz, keď sa prehliadače dostali na plnú podporu tejto funkcie, naozaj potrebujete len štandardizovanú verziu:
okraj: 10px 5px;
Chrome podporuje vlastnosť CSS3 od verzie 5.0, Firefox ju pridal vo verzii 4.0, Safari to pridala v 5.0, Opera v 10.5, iOS v 4.0 a Android v 2.1. Aj aplikácia Internet Explorer 9 ju podporuje bez predpony (a IE 8 a nižšie ju nepodporovali predponami alebo bez nich).
Nezabudnite, že prehliadače sa budú vždy meniť a kreatívne prístupy na podporu starších prehliadačov budú vyžadované, pokiaľ neplánujete budovať webové stránky, ktoré sú za posledných najmodernejších metód. Nakoniec, písanie predpôn prehliadača je oveľa jednoduchšie ako hľadanie a využívanie chýb, ktoré budú s najväčšou pravdepodobnosťou opravené v budúcej verzii, vyžadujúc ďalšiu chybu na zneužitie a tak ďalej.