subject: CSS Sprites [print this page] O termo "sprite" (semelhante ao "esprito", "duende", ou "gnomo") tem suas origens em computao grfica, na qual se descreveu um objeto grfico misturado com uma cena 2-D ou 3-D atravs de um hardware grfico. Dado o aumento da complexidade dos jogos de vdeo houve a necessidade de buscar tcnicas inteligentes para lidar com grficos detalhados de objetos, mantendo-se a fluncia do jogo.
Em 2004, Dave Shea sugeriu uma simples abordagem CSS baseada em sprites, prtica estabelecida por lendrios jogos de vdeo do milnio passado (literalmente: antes do ano de 2000 !). Neste caso, vrias imagens utilizadas em todo um site seria combinada para a, assim chamada, "imagem-master". Para tanto seria necessrio utilizar a propriedade background-position do CSS para definir a posio exata das partes de imagem a ser exibida. Qualquer ao de ativao (hover, active ou focus) seria implementada utilizando a simples definio da propriedade background-position para o elemento exibido. Ao utilizar este recurso, quando a pgina carregada, nada de imagens uma a uma, mas sim apenas o carregamento da imagem master. A tcnica precedente que mais se aproximava das sprites, por exemplo no efeito Javascript "onMouse" (baseada em efeitos hover), exigia duas requisies http para cada imagem, o que alm de consumir tempo, criava desagradveis efeitos de "piscar" (delay ou atraso) de imagens. J com as "estampas css" a imagem-master carregada com a pgina inteira apenas uma vez eliminando as requisies http adicionais necessrias com o Javascript. Evidente que os benefcios a sites com grande trfego so expressivos: se um site que exibe 20.000 (vinte mil) pginas por dia "economizar" 80ms (milissegundos) em cada uma delas, ele ter feito, ao final das contas, uma economia de 26,66 minutos dirios, o que, convenhamos, algo bastante considervel, tanto em termos de melhoria de experincia do usurio, como em relao reduo do consumo de banda de internet. Em nosso site explicamos como trabalhar com as CSS Sprites. Confiram.
