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

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

null@example.com (mithrandir) — Fri, 07 Sep 2012 10:23:13 +0000

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

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

null@example.com (ПафНутиЙ) — Fri, 07 Sep 2012 09:19:41 +0000

Zencoding рулит xD

само собой)

mithrandir пишет:

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

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

mithrandir пишет:

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

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

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

null@example.com (mithrandir) — Fri, 07 Sep 2012 08:28:39 +0000

Zencoding рулит xD

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

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

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

null@example.com (antipodeman) — Thu, 06 Sep 2012 09:55:38 +0000

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

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

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

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

null@example.com (ПафНутиЙ) — Wed, 29 Aug 2012 06:04:51 +0000

admin пишет:

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

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

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

null@example.com (admin) — Wed, 29 Aug 2012 05:55:42 +0000

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

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

null@example.com (ПафНутиЙ) — Wed, 29 Aug 2012 05:18:27 +0000

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

null@example.com (admin) — Wed, 29 Aug 2012 03:56:20 +0000

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

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

null@example.com (alexfork) — Tue, 28 Aug 2012 15:22:27 +0000

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

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

null@example.com (ПафНутиЙ) — Tue, 28 Aug 2012 13:41:04 +0000

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

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

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

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

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

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