Использование CSS Sprites (Спрайты)

Сейчас поговорим о CSS спрайтах. Допустим, Вы используете несколько картинок для построения той же графической кнопки или блока с закругленными уголками. Чтобы не использовать несколько картинок можно объеденить их в одно расположив их в нужном порядке.

Главное преимущество спрайтов - это уменьшение количества HTTP запросов к серверу для получения картинок. Это конечно незначительно уменьшает скорость загрузки страницы, но представте, что у вас 100 маленьких картинок(допустим, иконок). Объеденив их, например в 4 картинки включающие по 25 иконок, Вы уменьшаете количество запросов в 25 раз, а это уже что-то.

Ну давайте наконец перейдем к делу.

Предлагаю небольшой пример с использованием 8-ми картинок объедененных в одну.

Давайте отобразим 4 верхних смайлика и установим ховер (hover) на каждый из них. Псевдокласс будет менять каждый смайлик на нижестоящий.

Вот HTML конструкция:

<ul>
   <li><a class="happy" href="#"></a></li>
   <li><a class="green" href="#"></a></li>
   <li><a class="punk" href="#"></a></li>
   <li><a class="sad" href="#"></a></li>
</ul>

А вот фрагмент CSS кода:

ul li { list-style:none; float:left; }
ul a { display:block; display:block; height:96px; width:96px;
   background:url("smileys.png") no-repeat; float:left;
}

Как Вы заметили, я задал всем элементам "а" фон с картинкой smileys.png которая показана выше. Должно получится следующее:

Теперь немного пояснения. Размеры наших элементов "а" - 96х96 пикселей. Свойство background-position по умолчанию имеет значение 0. Это значит, что фон для элемента будет начинаться с верхнего левого угла нашей картинки. Вот почему все 4 смайлика будут одинаковыми.

Теперь попробуем изменить 3 последних смайлика используя ту же картинку.

ul a.happy { } /* с первым у нас и так все нормально */
ul a.green { background-position:-96px 0; }
ul a.punk { background-position:-192px 0; }
ul a.sad { background-position:-288px 0;}

Заметьте, что я установил именно отрицательное значение по оси Х. Это потому, что мы двигаем не элементы по фону, а сам фон под элементом. Допустим, для зеленого смайлика нам необходимо сдвинуть фон влево ровно на 96px. Должно отображаться следующее:

Ну а теперь добавим псевдокласс hover для каждого элемента "а":

ul a.happy:hover { background-position:0 -96px; }
ul a.green:hover { background-position:-96px -96px; }
ul a.punk:hover { background-position:-192px -96px; }
ul a.sad:hover { background-position:-288px -96px; }

Теперь я сдвинул background вниз на 96 пикселей для каждого из классов, а значение Х оставил прежним. В конечном результате у вас должно получиться следующее:

Рабочий пример

Вот так можно удобно пользоваться спрайтами. Главное правильно расположить картинки чтобы в дальнейшем их возможно было использовать. Например, для кнопки состоящей из 3-х картинок (предыдущая статья) можно использовать такой спрайт:

Сверху расположены правая и левая часть кнопки, снизу - середина.

Надеюсь, что моя статья была вам интересна и вы что-то из нее почерпнули. Если нет, то смайлики определенно должны были вас порадовать :).

CSS кнопка (кроссбраузерная)

В этот раз речь пойдет о том как заменить стандартные кнопки браузера своими собственными. При этом главная цель сохранить их функциональность и одинаковую отрисовку во всех браузерах.

Я нарисовал свою собственную кнопку которая напоминает стиль Windows Vista Button:

Для того чтобы сверстать такую кнопку я использую следующую конструкцию:

<a class="button" href="#">
<img class="head" src="blank.png" /><input type="submit" value="Button"/><img class="tail" src="blank.png" />
</a>

Я не зря обрамил три элемента именно в тег <A>. IE6 понимает псевдокласс hover только для этого элемента, поэтому если в дальнейшем мы захотим чтобы кнопка изменяла свой вид при наведении на нее мышкой - это будет какраз кстати. Также учтите, что все элементы являются инлайновыми(inline) и любой пробел или перенос строки между ними приведет к возникновению пустого пространства, а нам этого не надо. Поэтому сохраните форматирование именно так (все 3 внутренних элемента в одной строке).

