телефон в Москве:

8 (495) 544-78-l7; 8 (925) 544-78-l7

8 (495) 648-38-29; 8 (929) 651-5O-8l 

E-mail:  info@snite-mebel.ru

Главная | Вопросы | Доставка | Магазины | Распродажа | Сертификат | Контакт |


Каталог

Последние статьи



  

 

Магазин Орбита-Мебель - лучшие Интернет цены!
Интернет качественной детской мебели Орбита-Мебель

                  8 (495) 741-91-14


 

Теперь лучшая мебель для дома собрана в одном месте!
Мебельный Интернет магазин

 
 Остерегайтесь подделок!
Покупайте мебель в проверенных местах!

Главная
В корзине 0 шт.
На сумму: 0 руб.
оформить заказ

CSS-спрайты: описание, основные техники и полезные рекомендации


Пост опубликован: 23.12.2017


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

Полезные свойства спрайтов

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




CSS спрайты

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

В обычном процессе разработки сайта необходимо делать много картинок. Очень часто эти картинки занимают очень мало места, но представляют собой всегда отдельный файл. Для любой операционной системы любого сервера открытие файла — это операция, отнимающая много времени, однако не будет существенно отличаться по времени, когда открывается файл на 13 на 13 пикселей, и когда открывается файл из 16 картинок 52 на 52 пикселя. В первом случае необходимо иметь 16 файлов и 16 операций открытия/чтения, во втором случае 16 картинок будут получены в результате открытия только одного файла.

Если создать наборы таких файлов по тематике (горизонтальное меню, формы диалога, кнопки калькулятора, элементы оформления календаря…) то такие совокупности картинок можно будет мобильно переносить с сайта на сайт.




Обратная сторона медали

Когда есть фанаты, слишком резво рекомендующие использовать спрайты CSS, обязательно находятся те, кто внимательно изучает вопрос и доходчиво показывает, что всегда практичнее работать по старинке.

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

Генератор спрайтов CSS

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

Есть и такие разработчики, которые считают и оптимизируют количество HTTP-запросов, полагая что это занятие более прагматично, чем CSS-спрайты.

Все обозначенные моменты, несомненно, имеют значение, однако гораздо большее значение представляет собой мнение: все должно быть применено в разумных пределах.

Спрайты CSS v34

Автоматизация и CSS-спрайты

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


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

Тематическая выгода от использования спрайтов

В отличие от языков программирования CSS, это относительно статичный набор правил, вся его динамика определяется правилами и их функциональным наполнением (по стандарту). Рассматривая в комплексе спрайты, HTML, CSS можно создать тематические библиотеки дизайна-функционала.

Спрайты HTML CSS

Например, законченный вариант меню: просто подключив несколько css-правил, js-функций и включив в код несколько HTML-дивов, можно получить результат. Изменив содержание картинки спрайта, можно изменить вид этого меню. Уточнив тело функции, можно скорректировать функционал.

Получится своеобразный вариант объектно-ориентированного программирования (ООП). Несомненно, это будет яркой идеей, но она не будет слишком ярко выделяться на фоне других диалектов ООП на реальных языках. Это только в начале 90-х, когда ООП возродилось и стало необыкновенно быстро завоевывать место под солнцем, оно представляло собой конкретную идею и конкретную форму ее выражения, а сегодня разработчики придумали столько диалектов, сколько не имеет многообразный русский язык.


Игрушки — золотое дно для спрайтов

Азарт и программирование — несовместимые понятия, но квалификация программиста, пишущего игры, заметно отличается от общебытовой (простое кодирование) и творческой (проектирование и разработка новых технологий, идей).

Дизайн игр апеллирует к векторной графике, потому сочетание SVG-спрайты + CSS-правила не только востребовано, но и часто превращается из объекта разработчика (сайта) в объект реальной игры. В частности, популярная игра Counter Strike применяет к терминам спрайты, спреи вполне осмысленные синонимы: взрыв, кровь, прицел…

SVG спрайты CSS

Фраза «установить спрайты css v34» для посвященного вполне нормальна и понятна. Спрайты обрели не только полезность в применении по своему существу, но и образовали нишу, которая стала вполне полнофункциональной, доступной и понятной определенному кругу потребителей.

CSS-спрайты: пример

Для переключения страниц сайта на тот или иной язык применяются самые разнообразные варианты, но если селектор языка выполнить в виде иконки, то решение, использующее спрайт, может выглядеть так:

Пример применения спрайта для выбора языка страницы

Очевидные недостатки спрайтов

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

CSS спрайты пример

Даже используя генератор спрайтов CSS, трудностей не избежать, особенно когда придется переделывать дизайн сайта. Разместить в спрайте несколько десятков картинок — это не массив элементов, графика есть графика, ее, как правило, просто выводят на экран, а не перебирают в коде как массив в поисках нужного элемента.

Стандарт и следующие ему разработчики утверждают, что коль спрайты связаны с правилом background, то это исключительно фоновое изображение, а не элемент сайта. Графическая составляющая элементов страницы должна манипулировать тегами img.

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

Между тем, именно графическая составляющая представляется серьезным препятствием в применении спрайтов.

Разумное использование

Несмотря на то что термины «интернет-технологии» и «высокие технологии» принято считать синонимами, на деле это трудоемкий и местами очень нетехнологичный труд. Спрайты не особенно выделаются на фоне других узких мест как в чистом программировании на JavaScript или PHP, так и в части разработки необходимого функционала, настройки процессов наполнения сайтов информацией или, например, фонового создания архивных копий.

Использовать спрайты CSS

Мощь и перспективность используемых систем управления сайтами нивелируется порой нюансами их практического применения, а ручная разработка ресурсов, как правило, приводит к необходимости 1001-й раз переписывать тот или иной собственный алгоритм.

В контексте сказанного важно просто в разумных пределах использовать все, что предоставляет современный инструмент. Не следует слишком рьяно применять одно в ущерб другому, а золотое правило в сайтостроении гласит следующее: нужно думать не о том, как сдать работу как можно скорее, а о том, как ее исполнить так, чтобы в случае любой непредвиденной ситуации можно было быстро решить любую проблему.


Главная | О магазине | Доставка | Статьи | Контакт |