CSS спрайты — это вывод отдельных элементов единого изображения на веб — странице. То есть одна большая картинка, либо несколько разных, но объединенных в один файл рядом друг с другом. Зачастую подобным образом группируют множество различных иконок. Разработчики называют подобный файл мастер сеткой. В качестве примера возьмем одну картинку, из которой нам нужно вывести в разных частях страницы различные ее элементы. Как вариант, порезать ее на куски и определять каждую часть отдельно, 1 элемент — 1 отдельный файл. Впрочем еще несколько лет назад именно так все и делали. Простейший вариант по своей сути. Но данный метод имеет один существенный недостаток, а именно — количество HTTP запросов, которые отсылает сервер браузеру. Одна картинка — это один запрос. Чем их больше, тем дольше будет загружаться страница. Посему CSS спрайты в первую очередь служат для сокращения количества этих самых запросов.Выше на картинке вполне четко показан принцип работы CSS спрайтов если представлять выделенную в кружок область в качестве области с изображением на нашей странице.Работает данная технология следующим образом. В нашей странице имеется блок:

Код

<a href="http://december.com/html/4/element/div.html"><span><div</span></a> id="mushroom"><span></div></span>

В нем нам нужно вывести грибок с картинки выше. Открываем всю картинку в редакторе, например Paint.NET, там находим в самом низу шкалу координат. Средством выделения узнаем точный размер области с грибом, у меня получилось 18x18 пикселов. Записываем размеры. Затем опять же при помощи выделения узнаем расстояние до верха картинки от края мастер сетки, аналогично расстояние от левого края. У меня это 40px и 0px. Затем создаем в CSS описание класса mushroom такого типа:

Код

#mushroom{
    background: url(sprite<span>.gif</span>) no-repeat -36px 0px;
    height: 18px;
    width: 18px;
}

Разберем пример. Свойством background выводим грибок в блок <div id=«mushroom»></div> в качестве фонового изображения, no-repeat запрещаем повторяться картинке, -36px и 0px это наши координаты X,Y, именно при помощи них мы и перемещаем по мастер сетке фокус к нужному нам элементу. height:18px и width:18px регулируем размер видимой на странице области. Как видно ничего сложного в этом всем нет, все гениальное — просто. Для потребленцев людей выбирающих американский образ жизни, порекомендую он — лайн генератор CSS спрайтов Для нормальных людей — читаем ниже. 1.Простые спрайты. Для объединения изображений в спрайты рекомендую использовать не сложные графические редакторы. Такие как Paint.NET для Windows, Gnome Paint для Linux. Создаем в редакторе новый файл, на нем, посредством наложения слоев, размещаем нужные изображения для нашего спрайта. Ничего сложного. Таким образом создается мастер сетка. После ее создания, рекомендую выполнить оптимизацию общего изображения, для уменьшения веса. Об оптимизации графики смотрим тут. Далее, как показано выше, создаем CSS классы для каждого нужного элемента и выводим их на страницу. Примечание: для повторяющихся изображений, например для repeat-x (y) подобного рода мастер сетка не подойдет. Для горизонтального повторения (repeat-x) создается вертикальная тонкая полоска, в которой все элементы распологаются один над другим. Причем справа или слева пробелов быть не должно, иначе фон будет повторяться и с ними тоже. Аналогично и для вертикальной мастер сетки, только изображение соответственно будет горизонтальным и элементы располаться будут один рядом с другим по горизонтали. 2.Спрайты через псевдо — элементы. Главное преимущество использования псевдо-элементов заключается в том, что дизайнеры смогут подрезать спрайты. В общем, ничего нового, так как многие сайты уже используют для этого дополнительные теги. Например, Yahoo! Search использует для этих целей пустой тег s, а Facebook — тег i. Но можно ведь создавать компактные CSS спрайты и без пустых вставок между изображениями в спрайте. Два следующих изображения — второй элемент спрайта — сгенерированы с использованием каждой техники соответственно.

• Метод Николаса Галагера, cтилизация псевдо-элемента фоновым изображением:

Код

#first:before { 
	content: ""; 
	float: left; 
	width: 15px; 
	height: 15px; 
	margin: 4px 5px 0 0; 
	background: url(sprite<span>.png</span>) -15px 0; 
}

• Метод нового url()/clip, использование свойства content для вставки спрайта, подрезанного с помощью свойства clip:

Код

#second { 
	position: relative; 
	padding-left: 20px; 
	background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML); 
} 
 
#second:before, 
#second img { 
	content: url(sprite<span>.png</span>); 
	position: absolute; 
	top: 3px; 
	clip: rect(0 30px 15px 15px); 
	left: -15px;
	_left: -35px;
}

Как это работает. Вместо того, чтобы стилизовать псевдо-элемент как фон, мы используем его для вставки изображения (через content) С помощью clip мы подрезаем его, чтобы отображалась только та часть, которая нужна. Это значит, что не нужно вставлять пустые теги в изображения, чтобы не отображать другие части изображения (обычно используется как фоновое изображение больших элементов) Мы смещаем значения clip с помощью свойства left и/или top. Если не подрезать спрайты, изображения в нем должны выровняться по левому или правому краю, чтобы соответствовать контексту RTL/LTR (background-position: | [vertical value]). Проблемы также возникают при создании спрайтов, где изображения следуют одно за другим (так как другие изображения тоже смогут отображаться). Если же подрезать спрайт, то изображения просто налезут друг на дружку. Пример: Преимущества этой техники по сравнению с другими:

• Отображение при печати. В отличие от фоновых изображений, при печати они распечатаются в документе.
• Доступность. В отличие от фоновых изображений, они будут отображать в режиме high contrast или при контрастных CSS стилях.
• Работает в IE. Метод подходит для Internet Explorer 6 и 7.

Отметьте также, что может быть использована схема data URI для игнорирования HTTP запросов. IE 6/7 не поддерживает данную схему, но можно воспользоваться MHTML для IE6/7. 3.Стилизация ссылок с помощью псевдо-элементов. Николас Галагер показал много интересных фишек, касающихся псевдо-элементов. Единственное, чтобы я добавил, так это пример использования :after для стилизации ссылок типа «читать дальше», например:

Код

.more:after { 
	white-space:nowrap; 
	content: " <span>\00BB; /* » */
} 
.more { 
	white-space:nowrap; 
	background-image: expression(this.runtimeStyle.backgroundImage="</span>none",this.innerHTML = this.innerHTML+' »'); 
}

Слово о доступности. Имейте в виду, что генерируемый контент читается скрин-ридерами, и так как нет механизмов, которые предоставляли бы соответствующий текст изображению через свойство content, мы должны быть уверены, что эти изображения используются только для стилизации, так как пользователи со скрин-ридерами не смогут достучаться до той информации. Оригиналы материалов: http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/