Экономим на иконках

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Владимир Токмаков

2 июня 2005


Задача.

Сократить количество обращений к серверу при загрузке страницы с большим количеством иконок.

Собираем иконки в один файл, затем кладем этот файл в качестве фона и двигаем на нужную позицию.

Как это выглядит в браузере

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
<style type="text/css">
    ul
    {
        padding: 0;
        margin: 0;
    }
    #services li
    {
        padding: 0;
        margin: 0 2em 0 0;
        float: left;
        list-style-type: none;
        position: relative;
    }
    #services a
    {
        padding: 0 0 0 18px;
        display: block;
        position: relative;
        text-decoration: underline;
        z-index: 2;
    }
    /* этот элемент нужен для решения проблемы перезагрузки фоновых изображений в IE */
    #services i
    {
        position: absolute;
        z-index: 1;
        left: 0;
        top: -8px;
        width: 16px; height: 16px;
        margin-top: 0.6em;
        background: url('services.gif') no-repeat;
    }
    #narod i { background-position: -16px 0; }
    #maps i { background-position: -48px 0; }
    #money i { background-position: -96px 0; }
</style>
<ul id="services"> 
    <li id="maps"><i></i><a href="http://maps.yandex.ru/">Карты</a></li>
    <li id="money"><i></i><a href="http://money.yandex.ru/">Деньги</a></li>
    <li id="narod"><i></i><a href="http://narod.yandex.ru/">Два ствола</a></li>
</ul>