Как реализовать спрайт на чистом CSS?

Question

[Михаил Федотов]

Условие:
Есть 20 картинок размером 128х128. Все они реализованы одним спрайтом.

Задача:
Вывести 20 div с background: url('url_of_my_sprite'), но менять им только background-position.

Решать с помощью nth-child не очень хочется. Потому что картинок может быть и 40. Хочется написать что-то вроде цикла, который увеличит мне background-position на 128px за каждую итерацию.
Прибегать к JS тоже не хочу из соображений производительности.

Если решить это чистым CSS невозможно, то есть такая вот мысль:
Так как сайт на PHP, то я могу взять картинку, посчитать ее длину и разделить на 128. Получится количество тегов div, в каждом написать атрибут style="background-position: $i*128."px", например. Нормальный ли костыль? Как он в плане производительности?

Answer 1

[Павло Пономаренко]

Костыль нормальный. В плане производительности будет работать хорошо.
Кстати, и на JS будет работать хорошо. Если причина в отказе от JS только производительность - не стоит. Эта задача на JS выполнится очень быстро

Comments

[Михаил Федотов]

А можно пример такого кода, пожалуйста?
Я вижу решение только в изменении DOM, а это затратно. Видимо, я что-то не учитываю.

[Павло Пономаренко]

for (var i = 0; i < elements; i++) {
  elements[i].style.backgroundPosition = '......';
}

Это затратно, если вы изменяете 60 раз в секунду тысячи элементов. Если вы один раз при старте инициируете настройки - в этом ничего затратного не будет, поверьте или проверьте.

[Михаил Федотов]

Да, и у меня такое же решение. Значит, все верно. Спасибо за ответ!