1 ПафНутиЙ

  • ПафНутиЙ
  • Делаю всякие полезности для DLE и не только
  • Карма: 51 / 1

Тема: Выбираем правильные спрайты в css

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

Вариант  1:
делаем 1 спрайт, со всеми иконками, в css для обычного состояния и для :hover прописываем background-position

Плюс способа - моментальная реакция на наведение и 1 файл.
Минус - много кода.

Вариант 2:
Делаем 2 спрайта - 1 ч/б, второй - цветной, с идентичным расположением иконок.
при :hover - меняем background-image

Плюс способа - в два раза меньше кода.
Минус - два файла.

Ваши мысли господа? кто что использует, если использует спрайты вообще.

2 alexfork

  • alexfork
  • Обучаю работе в сети ;)
  • Карма: 1 / 0

Re: Выбираем правильные спрайты в css

Я думаю, что так как способы практически идентичны с точки зрения веса (и он не особо огромен), то я бы выбрал первый вариант из-за того, что он моментален… А вообще обычно сравниваются по финальному весу.

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: Выбираем правильные спрайты в css

Интересный вопрос, я даже бы и не подумал использовать вариант №2 smile Всегда использую первый вариант с одним спрайтом, а в css прописываю background-position.
Данный вариант вижу более интересным за счет того, что файл в итоге всего один. А по количеству кода с css мне кажется оба варианта примерно равны.

4 ПафНутиЙ

  • ПафНутиЙ
  • Делаю всякие полезности для DLE и не только
  • Карма: 51 / 1

Re: Выбираем правильные спрайты в css

admin пишет:

А по количеству кода с css мне кажется оба варианта примерно равны.

нет. второй на ~49% меньше кода занимает.
к примеру:

i[class^=icon], i[class^=icon].gray:hover {bgi: url(image1.png);}
i[class^=icon]:hover, i[class^=icon].gray{bgi: url(image2.png);}
.icon-1 {bgp: 0 0;}
.icon-2 {bgp: 0 -20px;}
.icon-3 {bgp: 0 -40px;}

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

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: Выбираем правильные спрайты в css

Фига ты код завернул. Ладно, я со своими знаниями устарел, видимо. Надо Санька пригласить в дискуссию, он у меня спец по верстке, я то уже давненько от этих дел отошел, разве что доработка своих проектов, но без таких изысков...

6 ПафНутиЙ

  • ПафНутиЙ
  • Делаю всякие полезности для DLE и не только
  • Карма: 51 / 1

Re: Выбираем правильные спрайты в css

admin пишет:

Фига ты код завернул.

на самом деле нет ничего там сложного, я написал схематично, по привчке как в редакторе (кто юзает zencoding - поймёт мою лень писать полностью)))
Селекторы атрибутов тоже штука древняя.
А так каждому своё - я например позавчера общался с одним товарищем, разбирающимся в ceo и понял, что мне это понять похоже не дано, слишком сложно всё, если начинать углубляться)

7 antipodeman

  • antipodeman
  • Я тут новенький
  • Карма: 0 / 0

Re: Выбираем правильные спрайты в css

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

К преимуществам первого добавлю, что вес двух картинок всегда будет больше одной (в рамках вопроса со спрайтами).
Кроме того, если у вас изменяются иконки, то править 1 psd для спрайтов как-то попроще.

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

8 mithrandir

  • mithrandir
  • Модератор
  • Карма: 5 / 0

Re: Выбираем правильные спрайты в css

Zencoding рулит xD

Я бы сделал в 1 файл, расположив иконки таким образом, чтобы менять только одну из координат (x или y).
Дико раздражает при вёрстке задержка на прогрузку картинки при наведении. Как-то непрофессионально выглядит.
А в css - код, конечно, загромоздит, но труда уж не сильно много добавит.

Кстати, в продолжение темы, кто как относится к генератоам спрайтов, вроде этого? http://csssprites.com/
И ещё - как кто относится к моде все возможные изображения при вёрстке запихивать в один большой спрайт?

9 ПафНутиЙ

  • ПафНутиЙ
  • Делаю всякие полезности для DLE и не только
  • Карма: 51 / 1

Re: Выбираем правильные спрайты в css

Zencoding рулит xD

само собой)

mithrandir пишет:

Кстати, в продолжение темы, кто как относится к генератоам спрайтов, вроде этого? http://csssprites.com/

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

mithrandir пишет:

И ещё - как кто относится к моде все возможные изображения при вёрстке запихивать в один большой спрайт?

только мелкие или запрос к которым длится больше, чем отдача хостингом. картинки, которые репитятся и при этом мелкие - лучше преобразовать в dataURI.

10 mithrandir

  • mithrandir
  • Модератор
  • Карма: 5 / 0

Re: Выбираем правильные спрайты в css

Вот бы сформировать набор правил оптимизации вёрстки - к примеру, набор критериев какую картинку как использовать, и пользоваться этим набором, не мучаясь выбором каждый раз smile