Що таке css спрайт?

Десь тиждень тому один з моїх передплатників попросив мене розповісти про CSS спрайт, що це таке взагалі і з чим їх їдять. Тому сьогодні я вирішив написати цю статтю, в якій розповім, що таке CSS спрайт і де їх використовують.

CSS спрайт - це комбіноване зображення, в якому знаходиться багато різних картинок, і за допомогою властивості background-position ми виставляємо потрібну картинку в потрібному місці. Припустимо, у нас є кнопка, і ця кнопка змінює свій вигляд при наведенні на неї курсора миші. Можна зробити, наприклад, 2 картинки і потім підставляти в якості фону кнопки ту чи іншу картинку. Але недолік даного способу очевидна: в 2 рази більше файлів, приблизно в 2 рази більше розмір, отже, в 2 рази більше час завантаження, ніж 1 зображення. І ось техніка CSS спрайтів дозволяє створити лише одну картинку, в якій будуть відразу 2 фону кнопки.

Щоб стало зрозуміліше, давайте вирішимо це завдання. У нас є зображення, припустимо, висотою 20 пікселів і шириною 100 пікселів. Кнопка має ширину 50 пікселів і висоту 20 пікселів. В одній картинці ми поміщаємо зображення обох станів (один за одним). HTML-код буде таким:

href="#"gt;кнопка

І CSS-код:

a { 
 background: url("Button.jpg")no-repeat left top-// Фон кнопки 
 display: block-// Зробити блоковим елементом 
 height:20px-// Висота кнопки 
 width:50px-// Ширина кнопки 
 text-decoration: none-// Прибрати межу підкреслення 
} 
a:hover { 
 background-position: right top-// Міняємо позицію фону, щоб було зміщення зображення 
}

Ось таким хитрим чином можна в одній картинці зберігати безліч зображень. Підкреслю, що саме безліч зображень, а не тільки 2. Іноді мало не весь сайт складається з однієї картинки, в якій знаходяться всі використовувані зображення. Не вважаю, що це дуже добре, але зате буде мінімальна кількість файлів зображень і мінімальний розмір завантажених сторінок, що завжди добре.

Поділися в соціальних мережах:

Схожі