Co jsou předpony dodavatele nebo prohlížeče CSS?

Předpony dodavatelů CSS, někdy také známé jako nebo CSS předpony prohlížeče, jsou způsob, jak mohou tvůrci prohlížečů přidat podporu pro nové funkce CSS než budou tyto funkce plně podporovány ve všech prohlížečích. To lze provést během jakéhokoli období testování a experimentování, 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í s nástupem CSS3 Před několika lety.

Počátky prefixů dodavatele

Když byl CCS3 poprvé představen, řada vzrušených vlastností začala narazit na různé prohlížeče v různých časech. Například prohlížeče využívající Webkit (Safari a Chrome) jako první zavedly některé vlastnosti ve stylu animace, jako je transformace a přechod. Pomocí dodavatele s předponou vlastnosti, mohli weboví designéři tyto nové funkce používat při své práci a nechat je vidět v prohlížečích který je hned podporoval, místo aby museli čekat, až se chytí všichni ostatní výrobci prohlížečů nahoru!

Společné předpony

Takže z pohledu front-end webového vývojáře se předpony prohlížeče používají k přidání nových funkcí CSS na web a zároveň mají pohodlí s vědomím, že prohlížeče tyto styly podporují. To může být obzvláště užitečné, když různí výrobci prohlížečů implementují vlastnosti mírně odlišnými způsoby nebo s jinou syntaxí.

Předpony 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:

  -slečna-

• iOS:

  -webkit-

• Opera:

  -Ó-

• Safari:

  -webkit-

Přidání předpony

Ve většině případů použijete zcela novou vlastnost stylu CSS, použijete standardní vlastnost CSS a přidáte předponu pro každý prohlížeč. Předponové verze budou vždy na prvním místě (v libovolném pořadí, které dáváte přednost), zatímco normální vlastnost CSS bude na prvním místě. Například pokud chcete do dokumentu přidat přechod CSS3, použijete vlastnost přechodu, jak je znázorněno níže:

-webkit-transition: všechny 4s snadné;
-moz-transition: všechny 4s snadné;
-ms-transition: všechny 4s snadné;
-o-přechod: všechny 4s snadné;
přechod: snadnost všech 4 s; 

Pamatujte, že některé prohlížeče mají pro určité vlastnosti jinou syntaxi než jiné, takže nepředpokládejte, že verze vlastnosti s předponou v prohlížeči je přesně stejná jako standardní vlastnost. Například k vytvoření přechodu CSS použijete vlastnost lineárního přechodu. Firefox, Opera a moderní verze Chromu a Safari používají tuto vlastnost s příslušnou předponou, zatímco dřívější verze Chromu a Safari používají předponovou vlastnost -webkit-gradient.

Firefox také používá jiné hodnoty než standardní.

Důvod, proč deklaraci vždy ukončíte normální, nepředponovanou verzí vlastnosti CSS, je ten, že když prohlížeč toto pravidlo podporuje, použije ho. Pamatujte, jak se čte CSS. Novější pravidla mají přednost před dřívějšími, pokud je stejnost stejná, takže prohlížeč by přečetl verzi dodavatele pravidlo a použijte, že pokud nepodporuje normální, ale jakmile to udělá, přepíše verzi dodavatele skutečným CSS pravidlo.

Prefixy dodavatele nejsou hack

Když byly poprvé představeny předpony dodavatelů, mnoho profesionálů z webu se zajímalo, jestli jde o hack nebo o vrátit se do temných dnů rozvětvování kódu webových stránek a podporovat různé prohlížeče (pamatujte na to "Tato stránka je nejlépe prohlížena v IE"zpráva). Předpony dodavatelů CSS však nejsou hacky a neměli byste mít žádné výhrady k jejich použití ve vaší práci.

Hack CSS využívá chyby v implementaci jiného prvku nebo vlastnosti, aby zajistil správnou funkci jiné vlastnosti. Například hack modelu boxu využil chyby při analýze rodiny hlasu nebo v tom, jak prohlížeče analyzují zpětná lomítka \. Ale tyto hacky byly použity k vyřešení problému rozdílu mezi tím, jak Internet Explorer 5.5 zacházel s modelem krabice a jak Netscape interpretovali to a nemají nic společného se stylem hlasové rodiny. Naštěstí tyto dva zastaralé prohlížeče jsou ty, se kterými se dnes nemusíme starat.

Předpona dodavatele není hack, protože umožňuje specifikaci nastavit pravidla pro implementaci vlastnosti, a zároveň umožňuje tvůrcům prohlížečů implementovat vlastnost jiným způsobem, aniž by to všechno rozbilo jiný. Kromě toho tyto předpony pracují s vlastnostmi CSS bude nakonec součástí specifikace. Jednoduše přidáváme nějaký kód, abychom získali přístup k nemovitosti brzy. To je další důvod, proč ukončíte pravidlo CSS s normální předponou. Tímto způsobem můžete předinstalované verze zrušit, jakmile je dosaženo plné podpory prohlížeče.

Prefixy dodavatele jsou nepříjemné, ale dočasné

Ano, může to být nepříjemné a opakující se, když musíte vlastnosti psát 2–5krát, aby fungovaly ve všech prohlížečích, ale je to dočasná situace. Například jen před několika lety bylo nutné založit zaoblený roh na krabici, kterou jste museli napsat:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-border-right-radius: 10px;
-webkit-border-border-left-radius: 5px;
poloměr ohraničení: 10px 5px; 

Ale teď, když prohlížeče tuto funkci plně podporují, potřebujete pouze standardizovanou verzi:

poloměr ohraničení: 10px 5px; 

Chrome podporuje vlastnost CSS3 od verze 5.0, Firefox ji přidal do verze 4.0, Safari ji přidal do 5.0, Opera v 10.5, iOS v 4.0 a Android v 2.1. Dokonce i Internet Explorer 9 jej podporuje bez předpony (a IE 8 a nižší jej nepodporovaly s nebo bez) předpony).

Pamatujte, že prohlížeče se budou vždy měnit a pokud neplánujete, budou vyžadovány kreativní přístupy k podpoře starších prohlížečů vytváření webových stránek které jsou roky pozadu za nejmodernějšími metodami. Nakonec je psaní předpon prohlížeče mnohem jednodušší než hledání a zneužití chyb, které budou s největší pravděpodobností opraveny v budoucí verzi, což vyžaduje, abyste našli další zneužitelnou chybu atd.