Marketing de Conteúdo

Como usar Sprites CSS com o modo claro e escuro

APF sprites são uma técnica usada no desenvolvimento web para reduzir o número de HTTP solicitações feitas por uma página da web. Eles envolvem a combinação de várias imagens pequenas em um único arquivo de imagem maior e, em seguida, o uso de CSS para exibir seções específicas dessa imagem como elementos individuais na página da web.

O principal benefício de usar sprites CSS é que eles podem ajudar a melhorar o tempo de carregamento da página de um site. Sempre que uma imagem é carregada em uma página da Web, ela requer uma solicitação HTTP separada, o que pode retardar o processo de carregamento. Ao combinar várias imagens em uma única imagem sprite, podemos reduzir o número de solicitações HTTP necessárias para carregar a página. Isso pode resultar em um site mais rápido e responsivo, especialmente para sites com muitas imagens pequenas, como ícones e botões.

O uso de sprites CSS também nos permite aproveitar o cache do navegador. Quando um usuário visita um site, seu navegador armazena em cache a imagem do sprite após a primeira solicitação. Isso significa que as solicitações subsequentes de elementos individuais na página da Web que estão usando a imagem do sprite serão muito mais rápidas, pois o navegador já terá a imagem em seu cache.

Sprites CSS não são tão populares quanto antes

Os sprites CSS ainda são comumente usados ​​para melhorar a velocidade do site, embora possam não ser tão populares quanto antes. Devido à alta largura de banda, webp formatos, compressão de imagem, redes de entrega de conteúdo (CDN), carregamento lento e cache forte tecnologias, não vemos tantos sprites CSS como costumávamos ver na web... embora ainda seja uma ótima estratégia. É especialmente útil se você tiver uma página que faz referência a várias imagens pequenas.

Exemplo de Sprite CSS

Para usar sprites CSS, precisamos definir a posição de cada imagem individual dentro do arquivo de imagem sprite usando CSS. Isso geralmente é feito definindo o background-image e background-position propriedades para cada elemento na página da Web que usa a imagem sprite. Ao especificar as coordenadas x e y da imagem dentro do sprite, podemos exibir imagens individuais como elementos separados na página. Aqui está um exemplo… temos dois botões em um único arquivo de imagem:

Exemplo de Sprite CSS

Se quisermos que a imagem à esquerda seja exibida, podemos fornecer o div com arrow-left como a classe para que as coordenadas exibam apenas esse lado:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

E se quisermos exibir a seta para a direita, definiremos a classe para nosso div para arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

Sprites CSS para o modo claro e escuro

Um uso interessante disso é com os modos claro e escuro. Talvez você tenha um logotipo ou imagem com texto escuro que não é visível em um fundo escuro. Fiz este exemplo de um botão que tem um centro branco para o modo claro e um centro escuro para o modo escuro.

css sprite claro escuro

Usando CSS, posso exibir o plano de fundo da imagem apropriado com base no fato de o usuário estar usando o modo claro ou o modo escuro:

:root {
  --sprite-image: url('sprite.png');
  --sprite-width: 200px;
  --sprite-height: 400px;
  --sprite-x-light: 0;
  --sprite-y-light: 0;
  --sprite-x-dark: -200px;
  --sprite-y-dark: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sprite-x-light: 200px;
    --sprite-x-dark: 0;
  }
}

.icon {
  width: 32px;
  height: 32px;
  background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}

.icon:hover {
  background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}

Exceção: os clientes de e-mail podem não suportar isso

Alguns clientes de e-mail, como o Gmail, não suportam variáveis ​​CSS, que são usadas no exemplo que forneci para alternar entre os modos claro e escuro. Isso significa que você pode precisar usar técnicas alternativas para alternar entre diferentes versões da imagem do sprite para diferentes esquemas de cores.

Outra limitação é que alguns clientes de e-mail não suportam certas propriedades CSS que são comumente usadas em sprites CSS, como background-position. Isso pode dificultar o posicionamento de imagens individuais no arquivo de imagem sprite.

Douglas Karr

Douglas Karr é CMO de AbrirINSIGHTS e o fundador da Martech Zone. Douglas ajudou dezenas de startups de MarTech bem-sucedidas, auxiliou na due diligence de mais de US$ 5 bilhões em aquisições e investimentos da Martech e continua a auxiliar empresas na implementação e automatização de suas estratégias de vendas e marketing. Douglas é um especialista e palestrante em transformação digital e MarTech reconhecido internacionalmente. Douglas também é autor publicado de um guia para leigos e de um livro sobre liderança empresarial.

Artigos Relacionados

Voltar ao topo botão
Fechar

Adblock detectado

Martech Zone é capaz de fornecer a você esse conteúdo sem nenhum custo porque monetizamos nosso site por meio de receita de anúncios, links de afiliados e patrocínios. Agradeceríamos se você removesse seu bloqueador de anúncios ao visualizar nosso site.