Докато се учех как да използвам css спрайтове, бързо забелязах и/или прочетох, че е най-добре да има 1 или 2 празни пиксела между всички изображения вътре в спрайт, за да се избегне проливане на други изображения, когато потребителят увеличава или намалява.
Докато разглеждах началната страница на Apple, забелязах, че те не правят това, без да страдат от кървящи изображения. Не намерих причина в техния css, която да обясни това.
Как е възможно? ;)
Няма нужда от подложка между спрайтовете, ако знаете точно какъв размер ще бъде съдържащият елемент. Проблемът идва от това, когато нещо вътре в елемента го кара да расте. Например, ако текстът вътре в този елемент трябва да използва резервен шрифт, това може да доведе до увеличаване на контейнера.
Причината, поради която се препоръчва подплата между спрайтовете, е, че няма истински недостатък в това. Това не увеличава размера на файла с никаква значима сума и ви дава известна граница на безопасност, когато браузърът прави нещо малко по-различно от очакваното.
Изглежда, че наистина е необходимо, защото когато браузърът прецени, че е необходимо да мащабира изрязаните области (например, ако някой увеличи или намали или ако анимация временно промени размера), браузърът ще използва anti aliasing, за да изглади мащабираното изображение . Тъй като антиалиасингът използва околните пиксели, най-външните пиксели на изрязване ще бъдат повлияни от тези, които се намират извън изрязаната област. Прозрачната подложка гарантира, че това няма да се случи, тъй като прозрачната подложка няма да повлияе на получения цвят. Без подложка, изрязаните снимки ще си влияят една на друга.
Това може лесно да се тества, като се запълни (теоретично невидимата) зона за подложка с цвят като магента и след това се увеличи или намали страницата, всички култури ще имат малко магента по краищата си.
