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):
Maximizar Minimizar |
Ambas as classes usam a mesma imagem:
.min, .max { largura: 16px; altura:16px; imagem de fundo:url(sprite.png); background-repeat: no-repeat; /*Não queremos que fique lado a lado*/ text-indent:-999em; /*Uma maneira de ocultar texto*/ } |
|