Como usar Sprites CSS com o modo claro e escuro

CSS 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 lentoe 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:

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.

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.