Spravovatelnost — o důvod víc proč využít CSS3

Dobře, toto sice je blog vývojářského frikulína — ale telelícího se radostí, že vám konečně může ukázat jak používání CSS3 a dalších nových front-end není akt frikulínství. Je to akt úspornosti. Šetření vlastní energie a klientovy peněženky kromě jiného pomocí lepší spravovatelnosti projektu.

Pojďme si to ukázat na zjednodušeném příkladu kolovrátku (znáte jako preloader nebo spinner). Konvenční příprava pro použití na webu vypadá asi takto — navštívíte Ajaxload, vyberete typ a barvy a necháte si vygenerovat animovaný gif.

Na jiném místě webu potřebujete jinou velikost a tak si vygenerujete nový gif.

A pak ještě potřebujete dvě variany pro jinou barvu pozadí. Přidáte třetí a čtvrtý gif. Pak i pátý a šestý.

Za týden si designér prohlédne web a upraví barevné schéma.

CSS řešení: fotogalerie se zvětšením po najetí myši

Tohle řešení není žádná věda, ale můžete si tady hezky osvojit principy progressive enhancement a taky se třeba naučit obrázky s kulatými rohy. ;-)

Demo >

Základní funkčnost je jednoduchá: Absolutně pozicovaný element (zelený .photo) leží uvnitř relativně pozicovaného (fialového .photo_contai­ner):

„Křápy“ first

Na Webexpo přednášce nebyl čas tuhle myšlenku rozvést. Tady je i s konkrétní technickou aplikací.

Metodu Mobile first a její platnost asi není potřeba dále rozvádět. Luke Wroblewski přes pochyby běží tryskem a nechává jen spálenou zemi. ;)

Designér co navrhuje rozhraní metodou „jeden web“ by v prvé řadě měl myslet na horší zařízení a řešení pro lepší koncipovat jako rozšiřující.

Proto nejdříve mobily a proto jde na proces designu webu krásně pohlížet jako na vrstvení jeho jednotlivých elementů na sebe:

Vývojář designérský pohled obohacuje kromě jiného o přístupnost. Než navrhne řešení pro smartphony, musí se zamyslet nad zařízeními, kterým můžeme říkat třeba „křápy“. :)

Nemusí to být jenom stará Nokia se špatným prohlížečem nebo MSIE6. Mezi křápy počítejte i vaši zcela novou tiskárnu nebo slepeckou čtečku. Všechno to jsou zařízení, který pomůžete především správně vyznačenou strukturou dokumentu, významem obsahu a taky čitelnou typografií.

Klonované submity útočí (jednotný vzhled odesílacího tlačítka pomocí CSS)

Potřebujete někdy nastylovat odesílací tlačítko ve formuláři v rozměrech a na pozici pixelově perfektních? Mám pro vás řešení. Není jednoduché, obsahuje magii, které nerozumím, a nefunguje dokonale ve všech prohlížečích. :-)

Ještě čtete? Dobře děláte, protože na druhou stranu je široce použitelné a vůbec ho mám rád tak ušmudlané jaké je, protože mě od té doby už několikrát pomohlo.

Navíc — proč na sebe dělat ramena jak moc věcem rozumíme? Sám bych docela rád četl texty ne jen mentorské, ale také ty s jistou pochybností na straně autora. Nejistota má tu výhodu, že do řešení problému vtahuje i čtenáře.

Pokud vás detaily nezajímají, podívejte se na výsledek rovnou.

Výsledný test-case >