CSS ikony

Ikony bez obrázků v čistém CSS.

30. prosince 2013

CSS

Hotová řešení

Rady a nápady

4 minuty

Chceme-li stránkou obohatit a zpřehlednit ikonami, existují různé možnosti:

Použít běžný obrázek (ideálně jako CSS sprite).
Použít tzv. font icons (ikony z písma). To funguje tak, že se na stránku připojí speciální font, který místo běžných znaků obsahuje grafické symboly ikon.
Nakreslit ikonu přímo v CSS.

Obecné techniky kreslení v CSS už jsem popisoval. Při tvorbě CSS ikon je jen stačí vhodně kombinovat.

U složitějších podob ikon, kde je potřeba více elementů, si lze vypomoci přes :before/:after. A ušetřit tím pár značek, které by jinak musely být v kódu.

Z jednoho elementu tedy můžeme udělat tři, případně přidat další element a získat tak šest částí, což už stačí i na složité výtvory. Ne jen primitivní šipku.

Výhody a nevýhody

Výhody ikonek v CSS jsou:

šetření HTTP požadavků (stačí přidat do CSS definici ikon, nic dalšího se nemusí stahovat),
snadná změna barev a rozměrů bez ztráty kvality (pokud s tím ikonky počítají).

Jako nevýhody lze považovat:

Komplikovanější upravování a rozšiřování. Je jednodušší překreslit obrázek, než laborovat s CSS v :before a :after elementech a obávat se limitu daným počtem elementů pro ikony stanovených.
Slabší podpora některých pro kreslení podstatných CSS vlastností (například kulaté rohy). Plnohodnotnou podobu je reálné očekávat až od IE 9.
Další věc je datová velikost. Při komplikovanějších podobách využívajících lehce nestandardní CSS vlastnosti, může být CSS kód ikony zaneřáděn duplicitními deklaracemi lišící se jen prefixy. A ve výsledku tak být objemnější než běžný obrázek.
Nakonec bude u CSS ikon mnohem slabší výběr hotových setů ikon rovnou k použití.