И так, как Вы уже заметили, кнопка состоит их трех основных элементов: элемент img который выполняет роль левой части, элемент img - правая часть и input, который будет растягиваться посредине. Для верстки нам понадобятся 3 составные картинки этой кнопки. Вырежьте их в каком-то графическом редакторе типа Photoshop или GIMP. У Вас должно получиться следующее:

     

ВАЖНО! Дополнительно вырежьте картинку размером 1x1 пикселя полностью прозрачного фона. Об этом чуть дальше.

Настало время для самой верстки:

.button { text-decoration:none; }
    .button * {
        border:0;
        height:37px;
        cursor:pointer;
        vertical-align:middle;
    }

    .button img.head {
        background:url("button-left.png") no-repeat;
        width:7px;
    }

    .button img.tail {
        background:url("button-right.png") no-repeat;
        width:7px;
    }

    .button input {
        background:url("button-bg.png") repeat-x;
        color:#eee;
        width:100px;
        padding-bottom:2px;
        font-size:15px;
    }

Подробно рассмотрим каждый селектор:

.button * задает каждому элементу высоту в 37 пикселей, убирает бордер и устанавливает курсор в виде руки(это по желанию).

Далее опишем два класса head и tail. Установите на бекграунд заведомо вырезанные рисунки. Я устанавливаю их с помощью CSS опять же для hover'a. Теперь, как и обещал, вернемся к нашей прозрачной однопиксельной картинке. В этом примере я назвал ее blank.png и поставил ее на оба тега img. Это нужно сделать так как картинка без указанного атрибута src вовсе не будет отрисовываться.

Наконец устанавливаем CSS свойства для нашей кнопки. Ставим фоновый рисунок и растягиваем его по горизонтали. Задаем cерый цвет шрифта, верхний паддинг чтобы центрировать текст по вертикали и размер фонта 15 пикселей.

Ну вот и все. Кроссбраузерная CSS кнопка готова.

Если захотите установить hover, достаточно добавить всего 3 коротких селектора:

.button:hover .head { background:url("button-left-hover.png") no-repeat;}
.button:hover input { background:url("button-bg-hover.png") repeat-x; }
.button:hover .tail { background:url("button-right-hover.png") no-repeat;}

Метод getElementById() в IE или "при чем тут name?"

Здравствуйте! Если Вы читаете эту статью, возможно, вы столкнулись с той же проблемой что и я и находитесь в небольшом замешательстве. Я сам когда-то столкнулся с ситуацией когда javascript'овый метод getElementById() возвращал мне ссылку не на тот объект который я запрашивал. Пришлось потратить немного времени чтобы выяснить в чем же всетаки дело.

На сайте http://www.w3schools.com в разделе Javascript черным по белому написано определение метода getElementById(). Выглядит оно так:

The getElementById() method returns a reference to the first object with the specified ID.

Из данных слов понятно, что этот метод возвращает ссылку на обьект с указанным идентификатором. Так оно и есть конечно, не думайте что я пытаюсь это оспорить :). А вот ребята из Microsoft со своим Internet Explorer'ом оспорили.

getElementById возвращает ссылку на объект с указанным name?

Рассмотрим небольшой пример. Создадим несколько элементов у которых бы совпадали атрибуты id и name:

<textarea name="chooseMe"></textarea>
<div id="chooseMe" />

А теперь попробуем вывести на экран сообщение с именем нужной нам ноды (nodeName):

alert(document.getElementById('chooseMe').nodeName);

Выполнение данного скрипта судя по названию метода должно вывести на экран сообщение с текстом DIV во всех браузерах. Жаль что используя IE6 или IE7 мы увидим ничто иное как окошко с текстом TEXTAREA. А какая разница между именем или айди? IE думает, что никакой.

Будьте внимательны используя элементы с совпадающими именами и идентификаторами когда используете браузеры компании Microsoft. Ну а если Вам это так необходимо, просто добавьте приставку значению имени или айди определенного элемента или же учитывайте порядок поиска "сверху вниз".