Marketing de Contenu

Comment utiliser les sprites CSS avec les modes clair et sombre

CSS les sprites sont une technique utilisée dans le développement web pour réduire le nombre de HTTP requêtes effectuées par une page Web. Ils impliquent de combiner plusieurs petites images dans un seul fichier image plus grand, puis d'utiliser CSS pour afficher des sections spécifiques de cette image en tant qu'éléments individuels sur la page Web.

Le principal avantage de l'utilisation des sprites CSS est qu'ils peuvent aider à améliorer le temps de chargement des pages d'un site Web. Chaque fois qu'une image est chargée sur une page Web, elle nécessite une requête HTTP distincte, ce qui peut ralentir le processus de chargement. En combinant plusieurs images en une seule image sprite, nous pouvons réduire le nombre de requêtes HTTP nécessaires pour charger la page. Cela peut se traduire par un site Web plus rapide et plus réactif, en particulier pour les sites comportant de nombreuses petites images telles que des icônes et des boutons.

L'utilisation de sprites CSS nous permet également de tirer parti de la mise en cache du navigateur. Lorsqu'un utilisateur visite un site Web, son navigateur met en cache l'image du sprite après la première demande. Cela signifie que les demandes ultérieures d'éléments individuels sur la page Web qui utilisent l'image sprite seront beaucoup plus rapides puisque le navigateur aura déjà l'image dans son cache.

Les sprites CSS ne sont plus aussi populaires qu'avant

Les sprites CSS sont encore couramment utilisés pour améliorer la vitesse du site, bien qu'ils ne soient peut-être plus aussi populaires qu'avant. En raison de la bande passante élevée, webp les formats, compression d'image, les réseaux de diffusion de contenu (CAN), chargement paresseuxet mise en cache forte technologies, on ne voit plus autant de sprites CSS qu'avant sur le web… bien que cela reste une excellente stratégie. C'est particulièrement utile si vous avez une page qui référence une multitude de petites images.

Exemple de sprite CSS

Pour utiliser des sprites CSS, nous devons définir la position de chaque image individuelle dans le fichier d'image de sprite à l'aide de CSS. Cela se fait généralement en définissant le background-image et background-position propriétés pour chaque élément de la page Web qui utilise l'image-objet. En spécifiant les coordonnées x et y de l'image dans le sprite, nous pouvons afficher des images individuelles en tant qu'éléments séparés sur la page. Voici un exemple… nous avons deux boutons dans un seul fichier image :

Exemple de sprite CSS

Si nous voulons que l'image de gauche soit affichée, nous pouvons fournir la div avec arrow-left en tant que classe afin que les coordonnées n'affichent que ce côté :

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

Et si nous souhaitons afficher la flèche droite, nous définirions la classe de notre div sur arrow-right.

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

Sprites CSS pour le mode clair et sombre

Une utilisation intéressante de ceci est avec les modes clair et sombre. Peut-être avez-vous un logo ou une image contenant du texte sombre qui n'est pas visible sur un fond sombre. J'ai fait cet exemple d'un bouton qui a un centre blanc pour le mode clair et un centre sombre pour le mode sombre.

css sprite clair foncé

À l'aide de CSS, je peux afficher l'arrière-plan de l'image appropriée selon que l'utilisateur utilise le mode clair ou le mode sombre :

: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);
}

Exception : les clients de messagerie peuvent ne pas prendre en charge cette fonctionnalité

Certains clients de messagerie, tels que Gmail, ne prennent pas en charge les variables CSS, qui sont utilisées dans l'exemple que j'ai fourni pour basculer entre les modes clair et sombre. Cela signifie que vous devrez peut-être utiliser des techniques alternatives pour basculer entre différentes versions de l'image du sprite pour différents schémas de couleurs.

Une autre limitation est que certains clients de messagerie ne prennent pas en charge certaines propriétés CSS couramment utilisées dans les sprites CSS, telles que background-position. Cela peut rendre difficile le positionnement d'images individuelles dans le fichier image sprite.

Douglas Karr

Douglas Karr est le directeur marketing de OuvrirINSIGHTS et le fondateur de la Martech Zone. Douglas a aidé des dizaines de startups MarTech à succès, a contribué à la due diligence de plus de 5 milliards de dollars d'acquisitions et d'investissements MarTech, et continue d'aider les entreprises à mettre en œuvre et à automatiser leurs stratégies de vente et de marketing. Douglas est un expert et conférencier de renommée internationale en matière de transformation numérique et de MarTech. Douglas est également l'auteur d'un guide pour les nuls et d'un livre sur le leadership d'entreprise.

Articles Relatifs

Retour à bouton en haut
Fermer

Adblock détecté

Martech Zone est en mesure de vous fournir ce contenu gratuitement car nous monétisons notre site grâce aux revenus publicitaires, aux liens d'affiliation et aux parrainages. Nous vous serions reconnaissants de supprimer votre bloqueur de publicités lorsque vous consultez notre site.