Cómo usar sprites CSS con modo claro y oscuro

CO Los sprites son una técnica utilizada en el desarrollo web para reducir el número de HTTP solicitudes realizadas por una página web. Implican combinar múltiples imágenes pequeñas en un solo archivo de imagen más grande y luego usar CSS para mostrar secciones específicas de esa imagen como elementos individuales en la página web.

El beneficio principal de usar sprites CSS es que pueden ayudar a mejorar el tiempo de carga de la página de un sitio web. Cada vez que se carga una imagen en una página web, se requiere una solicitud HTTP por separado, lo que puede ralentizar el proceso de carga. Al combinar varias imágenes en una sola imagen de sprite, podemos reducir la cantidad de solicitudes HTTP necesarias para cargar la página. Esto puede resultar en un sitio web más rápido y con mayor capacidad de respuesta, especialmente para sitios con muchas imágenes pequeñas como íconos y botones.

El uso de sprites CSS también nos permite aprovechar el almacenamiento en caché del navegador. Cuando un usuario visita un sitio web, su navegador almacenará en caché la imagen del sprite después de la primera solicitud. Esto significa que las solicitudes posteriores de elementos individuales en la página web que utilizan la imagen de sprite serán mucho más rápidas, ya que el navegador ya tendrá la imagen en su caché.

Los sprites CSS no son tan populares como antes

Los sprites CSS todavía se usan comúnmente para mejorar la velocidad del sitio, aunque es posible que no sean tan populares como antes. Debido al alto ancho de banda, webp formatos, compresión de imagen, redes de entrega de contenido (CDN), carga lenta y almacenamiento en caché fuerte tecnologías, no vemos tantos sprites CSS como solíamos ver en la web… aunque sigue siendo una gran estrategia. Es especialmente útil si tiene una página que hace referencia a una multitud de imágenes pequeñas.

Ejemplo de sprites CSS

Para usar sprites CSS, necesitamos definir la posición de cada imagen individual dentro del archivo de imagen del sprite usando CSS. Esto normalmente se hace configurando el background-image y background-position propiedades para cada elemento en la página web que usa la imagen sprite. Al especificar las coordenadas x e y de la imagen dentro del sprite, podemos mostrar imágenes individuales como elementos separados en la página. Aquí hay un ejemplo... tenemos dos botones en un solo archivo de imagen:

Si queremos que se muestre la imagen de la izquierda, podemos proporcionar el div con arrow-left como la clase para que las coordenadas solo muestren ese lado:

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

Y si deseamos mostrar la flecha hacia la derecha, estableceríamos la clase para nuestro div en arrow-right.

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

Sprites CSS para modo claro y oscuro

Un uso interesante de esto es con los modos claro y oscuro. Tal vez tenga un logotipo o una imagen que tenga un texto oscuro que no se vea sobre un fondo oscuro. Hice este ejemplo de un botón que tiene un centro blanco para el modo claro y un centro oscuro para el modo oscuro.

Usando CSS, puedo mostrar el fondo de la imagen apropiado en función de si el usuario está usando el modo claro o el modo oscuro:

: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: Es posible que los clientes de correo electrónico no admitan esto

Algunos clientes de correo electrónico, como Gmail, no admiten variables CSS, que se utilizan en el ejemplo que proporcioné para cambiar entre los modos claro y oscuro. Esto significa que es posible que deba usar técnicas alternativas para cambiar entre diferentes versiones de la imagen de sprite para diferentes esquemas de color.

Otra limitación es que algunos clientes de correo electrónico no admiten ciertas propiedades de CSS que se usan comúnmente en los sprites de CSS, como background-position. Esto puede dificultar la colocación de imágenes individuales dentro del archivo de imagen de sprite.