Ах, вездесущий спрайты CSS — одним из немногих веб-дизайна методы, которые были в состоянии обойти “ trend” Статус почти мгновенно, посадка себя твердо в категории лучшая практика CSS.
Хотя это didn’ T действительно взлететь до и после List Apart объяснили и одобрен it, она обсуждалась как решение CSS в начале июля 2003 г. Петр Stanícek.
Большинство веб-разработчиков сегодня есть достаточно сильные понимание этой техники, и были бесчисленные учебники и статьи, написанные на ней.Почти каждый из этих учебников, делается заявление, что дизайнеры и разработчики должны реализации CSS спрайты в порядке свести к минимуму HTTP requests и сохранить ценную килобайт.Эта методика была принята так далеко, что многие сайты, в том числе Amazon, теперь используют мега sprites.
Этот широко обсуждаемой пользу действительно стоящее?Дизайнеры прыгать на подножку спрайта CSS без тщательного рассмотрения всех факторов?В этой статье I’ собираюсь обсудить некоторые из плюсы и минусы использования CSS sprites, уделяя особое внимание использованию “ mega” спрайты, и почему такое использование спрайтов может во многих случаях быть пустой тратойtime.
Браузеры Cache Все Images
Одним из преимуществ данного сторонники спрайта метод является время загрузки изображений (или в случае мега спрайты, одно изображение).It’ S утверждали, что одного изображения GIF содержащий все необходимые государств изображения будет значительно ниже, размер файла, чем эквивалентные изображения всех нарезанный.Это правда.Одного изображения GIF имеет только одну таблицу цветов, связанных с ним, в то время как каждое изображение в формате GIF нарезанный метод будет иметь свою собственную таблицу цветов, складывая килобайт.Кроме того, одна JPEG или PNG спрайт, скорее всего, сэкономить на размер файла по сравнению с аналогичным изображение нарезанный деятельность в нескольких изображений.Но действительно ли это столь значительную выгоду
По умолчанию, изображение-браузеров будет кэшировать все изображения — ли изображения спрайта или нет.Таким образом, хотя это, конечно, верно, что пропускная способность будет сохранен с спрайта техники, это происходит только на начальной загрузки страницы, и кэширования будет распространяться на вторичном pages которые используют тот же образ URLs.
кэше Firefox отображения изображения с amazon.com, что браузер кэш (типа “ о: cache” в адресной строке в Firefox, чтобы просмотреть эту функцию).
Когда вы объедините это с тем, что скорость интернета в среднем выше, чем сегодняони были, когда эта методика была впервые изложена на в 2003-2004 годах, то может быть мало причин использовать мега спрайты метод.И чтобы было ясно, как уже говорилось, I’ не говорю, спрайты никогда не должны быть использованы;. I’ т говорят, что они не должна быть overused для достижения ограниченных benefits
Время нахождения нарезки дизайна Increase
Подумайте о том, как простые 3-изображения состояния кнопки спрайта создана: различных государств должны быть размещены рядом друг с другом, образуя единое изображение.В вашем макете Photoshop (или другого программного обеспечения), вы don’ т имеют различные состояния прилегающих друг к другу в той манере, они должны быть нарезаны и объединены в новый отдельный образ, за пределами основного сайта mockup.
Если изменения необходимы для любого из состояний изображения, все изображение должно быть перекомпилированы и повторно сохранены.Некоторые разработчики могут не иметь проблем с этим.Может быть, они сохраняют свои состояния кнопки отдельно от макета в сыром виде оригинала, что облегчает доступ к ним.Но это все усложняет, и никогда не будет так просто, как нарезка одно изображение и экспорт it.
Для минимальным преимуществом несколько килобайт и запросов к серверу сохранены (которое происходит только на начальной загрузки страницы), является метод мега спрайтов действительно практичное решение для ничего, кроме 3-государство кнопку
Время нахождения кодирования и поддержка Будет Increase
После изображение нарезанный и экспорта, проблемы doesn’ T заканчивается.В то время как кнопка спрайты простой код в ваш CSS раз you’ Re привыкла к процессу, другие виды спрайтов не так simple.
Одной кнопки, как правило, <ul> элемент, который имеет множество ширину.Если спрайты для кнопки отдельно для каждой кнопки, it’ просто: ширина и высота <ul> будет такой же, как ширина и высота элемента списка, а якорь, с спрайт выравнивается соответственно для каждого состояния.Положение спрайта легко рассчитывается на основе высоты и / или ширины каждого button.
А как насчет мега спрайтов, как он используется в Amazon, уже упоминалось ранее, или той, которая используется Google?Можете ли вы представить сохранении такого файла, и внесении изменений в Положение элементов в CSS?А как насчет первоначального создания кода CSS?Далеко не простая кнопка, состояние которого позиций легко вычисляются, мега спрайтов часто требует постоянного контроля и перепрофилировании изображение states.
Некоторые из CSS для позиционирования Google’ S спрайт image
It’ правда, что Amazon спрайт экономит около 30 или больше запросов HTTP, и это, безусловно, значительное улучшение производительности.Нокогда это пособие сопоставлять с развитием и расходы на техническое обслуживание, а также кэширование и вопросы Интернет, можно утверждать, решение пойти с спрайты в мега формат может быть не так convincing.
У Sprites действительно требуют “ Maintenance”?
Конечно, некоторые могут чувствовать, что спрайты не вызывает головную боль для них.Во многих случаях, после Спрайт создается и закодированы, it’ S редко коснулся снова, и isn’ т, пострадавших от любого текущее обслуживание сайта.Если вы чувствуете, что спрайт обслуживания won’ т быть проблемой для you, то лучшим выбором может быть использование мега спрайтов method.
Не все должно быть Background
Еще одна причина, чтобы не поощрять чрезмерное использование CSS спрайтов в том, что это может привести к разработчикам использовать фоновые изображения неправильно.Опытные разработчики, которые считают доступности в своих проектах понимаю, что не каждое изображение должно быть фоном. Изображения, которые передают важные content должно осуществляться через встроенные изображения в XHTML, в то время как фоновые изображения должны быть зарезервированы для кнопок и декоративной elements.
