Original Article: What is SmartSprites?
Author: csssprites.org

O que é o SmartSprites?

SmartSprites irá deixar você facilmente introduzir e manter CSS sprites nos seus designs. O SmartSprites analisa as diretrizes especiais que você pode inserir em seu CSS original para marcar imagens individuais para serem transformadas em sprites. Em seguida, ele cria imagens de sprite das imagens coletadas e insere automaticamente as propriedades de CSS necessárias na sua folha de estilo, de modo que os sprites sejam usados em vez das imagens individuais.

SmartSprites parses special directives you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties to your style sheet, so that the sprites are used instead of the individual images.

Em outras palavras, nenhuma cópia tediosa & colando em seu CSS ao adicionar, remover ou alterar imagens gravadas. Basta trabalhar com seu CSS e imagens originais como de costume e ter SmartSprites automaticamente transformá-los para a versão com sprite quando necessário.

Outras características do SmartSprites:

  • Lançamento Alpha: Conte com ou melhor -- relatório, qualquer problema que você tenha.
  • (NOVO!)Suporte total para GIF e PNG8 / 24: O SmartSprites pode criar sprites nos formatos GIF e PNG8 / 24, incluindo a transparência. Além disso, ele pode otimizar a saída PNG para que PNG24 seja usado somente quando necessário.
  • "Spriting" x- e y-repeated imagens: O SmartSprites suporta converter imagens de fundo repetidas ao longo dos eixos x e y em sprites.
  • Posição da imagem direita e inferior: SmartSprites pode transformar em sprites também imagens de fundo que estão posicionadas para a direita ou a parte inferior do recipiente.
  • Sprites verticais e horizontais: O SmartSprites pode criar os sprites estabelecidos verticalmente e horizontalmente, necessários para suportar os fundos repetidos x e y, bem como os fundos posicionados direito e inferior.
  • Margens de sprite personalizadas: Com o SmartSprites, você pode personalizar as margens esquerda, direita, superior e inferior de cada sprite individual para o posicionamento perfeito de pixels.
  • Múltiplas imagens de sprite e arquivos CSS: O SmartSprites pode processar vários arquivos CSS e produzir muitos sprites diferentes em um único passo (por exemplo, um vertical para ícones, outro horizontal para guias).
  • (NOVO!)Suporte para displays de alta resolução usando a propriedadesprite-scale.
  • Suporte especial para o Internet Explorer 6: O SmartSprites pode gerar rótulos PNG8 compatíveis com o IE6, preservando a transparência sempre que possível. Opcionalmente, uma cor mate pode ser definida para cada sprite separadamente.
  • (NOVO!)Caminhos de imagem CSS e document-root-relative: Os caminhos para imagens individuais e os sprites resultantes podem ser especificados em relação ao arquivo CSS ou de forma absoluta, relativamente ao diretório raiz do documento fornecido.
  • (NOVO!)Integrado com JAWR: Integrado com JAWR JAWR, uma completa solução de agrupamento e compressão CSS / JS para Java.
  • Fácil integração com sistemas de compilação: O processamento transparente é a força motriz por trás do SmartSprites, usando uma tarefa de Ant dedicada (NOVO!)pode ser facilmente integrado em scripts de compilação automatizados.
  • (NOVO!)Plugin Eclipse disponível para criar sprites diretamente do seu IDE.
  • (NOVO!)Maven plugin disponível para construir sprites como parte de suas compilações do Maven.
  • Licença BSD de código aberto: Você pode usar e contribuir para o SmartSprites, independentemente de você estar fazendo um Open Source ou um projeto comercial.

