CSS Sprites не являются новыми.В самом деле, они довольно устоявшейся техники и сумели стать обычной практикой в веб-разработки.
Конечно, CSS спрайты не всегда необходимо, но в некоторых ситуациях они могут принести значительные преимущества и улучшения – особенно если вы хотите, чтобы снизить нагрузку на сервер.И если вы haven’ т слышал спрайтов CSS и раньше, теперь, вероятно, хорошее время, чтобы узнать, что это такое, как они работают и какие инструменты помогут вам создавать и использовать технику в projects.
Что такое CSS Sprites
Срок “ sprite” (по аналогии с “ духа, ” “ гоблин, ” или “ elf”) имеет свои истоки в компьютерной графике, в котором он описал графический объект смешивают с 2-D или3-D сцены через графическое оборудование.Поскольку сложность видеоигр постоянно увеличена, существует необходимость для умных методов, которые могли бы заниматься подробным графических объектов, сохраняя при этом игровой процесс течет.Один из методов, разработанных видел спрайты быть подключен к сетке мастера (см. изображение ниже), а потом вытащил мере необходимости код, который отображается положение каждого отдельного графического и селективно написал ее на screen.
Спрайты были выставлены на статической или динамической фоновое изображение, и позиционирование спрайт был просто управлять аппаратным контроллерам.Этот термин был придуман потому, что спрайты, казалось, “ haunt” дисплей и didn’ т действительно существуют в графическом memory.
Лист Покемонов Sprite, состоящий из более чем 1000 графических объектов.Найдено here.Вы можете нажать на изображение для увеличения ( спасибо, Райан !).
Время шло, и в начале 2000-х годов, когда прогрессивные веб-дизайнеры начали искать альтернативы наличие основе опрокидывание меню (с OnMouseOver и onMouseOut эффекты), спрайты увидели возрождение в веб-разработки.С помощью CSS, простая реализация спрайтов было возможным, и это было намного проще и понятнее, чем его наличие на основе predecessor.
В 2004 году Dave Shea suggested простой CSS подход к CSS спрайтов на основе практики, установленной этих легендарных видеоигр.В этом случае, несколько изображений используется во всем сайте будут объединены в так называемый “ мастер image.” Для отображения одного изображения из эталонного образа, можно было бы использовать фон position недвижимость в CSS, определяющийТочное положение изображения будет отображаться.Любой наведения, активный или фокус эффект будетреализована с помощью простого определения фона положение собственности на дисплее element.
При загрузке страницы, он не будет загрузить отдельные изображения по одному (ни наведении состоянии изображений на запрос), но, скорее нагрузка весь образ мастер once.Это не может звучать как значительное улучшение, но на самом деле было: главный недостаток onMouse эффектов является то, что наличие на основе эффектов наведения требуются два HTTP-запросы для каждого изображения, которое занимает много времени и создает то, что неприятные “ flickering” изображения.Потому что мастер загрузки изображения с целой странице только один раз с CSS спрайтами, никаких дополнительных запросов HTTP, необходимых для наведения, активный или фокус-эффект (потому что изображение уже загружено), а не “ flickering” Эффект occurs.
Следствие: CSS спрайты уменьшить HTTP запросов и время загрузки страниц.Это основная причина, почему CSS спрайты часто используется на веб-сайты с интенсивным движением, где миллионы показов страниц потребуется “ only” крошечная часть того, что могло бы быть 30,000,000.Таким образом, CSS спрайты обычно используются, в частности, для навигации (например, для наведения эффекты), иконы и buttons.
Где CSS Sprites использовано
CSS спрайты могут быть использованы в различных условиях.Большие сайты могут объединить несколько фотографий в одной конструктивной основе, создавая четко отделен от “ chunks” мастер изображения – цель в том, чтобы держать в сопровождении дизайн и легко обновлять.Большие пустые пространства между изображениями часто используется, чтобы убедиться, что изменения размера текста в браузере doesn’ T вызывает побочные эффекты, такие отображения нескольких изображений в фоновом режиме.В самом деле, спрайты обычно хорошо работают в основе пикселей дизайн, но их трудно использовать в упругих (EM-основе) конструкций в связи с ограниченным фона положение собственности.По сути, структура, спрайты, зависит от компромисса между ремонтопригодность и снижения нагрузки на сервер, таким образом, оно меняется в зависимости от проекта вы работаете on.
Вот некоторые вдохновляющие (и не очень вдохновляющая) примеры:
XingXing использует различные иконки и кнопки, а также его логотип, в sprite.
AmazonБольшой, блестящий и компактные CSS спрайтов на Amazon.
AppleApple, использует CSS спрайты для различных состояниях своей главной навигации menu.
YouTubeYouTube принимает вертикальное подход к ее кнопок и иконок.Весь спрайта составляет 2800 пикселей в высоту
CNNCNN использует скромный спрайта CSS с его социальной icons.
DiggDigg имеет довольно эзотерическая спрайт, с небольшими стрелами и скобки.Большие пустые пространства между изображениями используется, чтобы убедиться, что изменения размера текста doesn’ T отображения нескольких изображений в качестве фонового изображения.Вы можете явно определить ширину и высоту в пикселях, так что эта проблема не возникает – Однако, в этом случае изменения размера текста никогда не вырваться из определенного окна, таким образом, возможно сделать текст нечитаемым.Следовательно, вы должны быть осторожны при использовании spriting для кнопок с переменным текстовые метки.Для тех, кнопки, вы должны определить размер шрифта в пикселях тоже.Или просто использовать большие пустые пространства в спрайт ( спасибо, daftie !).
YahooYahoo имеет хорошие иконки в своей спрайт, раскинувшийся равном расстоянии друг от other.
GoogleGoogle придерживается своего принципа минималистский дизайн с минималистским CSS sprite.
Дракон InteractiveДизайн студия с красочными, яркими спрайтов CSS для навигации menu.
TV1.rtp.pt
огромные красочные и Qute хаотической спрайта CSS на сайте Portugiese ТВ-канала ( Благодарю вас, Антониу Мануэля Кардосо !).
CSS Sprites используется объединить многие часто используемые графические элементы, такие как навигационные элементы, логотипы, линии, RSS иконки, кнопки и т.д. С другой стороны, они не используются для любого видаСодержание, которое может часто меняться на release.
Статьи о CSS Sprites
CSS Sprites: Image нарезки по Поцелуй DeathЛегендарный вступительной статьей о спрайты CSS в список Apart.
CSS Sprites: что это такое, почему они крутые и как использовать ThemИллюстрированную статью о спрайты CSS от Smashing Magazine автор Chris Coyier и блоггер из Турции, Волкан Görgülü.
Как Yahoo.com и AOL.com улучшения производительности веб с помощью CSS SpritesНекоторые из самых загруженных веб-сайтов в Интернете использования CSS Sprites, чтобы сэкономить на запросы HTTP.В этой статье показано, как Yahoo! и AOL использовать спрайты для повышения производительности.Примечание: некоторые устройства (iPhone является наиболее заметным) применяются спрайтов в память интенсивный путь, который замедляет устройство crawl.
Каковы CSS Sprites Введение Джейсон Cranford Teague.
Sprite OptimizationDave Shea размышляет ли он на самом деле имеет смысл создать большие спрайты CSS, объединяющий в себе все элементы в единое изображение, а затем отображать их с background-position недвижимость в CSS.Ответ: Нет, не чрезмерно усложняют вещи.Вместо этого, найдите хороший компромисс между быстрым временем загрузки и maintainability.
Создание Простое и полезное CSS SpritesПодробное введение в CSS Sprites Игнасио Риччи.Все файлы могут быть загружены, как well.
Быстрый Переходящие безPreloadПрактическом примере реализации быстрых rollovers.
CSS Sprites Rounded cornersДругой пример из практики, на этот раз объясняя, как отобразить закругленные углы с помощью CSS Sprites.
CSS Image SpritesОбширный учебник с примерами, советами, предложениями и лучшим practices.
Оптимизация сайта с помощью CSS Image SpritesЭто очень подробный учебник Эндрю Джонсон объясняет, что такое CSS спрайты, почему они так важны, как они работают и как реализовать them.
Анимированные GIF для CSS SpritesВ этой статье рассматривается одна из наиболее странных использования CSS спрайтов: как анимированные GIF.
изображение Sprite навигации с CSSУзнайте, как создать простое меню с наведите effect.
Advanced CSS MenuРеализация эффект при наведении с CSS sprites.
Создание и использование CSS SpritesОчень основной учебник по CSS спрайты Дэвид Walsh.
