Лікнеп по css спрайт

Лікнеп по CSS спрайт

CSS спрайт - це висновок окремих елементів єдиного зображення на веб - сторінці. Тобто одна велика картинка, або кілька різних, але об'єднаних в один файл поруч один з одним. Найчастіше подібним чином групують безліч різних іконок. Розробники називають подібний файл майстер сіткою. Як приклад візьмемо одну картинку, з якої нам потрібно вивести в різних частинах сторінки різні її елементи. Як варіант, порізати її на шматки і визначати кожну частину окремо, 1 елемент - 1 окремий файл. Втім ще кілька років тому саме так все і робили. Найпростіший варіант за своєю суттю. Але даний метод має один істотний недолік, а саме - кількість HTTP запитів, які відсилає сервер браузеру. Одна картинка - це один запит. Чим їх більше, тим довше буде завантажуватися сторінка. Тому CSS спрайт в першу чергу служать для скорочення кількості цих самих запросов.Више на зображенні цілком чітко показаний принцип роботи CSS спрайтів якщо представляти виділену в гурток область в якості області із зображенням на нашій страніце.Работает дана технологія наступним чином. В нашій сторінці є блок:

  • Метод нового url () / clip, використання властивості content для вставки спрайту, подрезанного за допомогою властивості clip:
Як це працює. Замість того, щоб стилізувати псевдо-елемент як фон, ми використовуємо його для вставки зображення (через 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 для стилізації посилань типу «читати далі», наприклад:

Схожі статті