Design To XHTML

Използването на css sprite става все популярно. Удобно е защото намалява броя на заявките към сървъра и спестява премигването при зареждане на поредната картинка. На много места има описано как се прави css sprite или иначе казано един файл с много картинки, които се показват чрез background-position.

Много често са показани файлове с картинки на Amazon

и Google

Показано е как точно се правят нещата, но май рядко попадам на статии, в които се обяснява какво трбява да се има предвид при подреждане на елементите на картинката. Аз лично се сещам за 1 – 2 неща и затова реших да ги напиша, може би на някой начинаещ ще му бъде от полза .
За съжаление често за да се ‘спести’ време се прави дизайн на начална страница, клиента я одобрява, и тя трябва да почне да се ‘реже’ докато дизайнера прави останалото. Човек си подрежда елементите и изведнъж идват вътрешните страници и се оказва че разположението на елементите не е много удачно по една или друга причина. Затова винаги ми се е искало да видя дизайна на целия сайт, преди да започна да режа, но… шефовете са си шефове

Обикновено примерите са с картинки за бутони, но аз често ги ползвам да слагам подложки за заглавия или някакви кутийки с картинка за фон. В тези случаи размерите на елементите не са съвсем ясни и по-точно височината, защото винаги може да се случи заглавието да е по-дълго и да клиента да иска да се вижда цялото, а не да се отрязва с php примерно. Това означава, че трява да се сложи цвят който да продължава след фона.
За целта е добре елементи, които ще се ползват по този начин да се слагат в най-долната част на картинката. В противен случай, ако текстът се разшири повече ще се покажат картинките, които са сложени под тази, която в момента ползваме за фон.
Аналогично е ако имаме някаква картинка която трябва да седи в най-долната част на елемент (в момента се сещам за стрелкичка в долната част на бутонче, указващо активност) да предвидим достатъчно празно място над картинката, за не се виждат и останалите картинки от sprite. От тук мисля, че вече е ясно че ако искате да имате някаква картинка, в лявата част на елемент – трябва да оставите достатъчно място вдясно от нея, и обратно, ако имате картинка в дясната част на елемент, трябва да има място в ляво от нея.

Що се отнася до повтарящите се фонове, аз лично си ги изнасям в отделен sprite доколкото това е възможно(защото понякога не е). Тук врътката е, че ако имате картинки, които трябва да се повтарят по x, трябва да ги разположим една под друга, като задължително всичи да са с еднаква широчина, а не целият sprite да е 10 px и вътре да има картинка с широчина 4px. Ако има картинки, които ще се повтарят по вертикала, то тогава в sprite трябва да са разположени хоризонтално, т.е една до друга.

Предполагам че това е очевидно за хората, които вече са правили sprite, но когато за 1-ви път се сблъскаш с това, не е чак толкова очевидно.