jakubův notes – programování a vejšplechty

Všechno začalo mou leností, když jsem kódoval jedno menu. Každá položka měla jiné pozadí a položek byl stále stejný počet, tak jsem jednoduše využil CSS selektoru +:

li { background-image: url('img/menu_1.png'); }
li+li { background-image: url('img/menu_2.png'); }
li+li+li { background-image: url('img/menu_3.png'); }

Ale ejhle, selektor + přeci nepodporuje Internet Explorer 6 (a když ta mrška ne a ne odejít do horoucích pekel, kam patří…). Jelikož se v poslední době rozmnožily různé emulace různých věcí, které některé prohlížeče neumí, napsané v Javascriptu, začal jsem pátrat, jestli někdo neudělal něco podobného pro pro styly a IE šestku.

Inu, nic jsem nenašel. Tak jsem se ještě radši zeptal na tom správném místě. A zdá se, že nikdo o ničem neví. V duchu, co si neuděláš sám, to nemáš, jsem se vrhl na implementaci. A musím říct, že jsem spokojen.

Trvalo to sice hodně času a nervů, ale nakonec jsem „poskládal“ potřebné části – použil CSS selektorový engine Sizzle, uloupil detekci prohlížeče z quirksmode.org, napsal primitivní CSS parser, přihodil nějaký ten XMLHttpRequest, pak ještě smyčku, co načtená pravidla aplikuje, a tadá – zrodila se Sally, dívenka, která dá starému průzkumníkovi co proto.

Chcete-li, aby vám též pomohla, podívejte se na již odkazovaný GitHub, nebo si rovnou naklonujte repozitář:

$ git clone git://github.com/jakubkulhan/sally.git

Použití je pak jednoduché:

<script type="text/javascript" src="sally.js"></script>

Nechcete-li, aby ostatní browsery zbytečně Sally načítaly, můžete přihodit nějaký podmíněný komentář.

foto od GonerDoug

Dlouho jsem vzdoroval použít nějaký ten CSS framework. Říkal jsem si, že přece každá stránka (i když většina věcí je přinejmenším podobně dělaných) je ouplně jiná, takže tam nepůjde použít nějaké zobecňující řešení jako v případě aplikačních frameworků. Ale nakonec jsem se rozhoupal a u své poslední práce – e-shopu Shopaholic – zvolil použít některé z ještě nepoužitých technologií. Vlastně ne jen některé, všechny. Místo svých minimalistických „frameworků“ jsem sáhnul po Nette a místo docela osvědčeného PDO zase po dibi. Ale zpět k CSS gridu.

Překlad slova grid zní mříž, či mřížka. A přesně tím stylem se i ubírá kódování designu. Člověk si rozvrhne mřížku a do té si dosadí různé designové elementy.

Poté pomocí různých zanořování sloupců a řádků do sebe z toho vyleze požadovaný výsledek. Svým způsobem to může připomínat tabulku (sloupce, řádky…), takže někteří tvrdí, že CSS gridy jsou vlastně vracením se k předchozím generacím tvorby layoutu stránek. Ale zase, když si vzpomenu na svoje první stránky, které měly v té době moderní tabulkový layout, tak musím říct, že ono to fungovalo!

A o to právě jde. Sémantičtí maniaci vybili své síly pár roků zpět. Teď sice každý deklaruje, že jeho kódování je to nejsémantičtější vůbec a všem je jedno, jak je to ve skutečnosti. Ze slova „sémantika“ a odvozeného přídavného jména „sémantický“ se staly výrazy, které se běžně používají, nikdo neví, co to vlastně znamená, a neexistuje žádná jednotná definice. (Připomíná mi to MVC architekturu…)

Tvůrci gridů a vůbec ti, co je používají, tvrdí, že názvy CSS tříd jako row a column jsou sémantické, a tak se jich lidé nemusí bát. Souhlasím v tom, že se toho jeden bát opravdu nemusí.

Dalším problémem je, že gridy mohou do HTML zanášet značky navíc (podpůrné <div>y pro sloupce a řádky). V tom nevidím moc problém, protože stejně používám matrjošku, a tak mě nějaký ten bajtík a značka navíc nezabijí (ukamenujte mě).

Trochu větší oříšek je pozicování sloupů jiné než je jejich umístění v dokumentu. Pro věci, kde je tohle stěžejní bych asi grid nepoužil.

Co je vůbec na výběr? Nejznámější asi jsou Blueprint a 960.gs. Ale já jsem použil a hodlám nadále používat The 1KB CSS Grid. Jednoduché, přímočaré, doporučuji.