Co jsou a proč byste je měli používat
Předpony dodavatelů CSS, také někdy známé jako předpony prohlížečů CSS , jsou způsob, jak výrobcům prohlížečů přidávat podporu pro nové funkce CSS, než jsou tyto funkce plně podporovány ve všech prohlížečích. To může být provedeno během jakési zkušební a experimentální doby, kdy výrobce prohlížeče přesně určuje, jak budou tyto nové funkce CSS implementovány. Tyto předpony se staly velmi populární při vzestupu CSS3 před několika lety.
Když byla CCS3 poprvé zavedena, řada vzrušených vlastností začala narazovat na různé prohlížeče v různých časech. Například prohlížeče poháněné webkit (Safari a Chrome) byly první, které představily některé vlastnosti ve stylu animace, jako je transformace a přechod. Použitím vlastností, které předurčují dodavatele, mohli weboví návrháři tyto nové funkce využívat a nechat je vidět v prohlížečích, které je podporovaly hned, místo toho, aby museli čekat, až se ostatní výrobci prohlížeče dohnali!
Takže z pohledu webového vývojáře na přední straně se předpony prohlížeče používají k přidávání nových funkcí CSS na web, přičemž mají pohodlí, protože vědí, že prohlížeče budou podporovat tyto styly. To může být obzvláště užitečné, když různí výrobci prohlížeče implementují vlastnosti trochu odlišnými způsoby nebo jinou syntaxí.
Prefixy prohlížeče CSS, které můžete použít (každá z nich je specifická pro jiný prohlížeč), jsou:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Ve většině případů použijete zcela novou vlastnost stylu CSS, vezmete standardní vlastnost CSS a přidáte předponu pro každý prohlížeč. Předpřipravená verze budou vždy první (v libovolném pořadí, které upřednostňujete), zatímco normální vlastnost CSS přijde poslední. Pokud například chcete do dokumentu přidat přechod CSS3, použijete přechodovou vlastnost, jak je uvedeno níže:
-webkit- přechod: všechny 4s snadné;
-moz- přechod: všechny 4s snadné;
-ms- přechod: všechny 4s snadné;
- - přechod: všechny 4s snadné;
přechod: všechny 4s snadné;
Poznámka: Některé prohlížeče mají pro určité vlastnosti jinou syntaxi, než ostatní, takže nepředpokládejte, že předem nastavená vlastnost prohlížeče je přesně stejná jako standardní vlastnost. Chcete-li například vytvořit gradient CSS , použijete vlastnost lineárního gradientu. Firefox, Opera a moderní verze prohlížeče Chrome a Safari používají tuto vlastnost s příslušnou předponou, zatímco starší verze prohlížeče Chrome a Safari používají prefixed vlastnost -webkit-gradient. Také Firefox používá jiné hodnoty než standardní.
Důvod, proč deklarujete vždy svou normální verzí vlastností CSS bez předpony, je taková, že pokud prohlížeč pravidlo podporuje, použije to. Pamatujte si, jak je CSS čteno. Pozdější pravidla mají přednost před staršími, pokud je specificita stejná, takže prohlížeč by si přečetl verzi dodavatele pravidla a použije jej, pokud nepodporuje normální, ale jakmile to udělá, přepsá verzi dodavatele s skutečné pravidlo CSS.
Předpony dodavatelů nejsou hack
Když byly poprvé představeny předčíslí dodavatelů, mnoho webových profesionálů se zajímalo, zda se jedná o hack nebo posun zpět do tmavých dnů, kdy je kódování webových stránek podporováno pro různé prohlížeče (pamatujte si ty zprávy " Tato stránka je nejlépe zobrazena v IE "). Předpony dodavatelů CSS však nejsou hackami a neměli byste mít žádné výhrady k jejich použití ve vaší práci.
CSS hack využívá chyby při implementaci jiného prvku nebo vlastností, aby získal jinou vlastnost, aby správně fungovala. Například model box hack využíval nedostatky při analýze vlastnosti hlasové rodiny nebo v tom, jak prohlížeče analyzují zpětné lomítka (\). Tyto hackery však byly použity k vyřešení problému rozdílu mezi tím, jak aplikace Internet Explorer 5.5 zpracovala model krabice a jak jej Netscape interpretovala, a nemají nic společného se styly hlasové rodiny. Naštěstí tyto dva zastaralé prohlížeče jsou ty, o čem v dnešní době nemáme žádné obavy.
Předpona dodavatele není hack, protože umožňuje specifikaci nastavit pravidla pro to, jak může být vlastnost implementována, a současně umožnit tvůrcům prohlížeče implementovat vlastnost jiným způsobem, aniž by přerušila vše ostatní. Navíc tyto předpony pracují s vlastnostmi CSS, které budou nakonec součástí specifikace . Jednoduše přidáme nějaký kód, abychom mohli mít přístup k nemovitosti dříve. To je další důvod, proč ukončíte pravidlo CSS normální vlastností bez předpony. Tímto způsobem můžete vypustit předem nastavené verze, jakmile je dosaženo plné podpory prohlížeče.
Chcete vědět, jaká je podpora prohlížeče pro určitou funkci? Webová stránka CanIUse.com je skvělý zdroj pro shromažďování těchto informací a informování o tom, které prohlížeče a které verze těchto prohlížečů aktuálně podporují funkci.
Předpony dodavatelů jsou nepríjemné, ale dočasné
Ano, mohlo by to být nepríjemné a opakované, kdybyste museli zapisovat vlastnosti 2-5 krát, aby to fungovalo ve všech prohlížečích, ale je to dočasná situace. Například, před několika lety, abyste nastavili zaoblený roh na krabici, musíte napsat:
-moz-okraj-poloměr: 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 nyní, když prohlížeče přišli plně podporovat tuto funkci, potřebujete pouze standardizovanou verzi:
okraj: 10px 5px;
Chrome podporoval vlastnost CSS3 od verze 5.0, Firefox ji přidal ve verzi 4.0, Safari jej přidal v 5.0, Opera v 10.5, iOS v 4.0 a Android v 2.1. I aplikace Internet Explorer 9 ji podporuje bez předpony (a IE 8 a nižší ji nepodporují s předponami nebo bez nich).
Nezapomeňte, že prohlížeče se budou vždy měnit a kreativní přístupy k podpoře starších prohlížečů budou vyžadovány, pokud neplánujete vytvářet webové stránky, které jsou za nejmodernějšími způsoby roky. Nakonec psaní předpon pro prohlížeč je mnohem jednodušší než hledání a zneužití chyb, které budou s největší pravděpodobností opraveny v budoucí verzi, vyžadující další chybu, kterou je třeba využít, a tak dále.