0

O uso de CSS Sprites têm se popularizado bastante, por motivos de desempenho, em especial. Como implementar o sprite usando código automatizado e elegante?

Por exemplo, tendo o html abaixo:

<span class="sprite home" >&nbsp;</span>

Ou alguma variação parecida, como exibir a tag como imagem, sem criar um enorme ou código gigante ?

1 Resposta 1

1

Existe algumas soluções como o SmartSprites (http://csssprites.org), mas eu, particularmente, não gosto, pois gera um código CSS imenso e de difícil localização.

Uma solução em javascript, com código enxuto e sem necessidade de biblioteca, ficaria assim:

Fiddle: http://jsfiddle.net/ZT5Uk/

CSS

.sprite {
    background: url("http://goo.gl/3pFUfC") -10000px -10000px transparent;
    border: 1px solid #CCC;
}

JS:

for (var i = 0, imgs = document.getElementsByClassName('sprite'), len = imgs.length, size; i < len; i++) {
    size = imgs[i].className.match(/(\d+)\-(\d+)/);
    imgs[i].style.backgroundPosition = '-'+ (size[1]) +'px -'+ (size[2]) +'px';
}

HTML com vários ícones:

<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 0-0" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 40-20" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 0-20" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 60-40" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 80-60" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 40-60" alt="" />
<img src="http://goo.gl/wAofVV" width="20" height="20" class="sprite 0-80" alt="" />

Alguns até se perguntam se vale a pena o esforço (https://webmasters.stackexchange.com/questions/32976/css-sprites-are-they-worth-the-trouble/32982#32982), mas deste modo, fica fácil localizar as imagens no sprite, porque utilizo números redondos. Os espaços em brancos representam quase nada em bytes. E não é necessário mais nenhum código javascript.

Esta foi a forma mais prática que encontrei. Mas há outras muito boas também.

Você deve fazer log-in para responder a esta pergunta.