Acabaram as desculpas para não usar css sprite na sua aplicação!


Ouvindo hoje o podcast do Ruby 5 de 6 de abril, vi (ou melhor, ouvi) que a gem css_sprite foi totalmente reescrita, pelo seu autor original, Richard Huang. E ele tornou o css_sprite no HAML do css sprite! Pulando para o final para depois voltarmos. O que o css_sprite faz é:

  1. jogue as imagens que você deseja juntar dentro de um diretório terminado com css_sprite na sua aplicação
  2. Rode rake css_sprite:build
  3. Pronto, uma imagem e um arquivo css serão criados, com uma classe css para cada nome de imagem que você colocou no diretório

A imagem abaixo (tirada do próprio site do Richard Huang: http://www.huangzhimin.com/uploads/Image/test.png) explica o que foi dito acima:

css_sprite gem structure

Agora, vamos voltar um pouco e entender porque usar Sprite, como instalar e configurar a Gem, … Primeiro, vamos entender porque o Sprite ajuda na performance percebida e real do seu site junto aos seus usuários.

Quando acessamos uma página da web, o browser abre uma conexão ao servidor e baixa o texto daquela página. Só que, no texto podemo ter diversas imagens (ícones,  imagens de background, fotos, …). Para cada link diferente, uma conexão será aberta para recuperar o arquivo. No caso de pequenos ícones, o custo de abrir e fechar uma conexão é mais caro que o do tráfego gerado (visto que a imagem é, normalmente,  pequena).

Em servidores de alto tráfego, é fácil entender que isso impacta fortemente na velocidade percebida pelo usuário.Para resolver esse problema, surge o Sprite. A ideia é que vários ícones/imagens existentes na página são agrupados em uma só imagem (ou seja, várias imagens serão recuperadas com apenas uma conexão). E, através de css, essa imagem será posicionada na página de forma a exibir, em cada lugar, apenas a parte da imagem pretendida.

Configurando o css_sprite

O primeiro passo é instalar a gem (a versão desse exemplo é a 1.4.5):

$ gem install css_sprite

Em seguida, abra o arquivo development.rb e adicione a configuração da gem:

# config/development.rbconfig 'css_sprite', :version => '1.4.5'

Por último, faça um require do css_sprite no seu Rakefile para que as tarefas do css_sprite fiquem disponíveis para o comando rake da sua aplicação:

# Rakefilerequire 'css_sprite'

NOTA: na verdade, originalmente o autor configura em envorinment.rb, mas como só vamos criar as imagens de sprite em tempo de desenvolvimento, isso perde sentido. Além disso, o css_sprite depende da gem rmagick para criar as imagens e eu não uso a rmagick em produção. Agora, se sua intenção é criar um site nos moldes do csssprites, então a configuração fica em environment.rb mesmo.

Usando css_sprite

Como pode ser visto na imagem no início desse texto. Para usar o css_sprite só precisamos criar diretórios que terminem com o nome css_sprite dentro do diretório public/images e colocar nesse diretório as imagens que pretendemos juntar. Em seguida usamos o comando rake:

$ rake css_sprite:build

Pronto. Uma imagem e um arquivo css para cada diretório css_sprite serão criados (a imagem no diretório public/images e o css no diretório public/stylesheets). Dentro de cada css, uma classe será criada com o nome da imagem que foi juntada ao sprite, para que possa ser aplicada na página html. Fiz um demo sobre o css_sprite que pode ser encontrado em: http://github.com/riopro/css_sprite_demo

Conclusão

O css_sprite facilita muito a vida de quem quer usar sprite em sua aplicação. Além disso, existem algumas configurações possíveis para o css_sprite (e que ficariam armazenadas em config/css_sprite.yml) que não foram cobertas nesse artigo mas que podem ser lidas na página do autor.Bom uso!Fonte:

Informações e Links

Junte-se comentando, lendo o que os outros dizem ou colocando um link a partir do seu blog.


Outros Artigos
Adicionando assinatura de repositórios de terceiros ao seu Ubuntu
Webrat: usando o have_tag, with_tag e o have_selector

Comente

Tire um tempo para comentar e nos dizer o que você acha. Alguns códigos HTML são permitidos para formatação.

Comentários dos Leitores

Seja o primeiro a comentar!