Carregando...

Image sprites CSS

Optional Advanced acabou de cobrir !important — uma bandeira rara de override. Esta sessão é outro tópico opcional: image sprites. Você os vê em folhas de estilo antigas e em alguns conjuntos de ícones legacy. A ideia é simples: um arquivo de imagem, vários ícones, com background-position escolhendo qual tile aparece numa janela pequena.

Resposta direta

Um image sprite CSS é uma única imagem-folha que guarda vários ícones (ou estados de botão) lado a lado. Cada elemento de UI recebe largura e altura fixas, a mesma background-image, e um background-position que desliza a folha até o tile certo preencher a caixa. Sprites cortavam contagens de requisição na era do «um arquivo por ícone». Em trabalho novo, prefira ícones SVG, SVG inline ou um sistema pequeno de ícones — mantenha sprites quando você conserva uma folha existente ou precisa bater um design legacy.

Por que os sprites existiam

Anos atrás, cada ícone muitas vezes significava outra ida e volta HTTP. Juntar vinte PNGs minúsculos numa folha só era um download e uma entrada de cache. Os navegadores então pintavam «janelas» diferentes nessa folha com CSS. HTTP/2 e o bundling moderno aliviaram essa dor, e ícones vetoriais costumam ficar mais nítidos — mas o padrão de posicionamento ainda é litéracia útil quando você abre CSS antigo.

As três peças

Você precisa de:

  1. Uma folha — p. ex. icons.png com tiles em linha ou grade
  2. Uma caixa — width e height iguais a um tile (muitas vezes com display: inline-block ou um link em bloco)
  3. Um deslocamento — background-position para o tile certo ficar sob a caixa
    background-repeat: no-repeat impede a folha de se repetir. Você não carrega um arquivo por ícone; está recortando por posição.

Primeiro tile numa folha compartilhada

Imagine uma folha em que cada ícone tem 32×32 pixels. O primeiro fica no canto superior esquerdo. A caixa do elemento é 32×32, e o fundo começa em 0 0:

First icon tile from a shared sheet

css 
.icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}

A caixa age como um viewport. Só os 32×32 superiores esquerdos de icons.png ficam visíveis. O resto da folha está lá — apenas cortado pelo tamanho do elemento.

Segundo ícone: deslize a folha

Se o próximo ícone começa 32px à direita, mova o fundo 32px para a esquerda (X negativo). Mesma imagem, mesmo tamanho de caixa, outra janela:

Second icon with a horizontal offset

css 
.icon-home {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}

.icon-search {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: -32px 0;
}

X negativo puxa a folha para a esquerda para o segundo tile preencher a janela. Uma segunda linha de ícones também muda o Y (por exemplo -32px -32px). Meça na sua folha real — não chute offsets de memória.

Hover a partir de outro tile

Conjuntos de botões muitas vezes colocam estados padrão e hover (ou active) na mesma folha. Em :hover, mude só background-position:

Hover state from another sprite tile

css 
.btn-icon {
display: inline-block;
width: 40px;
height: 40px;
background-image: url("btn-sheet.png");
background-repeat: no-repeat;
background-position: 0 0;
}

.btn-icon:hover {
background-position: -40px 0;
}

Sem segundo arquivo de imagem — só outro recorte. Mantenha o tamanho da caixa estável para o controle não saltar.

Hábitos calmos com a folha

Sempre combine a folha com uma caixa explícita e no-repeat. Nomeie classes por papel, não só por conta de pixels:

Named sprite roles and no-repeat

css 
.sprite {
display: inline-block;
background-image: url("icons.png");
background-repeat: no-repeat;
}

.sprite--mail {
width: 24px;
height: 24px;
background-position: 0 -48px;
}

.sprite--bell {
width: 24px;
height: 24px;
background-position: -24px -48px;
}

Documente a grade de tiles num comentário curto (tamanho do tile, ordem das linhas) para o próximo mantenedor não ter de fazer engenharia reversa de números mágicos.

Sprites de então vs ícones de agora

📊 Sprite sheets vs modern icon approaches

Approach Best when Watch out
CSS image sprite (PNG sheet) Legacy UI you must keep; one cached sheet already in the project Raster scales poorly; offsets break if the sheet changes
Inline SVG / SVG sprite Crisp UI icons at any size; easy theming with currentColor Slightly more markup or build setup
Icon font Very old stacks that already ship one Accessibility and ligature quirks; harder to theme than SVG
Separate PNG per icon Rare one-off graphics Many requests on old HTTP/1 connections
Real <img> photos Content images, galleries, product shots Not a job for background-position sprites

As lições de galeria de imagens e imagens responsivas usam <img> de verdade (thumbs flex, object-fit, srcset). Sprites costumam ser chrome decorativo de UI no fundo — não substituto de fotos de conteúdo com alt significativo.

Prefira ícones modernos em UI nova

Para uma interface nova, comece com SVG (inline ou um sistema pequeno de sprite SVG). Você ganha bordas mais nítidas, cores mais simples e sem offsets de pixel frágeis. Só use um sprite PNG clássico quando o pacote de design já for uma folha, ou quando estiver remendando CSS que já depende dela.

When a sprite is the wrong tool

css 
/* Content photo — use <img>, not a sprite crop */
.hero-photo {
max-width: 100%;
height: auto;
}

/* UI chrome — sprite OK only if the sheet already exists */
.toolbar .icon-save {
width: 16px;
height: 16px;
background-image: url("legacy-toolbar.png");
background-repeat: no-repeat;
background-position: -64px 0;
}

Experimente você

  1. Esboce uma fileira de 3 ícones no papel (ou abra um sprite real). Anote a largura do tile (p. ex. 32px).
  2. Crie .icon-a com background-position: 0 0 e uma caixa correspondente.
  3. Adicione .icon-b com -32px 0 (ou o segundo offset real).
  4. Adicione uma regra hover que vá a um terceiro tile sem mudar width/height.
  5. Escreva uma frase num comentário: por que esta folha ainda existe (legacy) ou por que usaria SVG da próxima vez.

Erros comuns

  • Colocar fotos de conteúdo num sprite e perder alt / semântica adequada
  • Esquecer width e height para a folha inteira aparecer ou o recorte não ficar limpo
  • Usar offsets positivos quando precisava deslizar a folha no outro sentido
  • Deixar background-repeat ligado para os tiles se duplicarem na caixa
  • Construir um app novo em sprites PNG por padrão em vez de SVG
  • Copiar offsets de um tutorial sem medir a sua folha

Resumo

  • Um sprite é uma folha; background-position escolhe qual tile preenche uma caixa fixa
  • Historicamente isso reduzia requisições HTTP de muitos ícones pequenos
  • Mantenha no-repeat, tamanhos estáveis e papéis nomeados; documente a grade
  • Prefira SVG (ou similar) em UI nova; conserve sprites para folhas legacy
  • Imagens de conteúdo ficam como <img> real — galerias e imagens responsivas são outro ofício
  • Optional Advanced segue com múltiplas colunas (multi-column)

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 72 de 72
Css Tutorial