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:
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.