Usando SmartSprites

  1. Comece com a preparação do seu design (HTML, CSS, imagens) da maneira usual. Use background-image para anexar imagens como ícones, logotipos ou, por exemplo, fundos repetidos de x ou y. Você provavelmente acabará com um padrão CSS ao longo das linhas deste: #web { width: 17px; height: 17px; background-repeat: no-repeat; background-image: url(../img/web.gif); } #logo { width: 50px; height: 50px; background-repeat: no-repeat; background-position: top right; background-image: url(../img/logo.png); } #main-box { background-repeat: repeat-x; background-position: 5px left; background-image: url(../img/top-frame.gif); } Quando você verificou se o design original funciona como recuado, você está pronto para anotá-lo com as diretivas do SmartSprite.
  2. Anotar seu CSS com as diretrizes do SmartSprites. As diretivas SmartSprites devem ser incluídas entre /** e */ personagens (comentários CSS), o que os tornará transparentes para o navegador, quando você estiver trabalhando em seu CSS original. Dentro dos comentários, as diretivas seguem a sintaxe CSS comum de property: value. Depois de adicionar anotações, o CSS original será assim (diretrizes destacadas):

    /** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */ #web { width: 17px; height: 17px; background-repeat: no-repeat; background-image: url(../img/web.gif); /** sprite-ref: mysprite; */ } #logo { width: 50px; height: 50px; background-repeat: no-repeat; background-position: top right; background-image: url(../img/logo.png); /** sprite-ref: mysprite; sprite-alignment: right */ } #main-box { background-repeat: repeat-x; background-position: 5px left; background-image: url(../img/top-frame.gif); /** sprite-ref: mysprite; sprite-alignment: repeat; sprite-margin-top: 5px */ }

    A primeira directiva (em vermelho) diz ao SmartSprites que haverá um sprite cujo nome é mysprite, que deve ser salvo para ../img/mysprite.png em relação ao arquivo CSS. As imagens neste sprite serão dispostas verticalmente (uma sobre a outra).

    A directiva para a #web regra instrui SmartSprites para adicionar a imagem localizada em ../img/web.gif ao mysprite sprite. O SmartSprites também substituirá essa linha de CSS por propriedades referentes ao sprite criado.

    A directiva para a #logo A regra diz SmartSprites para adicionar ../img/logo.png para o mesmo sprite e alinhe-o na borda direita da imagem de sprite. Desta forma, a imagem pode ser posicionada em direção à borda direita da caixa para alcançar o mesmo efeito que com o original background-position: top right declaração.

    Finalmente, a directiva para a #main-box regra instrui SmartSprites para repetir o ../img/top-frame.png em toda a largura da imagem do sprite, de modo que o efeito de background-repeat: repeat-x pode ser preservada. Além disso, o SmartSprites irá compensar a imagem da borda inferior da imagem vizinha no sprite em 5px, de modo que o efeito de background-position: 5px top também é preservado.

    Abaixo está uma descrição detalhada das diretivas SmartSprites, que você pode achar um pouco pesadas, mas permitirá que você use todo o poder dos SmartSprites. Existem dois tipos de diretivas SmartSprites:

    1. Diretiva de Imagem Sprite, marcada em vermelho, é usado para declarar uma imagem de sprite, que combina vários números de imagens individuais. A diretiva de imagem Sprite deve começar com /** sprite: e deve ser contido em uma única linha. Um único arquivo CSS pode conter qualquer número de diretivas de imagens de sprite. A diretiva de imagem sprite especifica as seguintes propriedades:

      • Sprite ID, sintaxe: sprite: unique-id, requeridos. Um identificador exclusivo pelo qual a imagem do sprite será encaminhada. Para cada ID de sprite exclusivo, o SmartSprites criará uma imagem de sprite.
      • Localização da imagem Sprite, sintaxe: sprite-image: url('path/name.(png | gif | jpg)'), requeridos. Caminho relativo ao arquivo CSS para a imagem de sprite a ser criada. O SmartSprites irá inferir o formato da imagem com base na extensão utilizada. Atualmente com suporte são: gif, png e jpg.

        O caminho pode conter uma série de referências variáveis da forma ${variable}. As seguintes variáveis são suportadas e serão substituídas pelo conteúdo correspondente:

        • sprite: Sprite ID
        • md5: MD5 hash do arquivo de imagem sprite criado pelo SmartSprites. O hash só será alterado se o conteúdo da imagem do sprite ou o formato do arquivo mudar.
        • date: timestamp tomado no momento da geração da imagem sprite. O timestamp será diferente sempre que o processamento do SmartSprites for executado, mesmo que as imagens do sprite não mudem

        O caminho da imagem do sprite pode conter um ? caractere para ativar a quebra de cache baseada em cadeias de consulta. A parte do caminho do ? personagem até o final do caminho será ignorado ao determinar o nome real da imagem do sprite a ser gravada no disco.

        Observe que você pode colocar as variáveis em qualquer lugar no caminho da imagem do sprite, por exemplo,

        sprite-image: url('../img/logo-${md5}.png') sprite-image: url('../${date}/${sprite}.png') sprite-image: url('../sprite.png?${md5}')
      • Layout da imagem Sprite, sintaxe: sprite-layout: vertical | horizontal, opcional, valor padrão: vertical. Especifica se as imagens individuais devem ser apresentadas na imagem do sprite verticalmente (uma sobre a outra) ou horizontalmente (ao lado do outro).
      • Escala de Sprite, sintaxe: sprite-scale: number, opcional, valor padrão: 1. Se o fornecido scale o valor não é 1, para cada referência de sprite, o SmartSprites emitirá o background-size Propriedade CSS com um valor igual às dimensões de sprite reais divididas pela escala fornecida; Desliza a saída no background-position propriedade também será dividida pela escala.

        O SmartSprites aceitará valores inteiros e flutuantes de sprite-scale. Os avisos serão emitidos se as dimensões do tamanho do fundo calculado não forem números inteiros.

        Você pode usar o sprite-scale propriedade para criar imagens de sprite para displays de alta DPI, como Retina. No caso de Retina, você precisará preparar as imagens individuais em uma resolução x2 e definir a sprite-scale da imagem de sprite específica de Retina para 2.

      • Cor mate, sintaxe: sprite-matte-color: #ff8822, opcional, valor padrão: #ffffff. Especifica a cor mate que deve ser usada para renderizar transparências parciais em sprites salvos nos formatos GIF ou PNG8. Nota: atualmente apenas as especificações de cores hexadecimais de 6 dígitos são suportadas. Veja também o PNG color depth e IE6-friendly PNG opções.
      • Modo de compatibilidade IE6, sintaxe: sprite-ie6-mode: auto | none, opcional, valor padrão: auto. Especifica se uma imagem compatível com IE6 para este sprite deve ser gerada quando necessário (auto) ou não deve ser gerado (none). Veja o IE6-friendly PNG opção para mais detalhes.
    2. Sprite Reference Directive, marcado em orange, é usado para dizer ao SmartSprites que uma imagem individual específica deve ser colocada na imagem de sprite especificada. A diretriz de referência de sprite deve conter em uma linha, uma background-image Propriedade CSS especificando um caminho relativo do arquivo CSS para a imagem individual e um comentário CSS começando com /** sprite-ref: . A diretiva de referência sprite especifica as seguintes propriedades:
      • Referência Sprite, sintaxe: sprite-ref: sprite-id, requeridos. Uma referência a um dos sprites declarados pelas diretivas de imagens de sprite. A imagem individual será colocada no sprite com o identificador fornecido.
      • Sprite Alignment, sintaxe: sprite-alignment: left | right | top | bottom | center | repeat, opcional, valor padrão: left para sprites com layout vertical, top para sprites com layout horizontal. Define a borda da imagem do sprite à qual esta imagem individual será alinhada. Para sprites verticalmente alinhados, os valores permitidos são left e right, enquanto para alinhados horizontalmente -- top e bottom. O alinhamento de Sprite pode ser útil quando a imagem de fundo original foi posicionada em direção ao lado direito ou inferior da caixa (por exemplo, background-position: top right).

        Um valor de alinhamento especial é repeat. Neste caso, o conteúdo da imagem individual será repetido em toda a largura de um sprite vertical ou toda a altura de um sprite horizontal. Isso permitirá que você use sprites para origens que tenham background-repeat definido como repeat-x ou repeat-y.

        Atenção: a largura (altura) do sprite resultante não será menor do que o múltiplo mais comum das larguras de todas as imagens individuais com alinhamento definido para repeat naquele sprite vertical (horizontal). Por exemplo, se você tiver imagens repetidas "repetidas" de largura (alturas) 3px, 5px, 7px e 11px em um sprite vertical (horizontal), a largura (altura) desse sprite será 1155px. Portanto, use sprite-alignment: repeat com cuidado.

      • Margens do Sprite, sintaxe: sprite-margin-(left | right | top | bottom): OFFSETpx, opcional, valor padrão: 0px. O deslocamento desta imagem das bordas esquerda, direita, superior e inferior ou a imagem vizinha no sprite. Esta propriedade pode ser útil quando a imagem original não foi posicionada exatamente na borda da caixa, mas teve, por exemplo, background-position: 5px left. Nota: somente os valores de pixel são permitidos. A versão abreviada da propriedade de margens conhecida de CSS não é ainda suportado aqui.

    Quando você terminar de anotação do seu CSS com as diretrizes SmartSprites, você pode ter o SmartSprites gerando imagens de sprite e arquivos CSS modificados para você. Antes de fazer isso, você precisará instalar algum software que o SmartSprites requer e o próprio SmartSprites.

  3. Obter SmartSprites e o software que ele requer.

    1. Baixe e instale Java JDK versão 5 ou acima (JDK 6 recomendado).
    2. Download SmartSprites e descompacte o arquivo.

    Se o seu software usar Maven, veja Maven plugin.

    Agora você está realmente pronto para executar o SmartSprites.

  4. Execute SmartSprites.

    1. No Windows: smartsprites --root-dir-path c:/example No Linux: ./smartsprites.sh --root-dir-path /home/user/example
    2. Após o processamento concluído, você deve ver na tela mensagens semelhantes a:

      process: [java] INFO: Reading image from: C:\example\img\web.gif [java] INFO: Reading image from: C:\example\img\logo.png [java] INFO: Reading image from: C:\example\img\top-frame.gif [java] INFO: Creating sprite image of size 48 x 75 for mysprite [java] INFO: Creating CSS style sheet: C:\example\css\style-sprite.css [java] SmartSprites processing completed in 328 ms

      Se você notar qualquer linha contendo um aviso (WARN:), Leia com atenção e corrija o problema. Caso contrário, seu design pode não se parecer com a versão original.

      Após a conclusão bem-sucedida, o SmartSprites criará todas as imagens de sprite nos locais especificados pelas diretivas de imagem de sprite. Além disso, ao lado de cada arquivo CSS processado, o SmartSprites criará um arquivo CSS correspondente com um -sprite sufixo. Os arquivos CSS originais permanecerão inalterados. Para mudar o seu design para sprites CSS, vincule esses arquivos CSS em vez dos originais em seu HTML.

      Para o nosso exemplo, o CSS gerado ficaria semelhante a este:

      #web { width: 17px; height: 17px; background-repeat: no-repeat; background-image: url('../img/mysprite.png'); background-position: left -0px; } #logo { width: 50px; height: 50px; background-repeat: no-repeat; background-position: top right; background-image: url('../img/mysprite.png'); background-position: right -17px; } #main-box { background-repeat: repeat-x; background-position: 5px left; background-image: url('../img/mysprite.png'); background-position: left -64px; }

      Observe que todas as diretivas do SmartSprites foram omitidas no arquivo CSS gerado. Se você ainda vê qualquer um deles no arquivo de saída, isso significa que essas diretivas específicas tiveram alguns erros sintáticos ou semânticos e foram ignoradas. As mensagens de aviso devem ajudá-lo a identificar os problemas.

      Observe também que o SmartSprites atualmente não remove o original background-position propriedades, mas anexa os seus próprios abaixo para o somarem. Seu design pode quebrar se você tiver background-position ou background-image propriedades aparecendo below a linha com a diretiva de referência de sprite da SmartSprite.

  5. Verifique se o seu design ainda parece o mesmo. As possibilidades são, não será imediatamente. Vejo FAQ para algumas dicas.
  6. Sintonize opções globais. O SmartSprites possui várias opções adicionais que você pode especificar na invocação da linha de comando para ajustar ainda mais seus projetos.
    • --root-dir-path: diretório no qual o processamento do SmartSprites deve ser feito, é necessário se css-files não especificado ou se output-dir-path especificado, padrão: não especificado.

      O SmartSprites processará todos os arquivos com o *.css extensão encontrada em root-dir-path ou qualquer subdiretório dele. Para obter um controle mais fino sobre os arquivos CSS processados, veja a opção css-files.

      Se o caminho do diretório raiz fornecido for relativo, ele será resolvido contra o diretório de trabalho atual.

    • --css-files: caminhos dos arquivos CSS para processar, necessários se root-dir-path não especificado, padrão: não especificado.

      O SmartSprites processará todos os arquivos CSS listados usando esta opção. E se css-files deve ser usado em conjunto com output-dir-path, root-dir-path também deve ser especificado para que o SmartSprites possa preservar a estrutura de diretórios encontrada em root-dir-path em output-dir-path. Se root-dir-path e output-dir-path são usados, css-files fora de root-dir-path será ignorado.

      Os caminhos de arquivos CSS relativos fornecidos usando esta opção serão resolvidos em relação ao diretório de trabalho atual. Observe que o SmartSprites não expandirá nenhum curinga (como style/*.css), assume que a expansão é realizada no nível da shell da linha de comando.

      Para especificar a lista de arquivos CSS a processar na tarefa SmartSprites Ant, use uma ou mais coisas aninhadas fileset elementos. Por favor veja o build.xml arquivo no arquivo de distribuição para um exemplo.

    • --output-dir-path: diretório de saída para arquivos CSS processados e imagens de sprite relativas ao CSS, opcional, padrão: não especificado.

      Se um não vazio output-dir-path é especificado, um não vazio root-dir-path também deve ser fornecido. A estrutura do diretório em relação à root-dir-path será preservado no diretório de saída. Por exemplo. se os arquivos CSS estiverem contidos no css/base diretório de root-dir-path, os resultados processados serão escritos para output-dir-path/css/base. Além disso, as imagens de sprite relativas ao CSS serão gravadas no diretório de saída. As imagens Sprite com URLs de documentos-raiz-relativos serão escritas em relação ao document-root-dir-path. Se o output-dir-path o diretório não existe, ele será criado. Se o caminho do diretório de saída fornecido for relativo, ele será resolvido contra o atual diretório de trabalho.

      Você pode deixar o output-dir-path vazio, caso em que os arquivos CSS serão escritos ao lado dos arquivos CSS originais com o css-file-suffix, e as imagens de sprite serão escritas em relação aos arquivos CSS originais. Se você estiver usando um não vazio output-dir-path, você pode querer usar um vazio css-file-suffix.

    • --document-root-dir-path: Documento do caminho da raiz para o documento-raiz-relativo (começando com /) URL de imagem em CSS, opcional, padrão: não especificado.

      Todas as imagens relativas ao documento e a imagem raiz e ao sprite serão tomadas em relação a document-root-dir-path. Também os URLs de sprite relacionados com o documento-raiz serão escritos em relação a document-root-dir-path. Você pode deixar esta propriedade vazia se o CSS usar apenas URLs de imagem relativos ao CSS. Se o caminho do diretório raiz do documento fornecido for relativo, ele será resolvido contra o diretório de trabalho atual.

    • --log-level: Nível de registro de mensagens, opcional, padrão: INFO.

      Mensagens menos importantes do que log-level não será mostrado. O SmartSprites possui 3 níveis de mensagens de log (na ordem crescente de importância):

      1. INFO: mensagens de informação, podem ser ignoradas com segurança
      2. IE6NOTICE: avisos relacionados a possíveis perdas de qualidade ao criar imagens de sprite amigáveis ao IE6, veja também a opção IE6-friendly PNG
      3. WARN: avisos relacionados à sintaxe, IO e problemas de perda de qualidade de processamento de sprite que podem causar que os projetos baseados em sprite convertidos parecem quebrados
    • --sprite-png-depth: Profundidade de cores dos sprites no formato PNG, opcional, padrão: AUTO.

      1. AUTO: A profundidade de cor PNG será escolhida automaticamente. Se a imagem sprite não contém transparências parciais (canal alfa) e tem menos de 256 cores, o PNG8 será usado. Caso contrário, o sprite será salvo no PNG24.
      2. DIRECT: Os sprites PNG sempre serão salvos no formato PNG24. O sprite será salvo no PNG24.
      3. INDEXED: Os sprites PNG sempre serão salvos no formato PNG8. Se a imagem do sprite contiver transparências parciais (canal alfa) ou tiver mais de 255 cores, a perda da qualidade da imagem pode ocorrer e serão emitidos alertas apropriados. Veja também a propriedade cor esponjoso-fosco.
    • --sprite-png-ie6: Permite a geração de imagens de sprite amigáveis ao IE6, opcional, padrão: disabled.

      Se sprite-png-ie6 é especificado, para cada imagem de sprite PNG com transparências parciais (canal alfa) ou mais de 255 cores e quaisquer transparências, o SmartSprites gerará um arquivo PNG8 colorido com cor correspondente para o IE6. Uma regra CSS adicional do IE6 somente será adicionada ao arquivo CSS gerado para garantir que o IE6 (e somente o IE6) use a versão com redução de cor:

      #web { width: 17px; height: 17px; background-repeat: no-repeat; background-image: url('../img/mysprite.png'); -background-image: url('../img/mysprite-ie6.png'); background-position: left -0px; }

      Veja também a propriedade sprite-matte-color.

    • --css-file-encoding: A codificação a assumir para entrada e saída de arquivos CSS, padrão: UTF-8. Para obter a lista de valores permitidos, consulte o lista de codificações suportadas em Java.
    • --css-file-suffix: Sufixo para anexar o nome do arquivo CSS processado, opcional, padrão: -sprite.
  7. Integre o SmartSprites com seus scripts de compilação. SmartSprites vem com uma formiga que executa o processamento de sprite e tem exatamente as mesmas opções que a invocação da linha de comando. Para um exemplo de invocação da tarefa, por favor, veja o build.xml script, cujo process A tarefa lê parâmetros de smartsprites.properties e gera sprites. Observe que, ao contrário da interface da linha de comando, a tarefa Ant resolve todos os caminhos relativos no diretório em que o build.xml O script está localizado.

Maven plugin

Uma SmartSprites Maven plugin está disponível como parte do Projeto Jangaroo. Se o seu projeto usa o Maven, você pode facilmente integrar o processamento do SmartSprites como parte de suas compilações.

Plugin Eclipse

Para invocar SmartSprites diretamente do Eclipse IDE:

  1. Instale o plugin Eclipse SmartSprites de: http://update.bitexpert.de/eclipse/3.5
  2. Clique com o botão direito do mouse em seu arquivo CSS no Project Explorer e escolha External Tools > Generate Spritemap para gerar sprites.

O plugin foi desenvolvido por bitExpert AG. Código fonte do plugin: https://github.com/bitExpert/eclipse-smartsprites.

Perguntas frequentes

  1. Após a conversão para sprites, meu design não se assemelha ao original. O que está errado?. Isso pode acontecer :-) Antes de mais, verifique se as mensagens de aviso do SmartSprites indicam que algumas diretivas foram ignoradas devido a erros sintáticos ou semânticos. Antes de uma investigação mais aprofundada, certifique-se de que não receba avisos.

    Em segundo lugar, certifique-se de que cada diretriz SmartSprites se encaixa inteiramente em uma linha, incluindo o */ seqüência encerrando o comentário. Caso contrário, você pode obter resultados imprevisíveis.

    Em terceiro lugar, como mostrado na seção anterior, o SmartSprites por enquanto não remove o original background-position propriedades, mas anexa os seus próprios abaixo para o somarem. Seu design pode quebrar se você tiver background-position ou background-image propriedades aparecendo abaixo a linha com a diretiva de referência de sprite da SmartSprite. O SmartSprites produz um aviso nesses casos. Se isso acontecer, mova as propriedades primárias antes a diretiva de referência sprite no seu arquivo CSS original e execute o SmartSprites novamente.

    Finalmente, você pode querer verificar algumas Dicas de SmartSprites sobre o Blog de Josh e o excelente CSS sprites notas iniciais publicado por um usuário do SmartSprites no grupo de discussão.

  2. Outras imagens do sprite "show through" em lugares. Por quê?. Isso pode acontecer quando a caixa em que você aplicou uma imagem esgotada é maior que a própria imagem. Nessa situação, outras imagens no sprite que estão abaixo ou à direita também serão visíveis.

    Para corrigir isso, você pode dimensionar a caixa para tornar suas dimensões iguais às dimensões da imagem. Se isso for impossível, use margens de sprite (ou seja, sprite-margin-bottom) para criar um espaço vazio em torno da imagem no sprite, de modo que as outras imagens abaixo (ou à direita) não se mostrem.

  3. Repetir imagens em sprites não funciona. É um bug?. Lembre-se de que as imagens repetidas horizontalmente (background-repeat: repeat-x) deve ser adicionado a um sprite posicionado verticalmente (sprite-layout: vertical), e imagens repetidas verticalmente (background-repeat: repeat-y) deve estar em um sprite colocado horizontalmente (sprite-layout: horizontal). Não há como eles podem trabalhar de outra forma, portanto, dois layouts de imagens de sprite no SmartSprites.
  4. Existe algum exemplo maior de usar o SmartsSprites que eu posso ver? Sim, olhe no test/ real-world-example diretório da distribuição. Este é o design original em que estava trabalhando quando surgi a idéia de SmartSprites.
  5. Existem tutoriais sobre SmartSprites? Sim, você pode encontrá-los no seção de tutoriais.
  6. Encontrei um bug, como posso denunciá-lo? Use o nosso rastreador de problemas.
  7. Você planeja novos recursos para o SmartSprites? Sim, veja o nosso road map para maiores informações.

