После публикации серии статей на тему использования, ненужности и даже автоматизации CSS Sprites, после многодневного анализа текущего положения вещей удалось собрать некоторый набор наиболее часто возникающих проблем при использовании CSS Sprites и методов их решения. Также далее рассматривается прикладной способ по автоматизации создания CSS Sprites для произвольного проекта.
CSS Sprites, на самом деле, — всего лишь расширенное использование технологии
Обзор технологии
CSS Sprites, на самом деле, — всего лишь расширенное использование технологии
background
, заложенной еще в спецификации CSS1. Все, до чего додумалось прогрессивное человечество за эти годы — это множественный фон у элементов (как он будет совместим с концепцией CSS Sprites еще придется проверить). Основные свойства, которые мы используем для задания фонового изображения.background-image
— основная «рабочая лошадка». Именно за ней будущее в видеdata:URI
, который в конце концов победит CSS Sprites. Но произойдет это нескоро.background-repeat
— вторая не менее важная составляющая при использовании фонового изображения. Ведь задаваяno-repeat
для данного свойства, мы намеренно подчеркиваем, что допустимо использование CSS Sprites для «склейки» изображений (по умолчанию используетсяrepeat
).background-position
— «волшебная палочка» для CSS Sprites, позволяющая спрятать или показать определенные части фонового изображения.