Современный сайт должен быть быстрым, красивым и эффективным как на этапе разработки, так и при работе с клиентом. Как правило, каждая компания, создающая интернет-ресурсы, стремится иметь собственное лицо, привлекать посетителей своим дизайном, стилем, надежностью, скоростью и другими качествами.
Полезные свойства спрайтов
CSS-спрайты позволяют улучшить как качественные характеристики сайта, так и имидж компании. По сути своей, это не слишком сложный инструмент разработчика, но он реально ускоряет и процесс разработки ресурсов, и скорость их работы.
Кроме всего прочего, упрощается код и, в известном смысле, становится переносимым на другие ресурсы, которые, благодаря тому, что применяются CSS-спрайты, становятся похожими как близкие родственники, поскольку можно использовать одни и те же графические идеи, стиль оформления элементов диалога, структуру и содержание тегов.
В обычном процессе разработки сайта необходимо делать много картинок. Очень часто эти картинки занимают очень мало места, но представляют собой всегда отдельный файл. Для любой операционной системы любого сервера открытие файла - это операция, отнимающая много времени, однако не будет существенно отличаться по времени, когда открывается файл на 13 на 13 пикселей, и когда открывается файл из 16 картинок 52 на 52 пикселя. В первом случае необходимо иметь 16 файлов и 16 операций открытия/чтения, во втором случае 16 картинок будут получены в результате открытия только одного файла.
Если создать наборы таких файлов по тематике (горизонтальное меню, формы диалога, кнопки калькулятора, элементы оформления календаря...) то такие совокупности картинок можно будет мобильно переносить с сайта на сайт.
Обратная сторона медали
Когда есть фанаты, слишком резво рекомендующие использовать спрайты CSS, обязательно находятся те, кто внимательно изучает вопрос и доходчиво показывает, что всегда практичнее работать по старинке.
Действительно, если вместо 16 файлов картинок будет один файл из 16 картинок, то вместо 16 операций открытия/чтения будет одна. Но фокус в том, что у всякого браузера есть кэш, и он загружает что-либо только в крайнем случае. Кроме того, обычно элементы страниц загружаются при первом посещении страницы, а впоследствии подгружаются только измененные.
Другой аспект. Обычно картинки режут, а не склеивают в один файл. Как-то так сложилась технология а, лучше сказать, обычай. Дизайнер создает макет, а верстка использует его кусочки: мелко нарезанные части макета. Противники спрайтов полагают, что собирание нескольких картинок в один файл - трудоемкое занятие, увеличивающее общее время разработки страницы.
Есть и такие разработчики, которые считают и оптимизируют количество HTTP-запросов, полагая что это занятие более прагматично, чем CSS-спрайты.
Все обозначенные моменты, несомненно, имеют значение, однако гораздо большее значение представляет собой мнение: все должно быть применено в разумных пределах.
Автоматизация и CSS-спрайты
Если нет смысла запустить генератор спрайтов CSS и получить нужную часть дизайна, то ничто не мешает просто наверстать эту часть обычным образом. Если обычная технология приводит к необходимости нарезки сотни картинок, то предпочтительнее набросать JavaScript-функцию, которая по необходимости будет выбирать из спрайта нужную область и отображать ее.
Следует, однако, заметить, что спрайт из двух-трех элементов или десятка-другого - куда ни шло, а вот когда в спрайте сотня рисунков, то с написанием JavaScript-функции проблем, конечно, не возникнет, но вот сколько труда уйдет на создание такого большого спрайта... Кроме того, склеивать картинки - это одно, генератор спрайтов CSS делает и нужную картинку, и CSS-код под нее, ему абсолютно все равно сколько будет составляющих элементов спрайта. Проблемы возникнут при переделке сайта, изменении дизайна, удалении и добавлении новых элементов. Разрабатывая спрайт, следует подумать не о том, как его использовать, а о том, как его потом изменить.
Тематическая выгода от использования спрайтов
В отличие от языков программирования CSS, это относительно статичный набор правил, вся его динамика определяется правилами и их функциональным наполнением (по стандарту). Рассматривая в комплексе спрайты, HTML, CSS можно создать тематические библиотеки дизайна-функционала.
Например, законченный вариант меню: просто подключив несколько css-правил, js-функций и включив в код несколько HTML-дивов, можно получить результат. Изменив содержание картинки спрайта, можно изменить вид этого меню. Уточнив тело функции, можно скорректировать функционал.
Получится своеобразный вариант объектно-ориентированного программирования (ООП). Несомненно, это будет яркой идеей, но она не будет слишком ярко выделяться на фоне других диалектов ООП на реальных языках. Это только в начале 90-х, когда ООП возродилось и стало необыкновенно быстро завоевывать место под солнцем, оно представляло собой конкретную идею и конкретную форму ее выражения, а сегодня разработчики придумали столько диалектов, сколько не имеет многообразный русский язык.
Игрушки - золотое дно для спрайтов
Азарт и программирование - несовместимые понятия, но квалификация программиста, пишущего игры, заметно отличается от общебытовой (простое кодирование) и творческой (проектирование и разработка новых технологий, идей).
Дизайн игр апеллирует к векторной графике, потому сочетание SVG-спрайты + CSS-правила не только востребовано, но и часто превращается из объекта разработчика (сайта) в объект реальной игры. В частности, популярная игра Counter Strike применяет к терминам спрайты, спреи вполне осмысленные синонимы: взрыв, кровь, прицел...
Фраза "установить спрайты css v34" для посвященного вполне нормальна и понятна. Спрайты обрели не только полезность в применении по своему существу, но и образовали нишу, которая стала вполне полнофункциональной, доступной и понятной определенному кругу потребителей.
CSS-спрайты: пример
Для переключения страниц сайта на тот или иной язык применяются самые разнообразные варианты, но если селектор языка выполнить в виде иконки, то решение, использующее спрайт, может выглядеть так:
Очевидные недостатки спрайтов
Прежде всего, это трудоемкий и скрупулезный процесс. Одно дело - разрезать дизайн на мелкие кусочки, другое - собрать одну картинку из множества мелких. Применить идею холста и поместить на него все изображения, используемые на сайте, совершенно бесперспективно.
Даже используя генератор спрайтов CSS, трудностей не избежать, особенно когда придется переделывать дизайн сайта. Разместить в спрайте несколько десятков картинок - это не массив элементов, графика есть графика, ее, как правило, просто выводят на экран, а не перебирают в коде как массив в поисках нужного элемента.
Стандарт и следующие ему разработчики утверждают, что коль спрайты связаны с правилом background, то это исключительно фоновое изображение, а не элемент сайта. Графическая составляющая элементов страницы должна манипулировать тегами img.
С этим трудно согласиться на том простом основании, что background мало когда воспринимался в качестве общего фона. Это просто фон, неважно чего - миниатюрного элемента или всей страницы в целом.
Между тем, именно графическая составляющая представляется серьезным препятствием в применении спрайтов.
Разумное использование
Несмотря на то что термины "интернет-технологии" и "высокие технологии" принято считать синонимами, на деле это трудоемкий и местами очень нетехнологичный труд. Спрайты не особенно выделаются на фоне других узких мест как в чистом программировании на JavaScript или PHP, так и в части разработки необходимого функционала, настройки процессов наполнения сайтов информацией или, например, фонового создания архивных копий.
Мощь и перспективность используемых систем управления сайтами нивелируется порой нюансами их практического применения, а ручная разработка ресурсов, как правило, приводит к необходимости 1001-й раз переписывать тот или иной собственный алгоритм.
В контексте сказанного важно просто в разумных пределах использовать все, что предоставляет современный инструмент. Не следует слишком рьяно применять одно в ущерб другому, а золотое правило в сайтостроении гласит следующее: нужно думать не о том, как сдать работу как можно скорее, а о том, как ее исполнить так, чтобы в случае любой непредвиденной ситуации можно было быстро решить любую проблему.
