• Техногрет
  • Экономим на иконках

    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>