Что такое CSS-спрайты и для чего они нужны?
До того, как в CSS появился псевдокласс :hover, создание ролловера — элемента, который меняет свой вид при наведении курсора — реализовывалось через язык JavaScript. Сейчас это делается намного проще, но есть один недостаток: если в состоянии :hover (т. е. при наведении курсора на элемент) должно появиться какое-то фоновое изображение, то оно начинает загружаться в момент наведения курсора, а не при общей загрузке страницы.
Из-за этого может возникать небольшая задержка при появлении картинки в первый раз. И хотя при всех последующих наведениях курсора этой задержки уже нет, многие разработчики задумались над тем, как устранить эту проблему. Например, с помощью JavaScript можно обеспечить загрузку всех фоновых изображений заранее. Но есть способ, который не требует знаний языка программирования, и заключается он в использовании спрайтов.
CSS-спрайт — это один графический файл, который содержит много различных изображений. В нем могут быть собраны, к примеру, все графические элементы интерфейса, такие как иконки, кнопки и прочее. Также в спрайты часто объединяют фоновые картинки вместе с их вариациями для состояния :hover.
Типичные примеры спрайтов:
Спрайт, в котором собраны все используемые иконки
Спрайт со значками соцсетей и их вариациями для:hover 
Спрайт с элементами интерфейса
Преимущества CSS-спрайтов
- CSS-спрайт содержит в себе фоновые изображения для различных состояний элементов, и загружается он целиком при загрузке веб-страницы. Это исключает подтормаживание ролловера при первичном наведении курсора на элемент.
- Сокращается количество обращений к серверу. Ведь для загрузки каждой маленькой иконки требуется отдельный запрос, а чем меньше обращений, тем лучше. Для загрузки спрайта понадобится всего один запрос на сервер.
Пример интерактивной кнопки с использованием CSS-спрайта:
Сначала подготовим изображение:
Теперь нужно прописать CSS-стили для кнопки:
button{
background:url(css-sprite.png) 0 -55px;
height:50px;
width:150px;
cursor:pointer;
}
button:hover{
background-position: 0 0;
}
button:active{
background-position: 0 -109px;
}
Если вы все сделали правильно, то никаких задержек при нажатии на кнопку не будет, кнопка изменяет свой вид моментально при наведении курсора (и при нажатии тоже).
ВЫПОЛНЕНИЕ ЗАДАНИЯ ПО ОБРАЗЦУ:
1. Выполнить пример создания интерактивной кнопки из кратких теоретических сведений (изображение для работы css-sprite.png находится в группе вк ). Разобрать код построчно, указав комментарии.
2. Согласно видеоуроку Lesson_3_15.mp4 выполнить действия, позволяющие использовать CSS-спрайты на веб-странице (изображение для работы icons.png находится в группе вк):
САМОСТОЯТЕЛЬНОЕ ВЫПОЛНЕНИЕ
Задание 1. Найдите в Интернете любой CSS-спрайт. В CSS-спрайте должно быть, по крайней мере, 5 иконок.
Задание 2. Добавьте на страницу 5 блоков и сделайте у них фон любой иконки из CSS-спрайта. У каждого блока должен быть свой фон.
Домашнее задание
Выполненную работу оформить как отчет по учебной практике (с описанием выполнения задания+скриншоты) и отправить отдельным файлом (электронный документ) на электронную почту мастеру п/о (ol.sklyarova2015@gmail.com). В случае возникновения вопросов по работе звоните мастеру п/о.
Если такой возможности нет, отчет предоставить в распечатанном (электронном) виде после возобновления занятий.