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

Predpony 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:
-slečna-
iOS:
-webkit-
Operní:
-Ó-
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 by vždy byly 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řechod

vlastnictví, jak je uvedeno níže:

-webkit- přechod: všechny 4s snadné; -moz- přechod: všechny 4s snadné; -slečna- přechod: všechny 4s snadné; -Ó- přechod: všechny 4s snadné;přechod: všechny 4s snadné;

Poznámka: Nezapomeňte, že některé prohlížeče mají pro určité vlastnosti jinou syntaxi než jiné, takže nepředpokládejte, že předem nastavená verze prohlížeče je přesně stejná jako standardní vlastnost. Například pro vytvoření gradientu CSS použijete

lineární gradient
vlastnictví. 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í předpony

-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é uvedeny předpony prodejců, mnozí weboví profesionálové se zajímali o to, zda se jedná o hack nebo o posun zpět do tmavých dnů, kdy zkopírují kód webových stránek, aby podporovali různé prohlížeče (pamatujte si ty " Tento web je nejlépe zobrazen v IE ". Předpony dodavatelů CSS však nejsou hackami a neměli byste mít žádné výhrady ohledně 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

hlas-rodina
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é bude 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.