Histórico de versões

v0.2.13, lançado: abril de 2017

  • Atualizações de dependência.

v0.2.12, lançado: março de 2016

  • Atualizações de dependência.

v0.2.11, lançado: maio de 2015

  • Guava atualizado para a versão 18.

v0.2.10, lançado: junho de 2013

  • Sprite-alignment deve oferecer suporte à opção central (SMARTSPRITES-36, 3 votos, patch contribuído por Artur)

v0.2.9, lançado: abril de 2013

v0.2.8, lançado: fevereiro de 2011, demorou cerca de 10 horas de trabalho

  • Possibilidade de usar o hash MD5 ou o carimbo de horário em qualquer lugar no nome e no caminho da imagem do sprite (SMARTSPRITES-41, 3 votos)
  • Liberando os binários do SmartSprites no repositório central do Maven, mudando para o processo de compilação baseado em Maven (SMARTSPRITES-79)
  • Bugfix: SMARTSPRITES-78

v0.2.7, lançado: janeiro de 2011, demorou cerca de 3 horas de trabalho

v0.2.6, lançado: dezembro de 2009, levou 4 horas de trabalho

v0.2.5, lançado: dezembro de 2009, levou 3 horas de trabalho

v0.2.4, lançado: setembro de 2009, levou 28 horas de trabalho

