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

    После многочисленных статей (на русском и английском) на тему использования стилей для Rollover-эффектов, уменьшения задержки при открытии страницы и нагрузки на сервер, я хочу раскритиковать использование CSS Sprites. В качестве более зрелого и мощного способа можно предложить использование data:URL и ряд дополнительных методик. На мой взгляд, область применения CSS Sprites весьма ограничена, я хочу постараться обозначить ее данной статьей и указать, когда их лучше не использовать.

    Проблемы при верстке



    С какими проблемами сталкивается верстальщик, когда использует спрайты? Это, в первую очередь, проблемы изменения каждой конкретной картинки в общем массиве. Мало того, что нужно открыть ресурсную картинку, найти в ней область, соответствующую данному небольшому изображению (которое меняется), и заменить ее, не потеряв палитру при всех изменениях. Также при изменении расположения картинок в ресурсном файле (например, перераспределили свободное место в связи с очередными дизайнерскими изменениями) нужно заново пересчитать все координаты и внести соответствия в CSS-файл.

    читать дальше на webo.in →
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 59

    • UFO just landed and posted this here
        +4
        отвечу по существу: Вы не правы :)

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

        Вставка картинок через 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. Если кто-то хочет заминусовать, предлагаю сначала ознакомиться с блогом Клиентская оптимизация в полном объеме. Все заявленные вопросы там неоднократно обсуждались
          +1
          Только я, вдохновленный вашими статьями, начал подумывать про спрайты и тут такое... заголовок, правда, оказался страшнее самой статьи, но все-таки.

          Теперь жду в следующей статье разоблачения gzip, только прошу, не надо заголовков типа "gzip - убил мой Xeon, не используйте его!" :)
            +2
            оно уже было :) почти оправдалось: gzip убил мой P2-сервер, не используйте его :)
            http://webo.in/articles/habrahabr/33-gzi…
              +2
              пошел пить горькую...
                0
                А ведь горькой обычно бывает только правда...
          • UFO just landed and posted this here
              +1
              я пишу с запасом на будущее. Очень скоро профессия фронт-енд архитектора/клиентского оптимизатора станет по-настоящему востребована. Полгода назад в смысле литературы был полный вакуум, сейчас более-менее.

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

                Вы часто видите программистов качков? =)
                  +5
                  да, знаю, как минимум, одного :)
                  Интервью с Владом Мержевичем

                  Вообще мне кажется, что человек должен развиваться гармонично
                    –1
                    гармония и бодибилдинг - несовместимые вещи :)
                      0
                      врете :)
                      0
                      и я одного знаю
                        0
                        того же?
                        +1
                        еще прическу сменить и линзы купить - и будес супер программер красавиц! Правда от количества телок забьет он на программирование )
                        0
                        воть ещё одна гармоничная личность)
                        http://san.itlife-stuio.ru
                –3
                И где конкретные минусы спрайтов то? Все пункты статьи можно свести к одному — нытье верстальщика. Мне, как посетителю веб-страницы, абсолютно насрать на верстальщика. Я хочу, чтобы было быстро — а значит, в подходящих для этого случаях, мне нужны спрайты.
                  +2
                  этому посвящены раздел "проблемы при загрузке": "визуально" увеличивается время загрузки страницы — и раздел "проблемы при использовании": при увеличении шрифтов фон "выползает", и картинка сайта портится.
                  +2
                  На практике использую спрайты. Верстальщик спокойно включает отдельные картинки в css, а на этапе релиза скрипт собирает все разрозненные css в один учитывая их последовательность и правила.При этом формируется из всех картинок спрайт. Проблема палитры компенсируется использованием png. Пока еще встречаются ошибки в собирающем скрипте, но все равно каждый релиз нового шаблона проверяется в релиз кандидате.
                    0
                    алгоритм сборки, например, таких картинок

                    достаточно сложен. Мне кажется, что его корректная реализация не стоит потраченных сил. Хотя везде есть компромиссы...
                      0
                      да, переодически встречаются интересные задачи, и решать их проще на практике уже столкнувшись с проблемой. Пока небыло чего либо, что бы не удалось решить. На счет браузеров в которых совсем все плохо, то это решается на уровне представлений. Все равно приходится ориентироваться на разношерстную аудиторию и в том числе на мобильные клиенты. Кстати таким же образом собирается javascript код с минимизацией. Как мне кажется очень элегантное решение, когда имеем 1 css 1 png и 1 js
                        0
                        можно вообще все включить в HTML — это будет еще элегантнее :)
                          0
                          =) Да эт уже проходили с флэшем index.swf и вперед
                        0
                        когда вопрос загруженности сервера очень важен - спрайты оправдывают себя. конкретный пример - используя технику спрайтов (повсеместно, и для gif и для png 24) уменьшил нагрузку на наш images сервер (порядка 30 серверов в сумме) в 5 раз.
                          0
                          я не писал в статье о плюсах спрайтов, лишь указал на минусы и возможные решения :)
                            0
                            позиционирование в IE не совсем проблема, я использовал уже два разных способа решить этот вопрос.
                      +2
                      Лично я знаю только один серьёзный аргумент не использовать спрайты - это png + IE6. Вот нельзя в этом популярном браузере использовать спрайты для картинок с полупрозрачностью. Если бы не это, то спрайты - это очень даже хорошо.
                        0
                        Есть такое дело, однако, я не использовал спрайты только потому, что все остальное вставлено через data:URL, а mhtml не работает с прозрачностью

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

                        Если речь идет о несовпадении цветов для IE, то удаление gAMA-чанка решает (вышеприведенная картинка как раз так и сделана).
                          0
                          Я знаю только один корректный способ использовать полупрозрачный png как фоновое изображение - это через DXImageTransform.Microsoft.AlphaImageLoader. Есть другие ходы? :)
                            0
                            Я имел ввиду браузер IE6, конечно.
                          0
                          посмотрите http://fotki.com в IE6
                          навигация - спрайты, png 24bit
                            0
                            При заходе на сайт был переправлен на http://www.fotki.com/Russia/ru/. И там спрайтов не нашёл :( Укажите пальцем, если не трудно.
                              +1
                                –1
                                Спасибо, познавательно.
                                  –1
                                  обращайтесь :) в данный момент готовится новая версия, без дополнительных вложенных элементов (пользую CLIP)
                                    0
                                    Посмотрел код, и как-то все равно не понял, как сделано в IE6 использование PNG24-спрайта в IE6... Можете для тупого пояснить?
                                      0
                                      вложенный элемент с фоновым png24 позиционируется абсолютно. можно сделать и без доп.разметки.
                                      Вот CSS
                          0
                          Ага, ага, знакомый прием ведения дискуссии, когда безбожно раздувается, утрируется одна сторона и делаются далекоидущие выводы.

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

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

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

                              Спрайты и прочее приемы - это лишнее, нужен настоящий вектор.
                              Махонький файлик и такое можно на странице отрисовать и отмасштабировать, ух!
                                +3
                                использую спрайты и для прозрачных PNG в ИЕ, решение вопроса нашел тут http://handynotes.ru/2008/04/css-sprites…
                                  0
                                  Все-таки не для всего тот хак подходит. В частности, необходим position:absolute и полностью отсутствует управление repeat :(
                                  +2
                                  Позиционировать картинку с альфа-прозрачностью в IE6 можно при помощи pos:absolute, если элемент с фоном-спрайтом вложен в другой с размерами иконки. Но это доп. разметка.
                                    –1
                                    так, в бой пошла тяжелая артиллерия :)
                                      +1
                                      ну почему сразу тяжёлая ) всё легко и работает на проектах Яндекса
                                        –1
                                        да нет, я скорее про то, что осталось отметиться Виталию и Артемию — и дискуссию можно считать состоявшейся :)
                                          –1
                                          Ну, я тут скорее за Виталика, чем за себя говорю — это его методика.
                                      –1
                                      можно обойтись clip-ом, или есть ограничения?
                                        –1
                                        Решение с clip'ом вижу первый раз, надо будет попробовать.
                                          –1
                                          способ с доп.разметкой работает тут - http://fotki.com
                                          с clip прототип можно посмотреть тут - http://sobolev.vladimir.ru/clip.html
                                            –2
                                            ага, последний случай почему-то напоминает по разметке верхнее меню для http://webo.in/ :)
                                              –1
                                              наверное, потому, что это банальный список, не иначе.
                                                0
                                                это не банальный список. Там навернуто еще пара элементов для нормального отображения. В своем комментарии я имел именно это в виду
                                                  0
                                                  совпадение
                                      +1
                                      "использование CSS Srpites"
                                      • UFO just landed and posted this here
                                          –1
                                          Ну что за нездоровые призывы? Автору что-то показалось и он тутже написал, что спрайты зло?
                                          С тем же успехом можно писать "AJAX — зло" или "XSLT — зло" и тому я могу привести массу примеров. Вчера вылупившийся верстальщик увидит страшный заголовок и склепает новый, а хуже того, переделает рабочий вариант. Естественно, улучшений не получит. С любой самой совершенной технологией можно нагородить такого, что мало не покажется.
                                          Статья пригодится многим, но дополните её. Возьмите конкретный пример и реализуйте его в разных вариантах и с разным подходом. Вот это будет действительно полезно.
                                          0
                                          Я слежу(стараюсь) за Вашими постами, тема мне интересна, и надеюсь, что помогли они не только мне. В своем вопросе вы лукавите; если Вы считаете, что незачем, для чего тогда пишете?
                                          В любом случае Вам спасибо и успехов.

                                          Only users with full accounts can post comments. Log in, please.