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