v0.2.3, lançado: abril de 2009

v0.2.2, lançado: abril de 2009

v0.2.1, lançado: outubro de 2008

  • Ant mais necessário para executar SmartSprites
  • suporte parcial para o !important modificador em background-image declarações, veja SMARTSPRITES-23 para uma discussão mais aprofundada.

v0.2, lançado: agosto de 2008

  • Suporte total para a transparência no GIF, PNG8, PNG24
  • algoritmo de quantificação de cores simples para GIF e PNG8
  • suporte de caminhos de imagem relativos a documentos-raiz-relativos
  • suporte de diretório de saída arbitrário
  • Tarefa de AntSprites Ant

v0.1, lançado: fevereiro de 2008

  • lançamento de incubação

Dependência de Maven

Para usar o SmartSprites em seu software Java, adicione a seguinte dependência ao seu pom.xml:

<dependency> <groupId>com.carrotsearch</groupId> <artifactId>smartsprites</artifactId> <version>0.2.9</version> </dependency>

Os lançamentos de instantâneos estão disponíveis nos repositórios Maven públicos da Sonatype:

<repositories> <repository> <id>sonatype-nexus-public</id> <name>SonaType public snapshots and releases repository</name> <url>https://oss.sonatype.org/content/groups/public</url> <releases> <!-- set to true if you wish to fetch releases from this repo too. --> <enabled>false</enabled> </releases> <snapshots> <enabled>true</enabled> </snapshots> </repository> </repositories>

Versão PHP

For a PHP port of SmartSprites, please Verifique aqui. Você também pode querer verificarOtimizador da Web, que suporta a geração totalmente automática de sprites CSS.

Colaboradores

  • Navtej Sadhal de Redfin: idéias e código inicial para suporte de transparência GIF / PNG8

Suporte de sitessparency com SmartSprites

Se você gostaria de listar seu site com SmartSprites aqui, por favor, avise-me sobre o Grupo de discussão SmartSprites.

Tutoriais

Suporte

Se você tiver dúvidas específicas, problemas ou idéias de recursos para SmartSprites, visite o SmartSprites Grupo de Usuários e Desenvolvedores CSS Sprite Generator.