Uma introdução ao significado, vantagens e desvantagens de CSS Sprites para layout CSS

Tecnologia CSS Sprites Já em 2005, Dave Shea, proprietário do CSS Zengarden, publicou uma explicação detalhada desta tecnologia no ALA.

Originalmente, ele circulou apenas entre os players de CSS como método de produção. Mais tarde, 14 regras para sites de carregamento mais rápido foram publicadas e circularam entre os técnicos. A primeira regra, Faça menos solicitações HTTP, mencionou Sprites CSS. Então esse pequeno duende se popularizou e surgiram até ferramentas de geração online, o que era imparável. Recentemente, muitos blogs nacionais mencionaram CSS Sprites. O exemplo mais famoso são as animações abaixo de google.co.kr. Na versão mais recente do YUI, CSS Sprites também são usados. Quase todas as imagens decorativas CSS são cobertas por uma imagem 40×2000. O Facebook, um importante site de rede social, usou recentemente uma imagem de 22×1150 para cobrir todos os ícones. De repente, CSS Sprites estavam por toda parte.

Como funcionam os Sprites CSS

Sabemos que desde a revolução CSS, o HTML tende a ser semântico. Em geral, o conteúdo decorativo não é mais escrito em tags, mas a tarefa de renderização é entregue ao CSS. A GUI é colorida e indispensável para decoração com diversas fotos lindas. O método de produção na nova era é preencher o HTML com vários ganchos e então deixar o CSS cuidar disso.

Quando imagens precisam ser usadas, isso é feito atualmente através do atributo CSS background-image combinado com background-repeat, background-position, etc. (Digressão: Por que retiro o estágio atual, porque se o navegador suportar conteúdo no futuro , método de implementação adicional). Nosso protagonista é, você deve ter adivinhado, posição de fundo. Ao ajustar o valor da posição de fundo, a imagem de fundo pode aparecer na sua frente em diferentes aparências. Na verdade, a aparência geral da imagem não mudou Devido à mudança na posição da imagem, você vê apenas o que deveria ver. É como a data de um relógio. Você vê como 21 hoje e 22 amanhã porque sua posição subiu uma casa. Então você provavelmente sabe que CSS Sprites geralmente só pode ser usado em uma caixa (caixa) de tamanho fixo, para que as partes que não deveriam ser vistas possam ser bloqueadas.

Vamos usar sprite.png da YUI como exemplo. Se tivermos esse trecho de código, max representa a maximização e min representa a minimização. Precisamos combiná-los com belas imagens correspondentes (para que nosso site possa ser atraente):

Ambas as classes usam a mesma imagem:

Vemos uma nuvem cinza, sim, porque não especificamos a posição de fundo, cujo padrão é 0 0. Você pode olhar em sprite.png Esta posição é o bloco cinza. Ok, precisamos encontrar as posições do sinal de mais que representa a maximização e do sinal de menos que representa a minimização. Após a medição, o botão maximizar está localizado em 350px no eixo Y e o botão minimizar está localizado em 400px no eixo Y. Pense em como podemos exibi-los. Obviamente, precisamos atualizar sprite.png, e o código é o seguinte:

Desta vez conseguimos!

Vantagens dos Sprites CSS

Aprendemos antes que o motivo pelo qual CSS Sprites perdeu força repentinamente está relacionado à sua capacidade de melhorar o desempenho do site. Obviamente, esta é uma de suas grandes vantagens. Um grande número de imagens no método de produção comum agora são mescladas em uma imagem, o que reduz bastante o número de conexões HTTP. O número de conexões HTTP tem um impacto importante no desempenho de carregamento do site.

Desvantagens dos Sprites CSS

Quanto à manutenção, geralmente é uma faca de dois gumes. Algumas pessoas podem gostar e outras não, porque toda vez que a imagem é alterada, é necessário excluir ou adicionar conteúdo à imagem, o que parece um pouco complicado. E calcular a posição das imagens (especialmente imagens com milhares de pixels) também é bastante desagradável. É claro que, sob o lema do desempenho, tudo isto pode ser superado.

Como a posição da imagem precisa ser fixada em um valor absoluto, perde-se flexibilidade como o centro.

Como mencionamos anteriormente, o tamanho da caixa deve ser limitado antes que os CSS Sprites possam ser usados, caso contrário, poderá interferir na imagem. Ou seja, CSS Sprites não são adequados em algumas situações onde são necessários planos de fundo lado a lado não unidirecionais e dimensionamento de páginas da web. A solução da YUI é aumentar a distância entre as imagens para que o dimensionamento limitado possa ser mantido.

Resumo de Sprites CSS

O desempenho supera todo o resto. CSS Sprites são uma tecnologia que vale a pena promover. É especialmente adequado para FIR, como substituição de ícones de tamanho fixo. Para manter a compatibilidade, é uma boa ideia manter partes da imagem a alguma distância umas das outras.