Como usar sprites CSS co modo claro e escuro

CSS os sprites son unha técnica utilizada no desenvolvemento web para reducir o número de HTTP solicitudes realizadas por unha páxina web. Implican combinar varias imaxes pequenas nun único ficheiro de imaxe máis grande e despois usar CSS para mostrar seccións específicas desa imaxe como elementos individuais na páxina web.

O principal beneficio do uso de sprites CSS é que poden axudar a mellorar o tempo de carga da páxina dun sitio web. Cada vez que se carga unha imaxe nunha páxina web, require unha solicitude HTTP separada, o que pode retardar o proceso de carga. Ao combinar varias imaxes nunha única imaxe de sprite, podemos reducir o número de solicitudes HTTP necesarias para cargar a páxina. Isto pode dar lugar a un sitio web máis rápido e sensible, especialmente para sitios con moitas imaxes pequenas como iconas e botóns.

Usar sprites CSS tamén nos permite aproveitar o caché do navegador. Cando un usuario visita un sitio web, o seu navegador almacenará na caché a imaxe do sprite despois da primeira solicitude. Isto significa que as solicitudes posteriores de elementos individuais na páxina web que están a usar a imaxe sprite serán moito máis rápidas xa que o navegador xa terá a imaxe na súa caché.

Os sprites CSS non son tan populares como antes

Os sprites CSS aínda se usan habitualmente para mellorar a velocidade do sitio, aínda que poden non ser tan populares como antes. Debido ao alto ancho de banda, webp formatos, compresión de imaxe, redes de distribución de contidos (CDN), carga preguiceirae caché forte tecnoloxías, non vemos tantos sprites CSS como antes na web... aínda que aínda é unha gran estratexia. É especialmente útil se tes unha páxina que fai referencia a multitude de imaxes pequenas.

Exemplo de Sprite CSS

Para usar sprites CSS, necesitamos definir a posición de cada imaxe individual dentro do ficheiro de imaxe sprite usando CSS. Normalmente, isto faise configurando o background-image background-position propiedades para cada elemento da páxina web que utiliza a imaxe sprite. Ao especificar as coordenadas x e y da imaxe dentro do sprite, podemos mostrar imaxes individuais como elementos separados na páxina. Aquí tes un exemplo... temos dous botóns nun único ficheiro de imaxe:

Se queremos que se mostre a imaxe da esquerda, podemos proporcionar o div arrow-left como a clase, as coordenadas só mostran ese lado:

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

E se queremos mostrar a frecha dereita, estableceriamos a clase para o noso div arrow-right.

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

Sprites CSS para o modo claro e escuro

Un uso interesante deste é cos modos claro e escuro. Quizais teñas un logotipo ou unha imaxe que teña texto escuro que non se ve nun fondo escuro. Fixen este exemplo dun botón que ten un centro branco para o modo claro e un centro escuro para o modo escuro.

Usando CSS, podo mostrar o fondo de imaxe apropiado en función de se o usuario está a usar 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);
}

Excepción: os clientes de correo electrónico poden non admitir isto

Algúns clientes de correo electrónico, como Gmail, non admiten variables CSS, que se usan no exemplo que proporcionei para cambiar entre os modos claro e escuro. Isto significa que pode ter que utilizar técnicas alternativas para cambiar entre as diferentes versións da imaxe de sprite para diferentes esquemas de cores.

Outra limitación é que algúns clientes de correo electrónico non admiten certas propiedades CSS que se usan habitualmente en sprites CSS, como background-position. Isto pode dificultar a colocación de imaxes individuais dentro do ficheiro de imaxe sprite.