Технология CSS Sprites Еще в 2005 году Дэйв Ши, владелец CSS Zengarden, опубликовал подробное объяснение этой технологии в ALA.
Первоначально оно распространялось только среди игроков CSS как производственный метод. Позже появились 14 правил для более быстрой загрузки веб-сайтов, которые были распространены среди технических специалистов. В первом правиле «Сделайте меньше HTTP-запросов» упоминались CSS-спрайты. Так этот маленький гоблин стал популярен, и даже появились инструменты онлайн-генерации, остановить которые было невозможно. В последнее время во многих отечественных блогах упоминаются CSS-спрайты. Самый известный пример — анимации ниже google.co.kr. В последней версии YUI также используются CSS-спрайты. Почти все декоративные изображения CSS покрыты изображением размером 40×2000. Facebook, крупная социальная сеть, недавно использовала изображение размером 22×1150 для покрытия всех значков. Внезапно CSS-спрайты появились повсюду.
Как работают CSS-спрайты
Мы знаем, что после революции CSS HTML стал семантическим. В общем, декоративный контент больше не записывается в тегах, а задача рендеринга передается CSS. Графический интерфейс красочный и незаменим для украшения различными красивыми картинками. Метод создания в новую эпоху заключается в том, чтобы наполнить HTML различными крючками, а затем позволить CSS обработать их.
Когда необходимо использовать изображения, в настоящее время это достигается с помощью атрибута CSS background-image в сочетании с фоновым повторением, фоновой позицией и т. д. (Отступление: почему я удаляю текущий этап, потому что, если браузер будет поддерживать контент в будущем , дополнительный метод реализации). Наш главный герой, как вы уже догадались, находится на заднем плане. Регулируя значение background-position, фоновое изображение может появляться перед вами в разном виде. По сути, общий вид картинки не изменился. За счет изменения положения картинки вы видите только то, что должны видеть. Это как дата на часах. Сегодня вы видите 21, а завтра — 22, потому что ее позиция подскочила на одну позицию. Итак, вы, вероятно, знаете, что CSS-спрайты обычно можно использовать только в блоке (коробке) фиксированного размера, так что части, которые не должны быть видны, могут быть заблокированы.
Давайте использовать sprite.png YUI в качестве примера. Если у нас есть такой фрагмент кода, max представляет собой максимизацию, а min — минимизацию. Нам нужно сопоставить их с соответствующими красивыми картинками (чтобы наш сайт был привлекательным):
<div class="max">Развернуть</div> <div class="min">Свернуть</div> |
Оба класса используют одно и то же изображение:
.мин, .макс { ширина: 16 пикселей; высота: 16 пикселей; фоновое изображение: URL (sprite.png); background-repeat: no-repeat; /*Мы не хотим, чтобы он был выложен плиткой*/ text-indent:-999em; /*Способ скрыть текст*/; } |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <тело> |
Да, мы видим облако серого цвета, потому что мы не указали позицию фона, которая по умолчанию равна 0 0. Вы можете посмотреть sprite.png. Эта позиция представляет собой серый блок. Хорошо, нам нужно найти позиции знака плюс, обозначающего максимизацию, и знака минус, обозначающего минимизацию. После измерения кнопка максимизации располагается на расстоянии 350 пикселей по оси Y, а кнопка сворачивания — на расстоянии 400 пикселей по оси Y. Подумайте, как мы можем заставить их отображаться. Очевидно, нам нужно обновить sprite.png, и код выглядит следующим образом:
.max {background-position: 0 -350px;} .min {background-position: 0 -400px;} |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <тело> |
На этот раз нам это удалось!
Преимущества CSS-спрайтов
Ранее мы узнали, что причина внезапного выдоха CSS Sprites связана с его способностью улучшать производительность веб-сайта. Очевидно, это одно из его больших преимуществ. Большое количество изображений при обычном методе производства теперь объединяются в одно изображение, что значительно сокращает количество HTTP-соединений. Количество HTTP-соединений оказывает важное влияние на скорость загрузки веб-сайта.
Недостатки CSS-спрайтов
Что касается ремонтопригодности, то это вообще палка о двух концах. Кому-то это может понравиться, а кому-то нет, потому что каждый раз, когда изображение меняется, вам приходится удалять или добавлять к нему контент, что кажется немного громоздким. И вычислять положение картинок (особенно картинок с тысячами пикселей) тоже весьма неприятно. Конечно, под лозунгом эффективности все это можно преодолеть.
Поскольку положение изображения должно быть зафиксировано на абсолютном значении, теряется такая гибкость, как центр.
Как мы упоминали ранее, размер поля должен быть ограничен перед использованием CSS-спрайтов, иначе это может помешать изображению. Другими словами, CSS-спрайты не подходят в некоторых ситуациях, когда требуется неоднонаправленный мозаичный фон и масштабирование веб-страницы. Решение YUI — увеличить расстояние между изображениями, чтобы сохранить ограниченное масштабирование.
Краткое описание CSS-спрайтов
Производительность превосходит все остальное. CSS-спрайты — это технология, которую стоит продвигать. Он особенно подходит для FIR, например, для замены значков фиксированного размера. Для обеспечения совместимости рекомендуется держать части изображения на некотором расстоянии друг от друга.