CSS Sprites — зло, не используйте их!

[sunnybear]

отвечу по существу: Вы не правы :)

А теперь, действительно, по существу.

Вставка картинок через data:URL - это увеличение во-первых, объема страницы

3-5% увеличения объема (после gzip'а) с лихвой окупают время на дополнительные запросы к серверу. Для примера, время на дополнительный запрос 50-100мс (без учета времени загрузки контента), сколько за это время можно передать данных?

+ фикс для mhtml

gzip, gzip и еще раз gzip. Размер только уменьшается
http://webo.in/articles/habrahabr/46-cro…

мы все дальше и дальше откладываем загрузку background-images

Имеется в виду, что фоновые картинки либо вставлены все через data:URL (их загрузка идет вместе с загрузкой CSS), либо через предзагрузку (их загрузка начинается до загрузки CSS-файла).

Последний абзац — самый здравый :)

P.S. Если кто-то хочет заминусовать, предлагаю сначала ознакомиться с блогом Клиентская оптимизация в полном объеме. Все заявленные вопросы там неоднократно обсуждались

[XaocCPS]

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

Теперь жду в следующей статье разоблачения gzip, только прошу, не надо заголовков типа "gzip - убил мой Xeon, не используйте его!" :)

[sunnybear]

оно уже было :) почти оправдалось: gzip убил мой P2-сервер, не используйте его :)
http://webo.in/articles/habrahabr/33-gzi…

[XaocCPS]

пошел пить горькую...

[maroonorg]

А ведь горькой обычно бывает только правда...

[sunnybear]

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

Я лишь занимаюсь образованием сообщества, не более. Умную голову на плечах никто не отменял, просто хочется сэкономить время будущим коллегам.

[maroonorg]

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

Вы часто видите программистов качков? =)

[sunnybear]

да, знаю, как минимум, одного :)


Вообще мне кажется, что человек должен развиваться гармонично

[genie]

гармония и бодибилдинг - несовместимые вещи :)

[wpm1]

врете :)

[wpm1]

и я одного знаю

[cc00ffee]

того же?

[Yevhen]

еще прическу сменить и линзы купить - и будес супер программер красавиц! Правда от количества телок забьет он на программирование )

[itlife]

воть ещё одна гармоничная личность)
http://san.itlife-stuio.ru

[Supercharged]

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

[sunnybear]

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

[denispost]

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

[sunnybear]

алгоритм сборки, например, таких картинок

достаточно сложен. Мне кажется, что его корректная реализация не стоит потраченных сил. Хотя везде есть компромиссы...

[denispost]

да, переодически встречаются интересные задачи, и решать их проще на практике уже столкнувшись с проблемой. Пока небыло чего либо, что бы не удалось решить. На счет браузеров в которых совсем все плохо, то это решается на уровне представлений. Все равно приходится ориентироваться на разношерстную аудиторию и в том числе на мобильные клиенты. Кстати таким же образом собирается javascript код с минимизацией. Как мне кажется очень элегантное решение, когда имеем 1 css 1 png и 1 js

[sunnybear]

можно вообще все включить в HTML — это будет еще элегантнее :)

[denispost]

=) Да эт уже проходили с флэшем index.swf и вперед

[simpel]

когда вопрос загруженности сервера очень важен - спрайты оправдывают себя. конкретный пример - используя технику спрайтов (повсеместно, и для gif и для png 24) уменьшил нагрузку на наш images сервер (порядка 30 серверов в сумме) в 5 раз.

[sunnybear]

я не писал в статье о плюсах спрайтов, лишь указал на минусы и возможные решения :)

[simpel]

позиционирование в IE не совсем проблема, я использовал уже два разных способа решить этот вопрос.

[rsa]

Лично я знаю только один серьёзный аргумент не использовать спрайты - это png + IE6. Вот нельзя в этом популярном браузере использовать спрайты для картинок с полупрозрачностью. Если бы не это, то спрайты - это очень даже хорошо.

[sunnybear]

Есть такое дело, однако, я не использовал спрайты только потому, что все остальное вставлено через data:URL, а mhtml не работает с прозрачностью

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

Если речь идет о несовпадении цветов для IE, то удаление gAMA-чанка решает (вышеприведенная картинка как раз так и сделана).

[rsa]

Я знаю только один корректный способ использовать полупрозрачный png как фоновое изображение - это через DXImageTransform.Microsoft.AlphaImageLoader. Есть другие ходы? :)

[rsa]

Я имел ввиду браузер IE6, конечно.

[simpel]

посмотрите http://fotki.com в IE6
навигация - спрайты, png 24bit

[rsa]

При заходе на сайт был переправлен на http://www.fotki.com/Russia/ru/. И там спрайтов не нашёл :( Укажите пальцем, если не трудно.

[konfuze]

Меню — http://www.fotki.com/images/navigation/i…

[rsa]

Спасибо, познавательно.

[simpel]

обращайтесь :) в данный момент готовится новая версия, без дополнительных вложенных элементов (пользую CLIP)

[Introvertus]

Посмотрел код, и как-то все равно не понял, как сделано в IE6 использование PNG24-спрайта в IE6... Можете для тупого пояснить?

[simpel]

вложенный элемент с фоновым png24 позиционируется абсолютно. можно сделать и без доп.разметки.
Вот CSS

[NamelessOne]

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

На самом деле в реальности все достаточно просто. Как и в любой другой области нужен разумный компромисс и любую технику надо применять обдуманно, понимая что ты делаешь и для чего. И если не впадать в крайности, лепя где надо и где не надо, а с умом подходить к разработке, то окажется, что сама по себе техника css-спрайтов достаточно удобна для дизайнера и верстальщика, не говоря уже о программисте, а во многих случаях остается чуть ли не единственной альтернативой (вспомнить хотя бы как без спрайтов ie работает со сложными макетами, где количество изображений исчисляется десятками - даже в локальном файле при обновлении приходится наблюдать как бежит счетчик загруженных изображений).

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

[zencd]

Столько проблем, столько телодвижений, столько несемантичности, трудностей в манипулировании и изменении данных во всех этих хаках… А всё из-за невозможности проинструктировать браузер какие файлы следует «запулять» в один pipe line :-D

Вообщем нужно такой микроформат придумывать и реализовывать потихоньку в самых скорых на подъём броузерах :). Лучше конечно чтобы сами (бро) догадывались, но в среде веба это как-то затруднительно на мой взгляд.

[Prometheus]

Вот как только все производители браузеров тотально поддержат работу с векторной графикой - вот тогда будет вам и нам настоящее счастье :)

Спрайты и прочее приемы - это лишнее, нужен настоящий вектор.
Махонький файлик и такое можно на странице отрисовать и отмасштабировать, ух!

[sirus]

использую спрайты и для прозрачных PNG в ИЕ, решение вопроса нашел тут http://handynotes.ru/2008/04/css-sprites…

[Introvertus]

Все-таки не для всего тот хак подходит. В частности, необходим position:absolute и полностью отсутствует управление repeat :(

[pepelsbey]

Позиционировать картинку с альфа-прозрачностью в IE6 можно при помощи pos:absolute, если элемент с фоном-спрайтом вложен в другой с размерами иконки. Но это доп. разметка.

[sunnybear]

так, в бой пошла тяжелая артиллерия :)

[pepelsbey]

ну почему сразу тяжёлая ) всё легко и работает на проектах Яндекса

[sunnybear]

да нет, я скорее про то, что осталось отметиться Виталию и Артемию — и дискуссию можно считать состоявшейся :)

[pepelsbey]

Ну, я тут скорее за Виталика, чем за себя говорю — это его методика.

[simpel]

можно обойтись clip-ом, или есть ограничения?

[pepelsbey]

Решение с clip'ом вижу первый раз, надо будет попробовать.

[simpel]

способ с доп.разметкой работает тут - http://fotki.com
с clip прототип можно посмотреть тут - http://sobolev.vladimir.ru/clip.html

[sunnybear]

ага, последний случай почему-то напоминает по разметке верхнее меню для http://webo.in/ :)

[simpel]

наверное, потому, что это банальный список, не иначе.

[sunnybear]

это не банальный список. Там навернуто еще пара элементов для нормального отображения. В своем комментарии я имел именно это в виду

[simpel]

совпадение

[AndryX]

"использование CSS Srpites"

[easterism]

Ну что за нездоровые призывы? Автору что-то показалось и он тутже написал, что спрайты зло?
С тем же успехом можно писать "AJAX — зло" или "XSLT — зло" и тому я могу привести массу примеров. Вчера вылупившийся верстальщик увидит страшный заголовок и склепает новый, а хуже того, переделает рабочий вариант. Естественно, улучшений не получит. С любой самой совершенной технологией можно нагородить такого, что мало не покажется.
Статья пригодится многим, но дополните её. Возьмите конкретный пример и реализуйте его в разных вариантах и с разным подходом. Вот это будет действительно полезно.

[sunnybear]

зачем? я уже продемонстрировал разные подходы в множестве статей, это хоть кому-то помогло?
http://webo.in/articles/habrahabr/48-flo…
http://webo.in/articles/habrahabr/46-cro…
http://webo.in/articles/habrahabr/44-uno…
http://webo.in/

[easterism]

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