Прикладные тонкости. Алгоритм разбора и сбора CSS Sprites. Уменьшение количества запросов
Прикладные тонкости
Практическое решение: CSS Tidy
Практическое решение: сборка изображений
Естественно, рассматривая набор возможных эффектов при использовании фоновых изображений стоит отметить следующие:
· Объект, полностью заполненный фоновым изображением. Здесь основную роль играют конечные размеры объекта (конечно, если изображение не повторяется по всем осям сразу: в таком случае использовать его для CSS Sprites не представляется возможным). Довольно часто фон под объектом может меняться в зависимости от каких-либо условий (преднамеренный акцент или действия со стороны пользователями), но для логики создания CSS Sprites это несущественно. Здесь же можно выделить три подслучая, соответствующих неповторяющемуся фону и повторяющему по оси X или Y.
· Фоновое изображение заполняет не весь предоставленный ему объем (либо размеры объекта не заданы, либо заданы в относительных - em, % - единицах). Тут нам необходимо либо прикреплять повторяющееся изображение «в конец» спрайта, чтобы на той части объекта, что осталась без фонового изображения, не проявлялось никаких дефектов. Либо (в случае no-repeat) расположить изображения «лесенкой» (это особенно актуально в случае фона для элементов списка). Стоит отметить, что в зависимости от значения background-position CSS Sprites здесь могут быть как возможны, так и не возможны в принципе (например, в случае 100% 100%). Тут можно выделить еще несколько случаев, различающихся по background-position, background-repeat и линейными размерами блока.
· Изображение является анимированным. Поскольку далее речь пойдет о применении PNG и JPEG-изображений для CSS Sprites, то анимированные изображения придется сразу выбросить из рассмотрения: поддержка анимированных PNG-изображений находится сейчас на самом зачаточном уровне в браузерах.
Все описанные примеры можно более четко структурировать по следующим группам.
1. background-repeat: no-repeat, background-position: абсолютные числа, и заданы линейные абсолютные размеры.
2. background-repeat: no-repeat, background-position: абсолютные числа, линейные размеры не заданы или заданы в относительных единицах.
3. background-repeat: repeat-x, задана высота элемента.
4. background-repeat: repeat-x, высота элемента не задана.
5. background-repeat: repeat-y, задана ширина элемента.
6. background-repeat: repeat-y, ширина элемента не задана.
7. background-repeat: no-repeat, background-position: 100% 0, задана высота элемента (в абсолютных единицах).
8. background-repeat: no-repeat, background-position: 0 100%, задана ширина элемента (в абсолютных единицах).
9. background-repeat: no-repeat, background-position: 100% 0, высота элемента не задана (или задана в относительных единицах).
10. background-repeat: no-repeat, background-position: 0 100%, ширина элемента не задана (или задана в относительных единицах).
11. background-repeat: repeat.
12. background-repeat: repeat-x или background-repeat: repeat-y, размеры элемента указаны в относительных единицах.
13. background-repeat: no-repeat, background-position: относительные единицы.
14. изображение является анимированным GIF-файлом.
Глядя на эту спецификацию становится, в общем, понятно, в каком направлении двигаться для автоматизации создания CSS Sprites. Стоит только отметить, что при использовании одного и того же изображения многими CSS-селекторами нужно отследить background-position и устранить изначальные CSS Sprites, используемые в стилях. Процесс получения изображений из готовых CSS Sprites в автоматическом режиме достаточно сложен и может быть применим только на локальных проектах.