Стажировка в ИТ-компании (2017) ООО «Интернет-бизнес-системы» объявляет конкурс для студентов ИТ-специальностей на прохождение стажировки по направлению HTML-верстка.
"Web-проектирование - 2015" - следующее занятие Следующее занятие по спецкурсу по выбору "Web-проектирование" состоится в пятницу, 2 октября 2015, в 11-30. Аудитория будет сообщена дополнительно.
CSS Спрайт это одна большая картинка, в которую включены множество других связанных изображений, использующихся на сайте. Вы, наверно, обращали внимание на элементы дизайна или навигации, при наведении на которые изображение меняется мгновенно, подсвечивая либо меняя графический элемент, создавая довольно приятный визуальный эффект, в том числе и эффект анимации. Скрипты как правило в этом случае не используются, меняется лишь положение фона в таблице стилей при наведении на данный элемент.
Для этого изображение устанавливается как фоновое (background) для div-блока, или любого другого элемента, с заданной высотой и шириной. С помощью параметра background-position мы позиционируем наше изображение так, чтобы оно выглядело как картинка.
Рассмотрим пример. У нас есть картинка-ссылка и нам нужно, чтобы при наведении указателем мыши на эту картинку она изменялась.
А вот код:
А вот сама картинка, с помощю которой это сделано:
Причем картинка всего одна.
А зачем нам комбинировать изображения?
Конечно, можно добиться подобного эффекта используя две отдельные картинки. Но, используя CSS спрайты мы:
Уменьшаем количество запросов браузера к веб-серверу. Практика показывает, что от 5% до 38% времени загрузки страницы уходит на загрузку HTML, остальные 62%-95% составляют HTTP запросы (загрузка скриптов, изображений и т.д.). Каждый тэг <img /> и фоновый рисунок составляют отдельный запрос. Несложно догадаться, что уменьшение количества HTTP запросов является одним из основных способов оптимизации загрузки и эффективности работы сайта.
Одновременно с тем снижается нагрузка на сервер, что важно при высокой посещаемости сайта.
Устраняем задержку перед отображением второй картинки, т.к. браузеру уже не надо загружать второе изображение после наведения указателем мыши на картинку - оно уже есть.
Уменьшаем общий размер фалов с графикой.
Возлагаем труд по анимации на CSS-движок браузера, а не на JS-движок, т.е. это будет работать даже с выключенными скриптами.
Недостатки
Увеличивается время затрачиваемое на дизайн сайта, так как мега спрайты часто требуют продолжительных проверок и выравнивания изображений состояний.
Увеличивается затраты на разработку.
Могут возникнуть ограничения в использовании потенциальных преимуществ атрибутов 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, а затем применение высоты и ширины.