WebTutorWordPressЧто такое CSS-спрайты и для чего они нужны?

Что такое CSS-спрайты и для чего они нужны?

Спрайты CSS — это изображения, которые вмещают в себе множество мелких картинок, получается на одной большой картинке расположены много маленьких. Это нужно для того, чтобы сократить количество запросов к серверу при загрузке страницы.

Чтобы загружалась 1 картинка а не сто, например, а потом стилями уже через свойство background-position менять позицию бекграунда на картинке, для подстановки нужного изображения к элементам.

Вот так выглядит спрайт:

Пример CSS - спрайта

Основное назначение CSS спрайтов

Это сократить количество HTTP запросов на сервер для снижения нагрузки.

Ещё одно основное назначение

При посещени сайтов можно встретиться с такой ситуацией,что у сайта красивый дизайн, кнопки сделаны красивыми и интерактивными, при наведении мыши на кнопку менялся фон или рамка на не стандартную какую-нибудь. Такие эффекты достагиются путем подгрузки новых фоновых картинок.

Но если картинки отдельно лежат на сервере — то загрузка будет затягиваться, и при наведении можно столкнуться с ситуацией, что фон не сразу загрузился, а через секунду например. Таким образом пользователь увидел задержку, что негативно скажется на репутации сайта.

Если использовать спрайты 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;
}

Проблем с работой свойств CSS — background и background-position нет во всех основных браузерах, так что это лучший способ для увеличения производительности сайта.

Просмотров: 51

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Технологии WEB

CMS

Расширения

Сервисы