ArduoCss: freeware CSS editor pro Windows

Pokud se živíte tvorbou webových stránek, pak nepochybně znáte a používáte velké editory jako je Adobe Dreamweaver nebo Microsoft Expression Web. Pokud chcete upravovat pouze CSS a nezajímají vás další funkce, pak je asi zbytečné do těchto programů investovat a vystačíte si s nějakou freewarovou pomůckou.

Po pravdě řečeno, při slovním spojení freeware a CSS se mi vybaví léty prověřený TopStyle Lite, ten však už výrobce na svém webu dále nenabízí a specializuje se pouze na placenou verzi. Určitě budete rádi, že se objevila náhrada, a to v podobě prográmku ArduoCss.

Proč instalovat ArduoCss?

Proč vlastně používat nějaký specializovaný program na úpravy a vytváření CSS, kdy totéž je možné udělat s jakýmkoli textovým editorem, včetně Notepadu, Vimu a PSPadu? Specializovaný program vám pomůže jednotlivé vlastnosti upravovaných elementů a tříd naklikat.

Vhodný je tedy především pro méně zkušené uživatele a lidi s děravou pamětí. Pokud si nepamatujete, jak nastavit text odstavce, aby se zarovnal do bloku, jaký je správný zápis definice pozadí nebo jakým způsobem vytvořit barevný rámeček kolem nějakého prvku, pak vám ArduoCss napoví.

Ke spuštění ArduoCss potřebujete knihovny .NET Framework 2.0. Ve Windows Vista to tedy bude bez problémů, ve Windows XP možná budete muset doinstalovávat. Po prvním spuštění se program pouze zeptá, kdy má vyhledávat aktualizace a zda chcete zasílat případná chybová hlášení jeho tvůrci. Zároveň jste upozorněni na to, že ve Windows Vista je lepší program spustit v administrátorském režimu - nevím proč, fungoval i bez toho.

ArduoCss

Úprava CSS v ArduoCss

Po spuštění programu klepněte na kartě Startup Content na odkaz new Css a můžete se pustit do vytváření nového souboru kaskádových stylů. Klepněte na položku New Node. Objeví se okno, ve kterém si vyberete z nabízených HTML značek, jejichž vzhled chcete stylem upravit, případně doplníte třídu a ID. Určitě pomůže i nabídka pseudoelementů CSS a různých doplňkových tříd. Tlačítkem Add node přidejte nový záznam do seznamu a potvrďte jeho vložení do souboru tlačítkem OK.

Příprava nové definice CSS

Poklepáním na záznam v seznamu si zobrazíte dialog se seznamem všech parametrů, které můžete pomocí CSS nastavit. Jinou možností je úprava těchto vlastností přímo pomocí bočního panelu Properties.

ArduoCss

Všimněte si, že uprostřed okna programu je přepínání mezi vizuálním režimem úprav, kdy si vše naklikáváte, a psaním kódu. Změna v kódu se samozřejmě projeví v nastavení vizuálního režimu úpravy CSS.

ArduoCss a režim kódu

Ve spodní části okna ArduoCss najdete náhledový panel, ve kterém můžete sledovat, jak jednotlivé prvky CSS vypadají, resp. budou vypadat na webové stránce. Není to samozřejmě vhodné pro nějaké pozicování elementů na stránce, pro představu o tom, jak se změní písmo nebo zarovnání však takovýto náhled dostačuje. Pomocí nabídky CSS|Preview si můžete náhled zobrazit i ve spojení s externím HTML souborem obsahujícím definované elementy.

Optimalizace CSS

Při ukládání hotového souboru CSS můžete v ArduoCss využít funkci pro optimalizaci kaskádových stylů. Využívá open source projekt CSSTidy, který váš soubor zbaví chyb, nepřesností a prázdných míst.

ArduoCss a optimalizace CSS

Myslím si, že pro začínající a příležitostné tvůrce webu, kteří potřebují upravit kaskádové styly je ArduoCss dobrá pomůcka. Zkušený autor však spíše sáhne po placených nástrojích jako je Microsoft Expression Web, nebo zůstane u PSPadu či Vimu, podle způsobu práce, na který je zvyklý.