Технология 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 — минимизацию. Нам нужно сопоставить их с соответствующими красивыми картинками (чтобы наш сайт был привлекательным):
Развернуть Свернуть |
Оба класса используют одно и то же изображение:
.мин, .макс { ширина: 16 пикселей; высота: 16 пикселей; фоновое изображение: URL (sprite.png); background-repeat: no-repeat; /*Мы не хотим, чтобы он был выложен плиткой*/ text-indent:-999em; /*Способ скрыть текст*/; } |
|