Nechcete neustále pamatovat na dopisování prefixů do CSS definicí? Můžete použít některý z dostupných nástrojů.

CSSPrefixer

Pro online kontrolu můžete použít CSSPrefixer, do kterého jednoduše vložíte váš kód. Tento nástroj si též můžete stáhnout, ale vzhledem k tomu, že je napsaný v Pythonu, tak možná budete mít problém ho spustit. (Alespoň mě se do Windows moc nehodil.)

Pleeease

Další nástroj je napsaný v JavaScriptu, takže ho můžete buď použít online na pleeease.io/play, nebo ho stáhnout z GitHubu; v této verzi je ale určen pro různé buildící nástroje pracující s JavaScriptem – nelze ho použít jako polyfill tím, že JS přidáte do stránky (k tomu slouží jiné knihovny jako je Flexie pro Flexbox).

Prefixr

Nástroj fungující pomocí online API Prefixr bohužel nefungoval v době psaní toho článku, takže jsem nemohl vyzkoušet.

CssCrush

Knihovna CssCrush (stahujte z GitHubu) je napsána v PHP, takže je nejvhodnější pro malé weby, které ji mohou použít k online překladu nahraných CSS souborů díky tomu, že kromě doplňování prefixů umí i soubory optimalizovat a minifikovat a navíc obhahuje i cache, takže nebude příliš zpomalovat stahování stránky.

V konfiguraci se dá buď zapnout minifikace, která vyháže nepotřebné znaky (vhodné pro online minifikaci), a nebo naopak formátování, které sjednotí zápisy a umožní lepší čtení (vhodné pro pre-commit skripty).

V základní verzi překládá jen běžně používané prefixy, ale po zapnutí přiložených pluginů se z něj stane velmi užitečný nástroj:

• ie-inline-block a ie-opacity (pro podporu IE7 a IE8)
• initial (nahrazení klíčového slova initial skutečnou hodnotou – pro lepší kompatibilitu mezi prohlížeči)
• legacy-flexbox (pro prefixování první verze Flexboxu)
• rem (překládá mezi jednotkami REM a pixely pro lepší kompatibilitu mezi prohlížeči – ve výchozím nastavení vytváří zpětnou kompatibilitu pro prohlížeče, které REM nepodporují)
  • ve výchozím nastavení funguje jen na font-size, do nastavení přidejte 'settings' => array( 'rem-all'=>'yes'), aby fungoval i na ostatní definice
• property-sorter (seřadí CSS definice podle kontextu, takže snadněji najdete kolize a duplicity; vhodné v kombinaci s formátováním, pro minifikaci zbytečné)