суббота, 13 февраля 2016 г.

Верстка с использованием CSS спрайтов

01:04 By , No comments



Что это такое?

CSS Спрайт это одна большая картинка, в которую включены множество других связанных изображений, использующихся на сайте. Вы, наверно, обращали внимание на элементы дизайна или навигации, при наведении на которые изображение меняется мгновенно, подсвечивая либо меняя графический элемент, создавая довольно приятный визуальный эффект, в том числе и эффект анимации. Скрипты как правило в этом случае не используются, меняется лишь положение фона в таблице стилей при наведении на данный элемент.
Для этого изображение устанавливается как фоновое (background) для div-блока, или любого другого элемента, с заданной высотой и шириной. С помощью параметра background-position мы позиционируем наше изображение так, чтобы оно выглядело как картинка.
Рассмотрим пример. У нас есть картинка-ссылка и нам нужно, чтобы при наведении указателем мыши на эту картинку она изменялась. 
 
А вот код:

HTML:

<a href="#" class="sprite-demo"> </a>

CSS:

a.sprite-demo {
display:block;
width:220px;
height:30px;
background:url("images/1.png") left top;
}
a.sprite:hover {background-position:left 30px;}
А вот сама картинка, с помощю которой это сделано:
Причем картинка всего одна.

А зачем нам комбинировать изображения?

Конечно, можно добиться подобного эффекта используя две отдельные картинки. Но, используя CSS спрайты мы:
  1. Уменьшаем количество запросов браузера к веб-серверу. Практика показывает, что от 5% до 38% времени загрузки страницы уходит на загрузку HTML, остальные 62%-95% составляют HTTP запросы (загрузка скриптов, изображений и т.д.). Каждый тэг <img /> и фоновый рисунок составляют отдельный запрос. Несложно догадаться, что уменьшение количества HTTP запросов является одним из основных способов оптимизации загрузки и эффективности работы сайта.
  2. Одновременно с тем снижается нагрузка на сервер, что важно при высокой посещаемости сайта.
  3. Устраняем задержку перед отображением второй картинки, т.к. браузеру уже не надо загружать второе изображение после наведения указателем мыши на картинку - оно уже есть.
  4. Уменьшаем общий размер фалов с графикой.
  5. Возлагаем труд по анимации на CSS-движок браузера, а не на JS-движок, т.е. это будет работать даже с выключенными скриптами.

Недостатки

  1. Увеличивается время затрачиваемое на дизайн сайта, так как мега спрайты часто требуют продолжительных проверок и выравнивания изображений состояний.
  2. Увеличивается затраты на разработку.
  3. Могут возникнуть ограничения в использовании потенциальных преимуществ атрибутов title и alt .

Примеры использования в верстке популярных сайтов.

1. CSS спрайт Twitter

Спрайт подключается к строчному элементу <span>, который делают блочным (display:block), чтобы задать ширину и высоту. Для каждого элемента через класс прописывается свойство background c необходимыми координатами (background-position). Спрайт сделан сеткой в виде шахматной доски с ячейками 16*16px залитыми фоном.
Такой спрайт удобно поддерживать , т.к. легко высчитываются координаты необходимой картинки, но можно использовать только для блоков с фиксированными размерами.

2. CSS спрайт Facebook

На Facebook спрайты разделяются на типы. На картинке три различных спрайта. Спрайт подключается к строчным тегам <a> <i> <span>. У элементов задана высота и ширина. Для каждого элемента через класс прописывается свойство background-image c необходимыми координатами.
Cпрайты разделены по типам, это позволяет загружать необходимые изображения быстрее, но можно использовать только для блоков с фиксированными размерами

2. CSS спрайт Youtube

Спрайт загружается как фон классу sprite. Когда возникает необходимость в выборе какого-то элемента, происходит выбор изначальной позиции при помощи CSS свойства background-position, а затем применение высоты и ширины.

Выведем логотип YouTube на экран:

HTML:

<div id="logo" class="sprite"> </div>

CSS:

.sprite { 
background:url("images/youtube_sprite.png"); 
} 
#logo { 
width:120px; 
height:52px; 
background-position:0 0; 
}
Используя тот же класс sprite, и то же самое изображение создадим изображение, которое будет изменяться при наведении мышки.
    

HTML:

<a href="#" id="button" class="sprite"> </a>

CSS:

.sprite { 
background:url("images/youtube_sprite.png"); 
} 
#icon { 
background-position:-10 -413px; 
padding:0px 8px; 
} 
#icon:hover{ 
background-position:-10 -431px; 
}

Подведем итог.

Спрайты - вещь полезная, но при их созданийй надо учитывать, что хороший CSS спрайт должен:
  1. легко поддерживаться и расширяться
  2. задаваться через единый класс, чтобы не переписывать много раз свойство background-image для элементов
  3. иметь возможность задаваться для любого элемента не зависимо от его размеров
  4. разбиваться на несколько типовых спрайтов, если картинок слишком много

0 коммент.:

Отправить комментарий