До того, як в CSS з'явився псевдоклас: hover, створення ролловера - елемента, який змінює свій вигляд при наведенні курсору - реалізовувалося через мову JavaScript. Зараз це робиться набагато простіше, але є один недолік: якщо в стані: hover (т. Е. При наведенні курсору на елемент) має з'явитися якийсь фонове зображення, то воно починає завантажуватися в момент наведення курсору, а не при загальній завантаженні сторінки .
Через це може виникати невелика затримка при появі картинки в перший раз. І хоча при всіх наступних наведенні курсору цієї затримки вже немає, багато розробників задумалися над тим, як усунути цю проблему. Наприклад, за допомогою JavaScript можна забезпечити завантаження всіх фонових зображень заздалегідь. Але є спосіб, який не вимагає знань мови програмування, і полягає він у використанні спрайтів.
Що таке спрайт CSS
CSS-спрайт - це один графічний файл, який містить багато різних зображень. У ньому можуть бути зібрані, наприклад, всі графічні елементи інтерфейсу, такі як іконки, кнопки та інше. Також в спрайт часто об'єднують фонові картинки разом з їх варіаціями для стану: hover. Типові приклади спрайтів:
Спрайт, в якому зібрані всі використовувані іконки 
Спрайт зі значками соцмереж і їх варіаціями для: hover 
Спрайт з елементами інтерфейсу
Переваги CSS-спрайтів
- CSS-спрайт містить в собі фонові зображення для різних станів елементів, і завантажується він цілком при завантаженні веб-сторінки. Це виключає пригальмовування ролловера при первинному наведенні курсору на елемент.
- Скорочується кількість звернень до сервера. Адже для завантаження кожної маленької іконки потрібен окремий запит, а чим менше звернень, тим краще. Для завантаження спрайту знадобиться всього один запит на сервер.
- Ще одна перевага зберігання безлічі картинок в спрайт полягає в тому, що якщо у них схожа палітра кольорів, то одне велике зображення буде важити менше, ніж окремі маленькі картинки в сумі.
- Все це в цілому позитивно впливає на швидкість завантаження сайту.
Як створити спрайт з картинок
У класичному випадку спрайт створюються в редакторі зображень. Дрібні картинки послідовно розміщуються на великому полотні (нерідко з прозорим фоном), яке потім зберігається як графічний файл.
Ручний спосіб створення спрайтів - заняття досить довгий. Тому, коли використання спрайтів стало набирати обертів, з'явилися онлайн-сервіси з автоматичного створення спрайт-листів, наприклад, Spritegen, RetinaSpriteGenerator і інші. Ви завантажуєте необхідні зображення в окремих файлах на сайт, і для вас генерується спрайт, який ви відразу можете завантажити на комп'ютер.
Як користуватися спрайтами CSS
Тепер пора дізнатися, як використовувати CSS-спрайт на практиці. Ми покажемо вам невеликий приклад з використанням спрайту, що містить значки соціальних мереж (ми показували його вище). У звичайному стані посилання значок соцмережі буде кольоровим (верхній ряд спрайту), а при наведенні курсору він буде ставати сірим (як в нижньому ряду).
HTML-розмітка виглядає наступним чином:
<a href="#" class="facebook"> </a> <a href="#" class="twitter"> </a> <a href="#" class="youtube"> </ a > <a href="#" class="instagram"> </a> <a href="#" class="linkedin"> </a> <a href="#" class="tumblr"> </ a> <a href="#" class="google"> </a>
Для посилання на кожну соцмережа ми створили свій клас. Оскільки це тестовий приклад, то ми не витрачаємо час на заповнення атрибутів href - замість посилань на справжні сайти ми поставили заглушки. Всередину тега <a> ми нічого не поміщаємо, тому що за зовнішній вигляд посилань відповідатимуть їх фонові зображення зі значками соцмереж.
Переходимо до CSS. Насамперед запишемо загальні стилі для всіх посилань:
a {background-image: url (https://goo.gl/1t18Rz); background-repeat: no-repeat; height: 98px; width: 100px; display: inline-block; margin-right: 10px; }
Перший рядок містить посилання на спрайт. За фактом, ми задали одне фонове зображення для всіх посилань. Другий рядок скасовує дублювання фону - тут воно не буде потрібно.
Наступні два рядки - висота і ширина кожного елемента <a>. Яким чином визначалися ці значення? Тут ми відштовхувалися від розмірів значків в спрайт. Висота кожної іконки дорівнює 98 пікселям, а ширина - 100 пікселів. Далі ми будемо позиціонувати фонову картинку для кожного посилання, підлаштовуючи фон таким чином, щоб значок рівно вписався в «віконце» посилання розміром 98 × 100 пікселів.
Перша наша посилання має клас .facebook. Задамо позиціонування для її фону. Іконка Facebook знаходиться точно в лівому верхньому лівому кутку спрайту, тому визначити її позицію буде легко - left top:
a.facebook {background-position: left top; }
Йдемо далі: позиціонуємо фон для посилання на Twitter. Іконка Твіттера розташована праворуч від Facebook і примикає до неї, не створюючи пустих проміжків. Нам необхідно перемістити спрайт вліво на стільки пікселів, щоб приховати іконку Facebook і повністю заповнити область посилання іконкою Twitter. Оскільки ширина кожної іконки дорівнює 100 пікселям, то ми і зрушуємо фон вліво на 100 пікселів. Вертикальне позиціонування ми поки ніде не змінюємо, а залишаємо значення top:
a.twitter {background-position: -100px top; }
Аналогічну дію ми виконаємо для інших посилань, додаючи до кожного наступного горизонтальному позиціонуванню ще 100 пікселів, тим самим зрушуючи спрайт все більше і більше вліво. Вийде така картина:
a.youtube {background-position: -200px top; } A.instagram {background-position: -300px top; } A.linkedin {background-position: -400px top; } A.tumblr {background-position: -500px top; } A.google {background-position: -600px top; }
Результат роботи даного коду показаний на скріншоті нижче:
Тепер розберемося з поведінкою фонових картинок при наведенні курсору на посилання. Нам потрібно зміщувати спрайт по вертикалі вгору таким чином, щоб в область перегляду потрапляла іконка з нижнього ряду спрайту. Тут все досить просто і вирішується одним правилом CSS, а саме присвоєнням значення bottom властивості background-position-y:
a: hover {background-position-y: bottom; }
У нашому випадку цей стиль можна записати один для всіх посилань, і він буде працювати правильно. Однак в інших ситуаціях, коли елементи в спрайт розташовані в іншому порядку, вам може знадобитися писати більше коду.
Результат працюють спрайтів дивіться на демонстрації нижче (для більш красивою подачі прикладу ми зробили зрушення фону більш плавним при наведенні курсору):
Якщо вам стало цікаво, то ось і рядок, яка відповідає за плавність зміни іконок (не хвилюйтеся, трохи пізніше ми будемо вивчати CSS-анімацію, і зокрема властивість transition):
a {transition: all 0.2s ease-out; }
Отже, тепер ви знаєте, що таке спрайт CSS і чим вони можуть бути корисні. Крім запобігання затримок при завантаженні фонових картинок, використання спрайтів допомагає знизити навантаження на сервер. Крім того, це зручний спосіб зберігати всі графічні елементи інтерфейсу в одному місці.
Ось ми і розібрали основні методи стилізації посилань. Рекомендуємо вам додатково попрактикуватися, щоб закріпити отримані знання. А наступна глава нашої книги присвячена CSS-анімації, реалізація якої стала можлива завдяки властивостям, що з'явилися в CSS3. І в першому уроці ми розберемо властивість трансформації - transform .
Яким чином визначалися ці значення?