Форум АлаичЪ'а о SEO - Выбираем правильные спрайты в css

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

2012-09-07T10:23:13Z

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

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

2012-09-07T09:19:41Z

Zencoding рулит xD

само собой)

mithrandir пишет:

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

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

mithrandir пишет:

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

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

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

2012-09-07T08:28:39Z

Zencoding рулит xD

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

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

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

2012-09-06T09:55:38Z

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

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

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

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

2012-08-29T06:04:51Z

admin пишет:

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

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

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

2012-08-29T05:55:42Z

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

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

2012-08-29T05:18:27Z

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;}

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

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

2012-08-29T03:56:20Z

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

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

2012-08-28T15:22:27Z

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

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

2012-08-28T13:41:04Z

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

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

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

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

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

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