Martin's world

CSS sprity a seznamy

Ač nerad, přeci jen jsem občas dotlačen k práci na uživatelském rozhraní :-). V rámci jednoho webového projektu vznikl požadavek použít CSS sprity  místo odrážek.

Pokud někdo neví, co jsou to CSS sprity, tak snad pomůže tento odkaz.

Přímé použití v seznamech je ale, jak jsem posléze zjistil, problematické. Prvek seznamu je obvykle větší než obrázek ve spritu a tak je často zobrazeno ze spritu více, než by bylo vhodné. Ani můj oblíbený stackoverflow mi nenabídl řešení – většina příspěvků, co jsem našel, radila buď předělat sprite tak, aby obsahoval obrázky jen vertikálně  a nebo  navrhovala použít element div jako kontejneru.

Pouze vertikální uspořádání spritu nebylo možné – sprite byl dodán a nebylo možné jej měnit. Použítí divu se mi moc nelíbílo, kód pak vypadal tak nějak divně:

<ul>
    <li class="menu">
        <div class="saveIcon"></div>Save
    </li>
</ul>

Mým cílem je ale mnohem obyčejnější zápis:

<ul class="menu">
    <li class="save">save</li>
    <li class="edit">edit</li>
</ul>

dosáhnout tohoto vzhledu:

o vše se pak postará tento css kód:

ul.menu
{
    list-style: none outside none;
    padding: 0;
    margin: 0;
    font-weight:bold;
}

ul.menu li
{
    display: inline-block;
    margin-left: 20px;
}
    
ul.menu li:before
{
    content:url(content/empty_space.gif); 
    background-image: url(Content/sprite_example.jpg);
    background-repeat: no-repeat;
    margin-right:5px;
    display: inline-block;
}
    
li.save:before
{
    background-position: 0px -53px;
}

li.edit:before
{
    background-position: -45px -53px;
}

Finta spočívá v použítí průhledného obrázku s rozměry odpovídajícími ikoně ze spritu. Ostatní již odpovídá běžnému postupu při používání Css spritu.

Následně je i velmi jednoduché změnit obrázek při najetí myší, stačí doplnit tento styl:

li.save:hover:before
{
    background-position: 0px 0px;
}

Přiložena je i jednoduchá stránka s obrázky a css stylem.