Formátování CSS pomocí ProCSSor

Pro rychlé webové stránky a aplikace je vhodné nahrávat CSS styly na produkční server v minimizované podobě. I když se soubory cachují (více informací naleznete v článku Jak můžeme zrychlit své webové aplikace?).

V takovém případě budeme udržovat produkční a vývojovou verzi souborů. Celkem snadno se může stát, že vývojovou verzi ztratíme. Nebo můžeme spolupracovat s dalšími lidmi, kteří mají vlastní způsoby zápisu. Jak se pak vyznáme v různé podobě stylů, minimizované verzi, atp.?

Můžeme je předělat ručně - odtabelovat, upravit whitespaces, atp. Což bude práce na několik hodin nebo i dní. Existuje však webová aplikace ProCSSor, která vše udělá za nás během pár vteřin.

Využití aplikace ProCSSor

V záhlaví aplikace se píše: “Advanced CSS Prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.” Skvěle se tedy hodí na formátování CSS stylů do podoby, která nám bude vyhovovat.

Webová aplikace ProCSSor
Webová aplikace ProCSSor.

Můžete jí využít pro úpravu formátování, deminimizaci a vizuální optimalizaci CSS stylů. Což může být užitečné, pokud ztratíte vývojové soubory nebo přebíráte soubory po někom, kdo využíval jiný způsob zápisu.

Co aplikace umožňuje

Hlavní předností je právě vizuální sjednocení podoby stylů. Aplikace pro to nabízí několik možností nastavení - od způsobu zarovnání sdílených stylů pro více elementů, až po zanořování dílčích elementů.

Možnost nastavení pro vizuální zanořování elementů
Možnost nastavení pro vizuální zanořování elementů.

Každá volba nabízí ukázku, jak bude výsledné zpracování CSS vypadat.

Možnost nastavení formátování závorek
Možnost nastavení formátování závorek.

Požadované CSS styly můžete do aplikace nahrát několika způsoby:

  • Přímým vložením do aplikace.
  • Nahráním souborů.
  • Odkazem na vzdálený CSS soubor.

Aplikace dokáže rychle přeformátovat i obsáhlé CSS soubory umístěné na webovém serveru.

Styly Twitter.com formátované pomocí ProCSSor
Styly Twitter.com formátované pomocí ProCSSor

Pokud si vše nastavíte a necháte aplikaci přeformátovat vaše styly, dostanete výsledek s vyznačenou syntaxí. Samozřejmě si jej také můžete stáhnout přímo do počítače.

V současné době dokáže ProCSSor zpracovat styly i s media queries. A pokud vlastníte Mac, můžete si také aplikaci stáhnout aplikaci jako nativní.


Sdílejte článek



Michal Maňák

Jmenuji se Michal Maňák, jsem Interaction Designer a Digital Product Designer.

Pracuji ve společnosti LMC.