Один из самых полезных интерфейсных технологий разработки последних лет является скромным “CSS Sprites”.
Техника была популярным Dave Shea на A List Apart в 2004 году с его статьей CSS Sprites: Изображение нарезки по Поцелуй Death.CSS Sprites являются относительно простая техника как только вы понимаете основы и он может быть применен во всевозможных направлениях.Общего пользования для графических интенсивного судоходства, но она также может быть полезна для кнопок или даже стиль заголовков с корпоративными font.

Спрайты просто набор изображений, которые объединились вместе, чтобы создать один файл.Затем с помощью CSS, изменив background-position изображение, чтобы увидеть правильное часть изображения вам нужно.Я часто использую аналогию с большим объектом прохождения окна — вы видите только то, что находится в пределах frame.

За последние пару лет CSS Sprites был одним из наиболее широко принятой CSS-связанных с ними методов.Popularised по исследованиям Yahoo и документации по ускорения вашей website многих сайтах с высоким профилем реализации техники, в том числе Google и Amazon.Есть многочисленные tutorials, которые помогут вам получить в борьбу с методами и спрайт generators которая поможет вам создать графики themselves.

Преимущества и потенциальные Problems

CSS Sprites стали де-факто способ повышения скорости вашего веб-сайта или веб-приложения.Объединение нескольких фотографий в единый файл может быстро уменьшить количество запросов HTTP необходимо на типичном сайте.Большинство браузеров допускают только два одновременных соединений с одного домена, хотя отдельные файлы могут быть большими, общий запрос и время отклика значительно ниже.Сочетая фотографии с похожими оттенками также означает, что цвет и сжатия информации нужно всего лишь один раз, а не в файл, который может означать общее уменьшение размера файла по сравнению с файлами individually.

Выгоды уменьшения размера файла и HTTP-запросы часто огласку, но потенциальные проблемы редко обсуждаются.Одним из основных Techinical проблемы с CSS Sprites является использование памяти, что объясняется в статье “Для Sprite Или Не Sprite” .Другая проблема заключается в поддержании спрайты, изображения и CSS, оба из которых может стать весьма complicated.

Технологические Solution

Общей практики в решении замедления вычислительного кажется, просто бросить в более hardware.Мы все знаем, цены на оборудование снижаются все время, так что похоже, что это разумное решение.Однако, я чувствую, что естьфундаментальный изъян с этой философией и укоренившиеся менталитет.Разработчики имеют доступ к большей вычислительной мощности, и как таковые они писать свои приложения, которые будут обрабатываться в этих средах.С каждой новой функции приложения становится все медленнее и медленнее, но эта проблема уже имеет решение — обновить оборудование. Это бесконечный cycle.

Многие из пользовательских интерфейсов люди сталкиваются сегодня в Интернете.Это означает, что пользователь должен загрузить большую часть связанных с ним материалов (изображения, CSS, JavaScript) до взаимодействия с содержанием, так же философия должна быть применена к Web.Веб-сайты, или совсем недавно веб-приложений, становятся все более сложными, даже заменив многих приложений для настольных компьютеров, поэтому пользователь должен сначала загрузить все больше и больше информации, прежде чем начать их experience.

Несмотря на размеры файлов, необходимый для просмотра веб-сайта значительно увеличились за последние годы все больше и больше людей, повышение их подключения к Интернету, с широкополосным становится нормой во многих странах.Этот цикл соответствует философии обновление оборудования и в теории должно свести на нет все потенциальные пользовательский опыт problems.

Тем не менее, веб-разработчики падает в ту же ловушку, многие разработчики приложений было раньше.Как макеты становятся все более сложными, более изображений требуется, и поэтому разработчик создает больше фотографий — даже если они спрайтов.Это кажется разумным утверждение, но это не значит, что это лучшее solution.

A Twist на Technique

Из-за ограничений в Интернете, было много нестандартных решений проблем.Но в Интернете является не единственным местом, где может быть очень жесткие ограничения.Инновации стремится на ограничения.Прекрасным примером этого была в знаменитой игре Super Mario Brothers, где кусты были просто перекрасить clouds.

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

Сейчас на поворот, эта идея заключается в создать прозрачный sprite позволяющие background-color показать до конца.Если вы знакомы с CSS Sprites, вы должны быть в состоянии понять этот поворот относительно easily.

Просто, изображение с прозрачным “выбитых” прозрачной центр находится над цветом фона.Изменение цвета фона изменяет внешний вид элементов.Единственное, что вам нужно обратить внимание на то, что цвет окружающих прозрачную часть изображения соответствует фон, в котором вы используете techinque.Это останавливает кровотечение цвет фона в другие части вашего image.

Во всяком случае, этот метод гораздо легче понять на примере …

Example

Следующий пример только из трех изображений.Один за всех образцов шрифтов, одно изображение для обои� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров