Une introduction à la signification, aux avantages et aux inconvénients des Sprites CSS pour la mise en page CSS

Technologie CSS Sprites Dès 2005, Dave Shea, le propriétaire de CSS Zengarden, a publié une explication détaillée de cette technologie dans ALA.

À l'origine, elle n'était diffusée que parmi les lecteurs CSS comme méthode de production. Plus tard, 14 règles pour des sites Web à chargement plus rapide ont été publiées et ont été diffusées parmi les techniciens. La première règle, Faire moins de requêtes HTTP, mentionnait les sprites CSS. Ainsi, ce petit gobelin est devenu populaire, et même des outils de génération en ligne sont apparus, ce qui était imparable. Récemment, de nombreux blogs nationaux ont mentionné les CSS Sprites. L'exemple le plus célèbre est celui des animations sous google.co.kr. Dans la dernière version de YUI, les Sprites CSS sont également utilisés. Presque toutes les images décoratives CSS sont couvertes par une image 40×2000. Facebook, un site de réseautage social majeur, a récemment utilisé une image 22×1150 pour couvrir toutes les icônes. Soudain, les CSS Sprites étaient partout.

Comment fonctionnent les sprites CSS

On sait que depuis la révolution CSS, le HTML a tendance à être sémantique. En général, le contenu décoratif n'est plus écrit en balises mais la tâche de rendu est confiée au CSS. L'interface graphique est colorée et indispensable pour la décoration avec diverses belles images. La méthode de production dans la nouvelle ère consiste à remplir le HTML avec divers hooks, puis à laisser CSS le gérer.

Lorsque des images doivent être utilisées, cela est actuellement réalisé grâce à l'attribut CSS background-image combiné avec background-repeat, background-position, etc. (Digression : Pourquoi dois-je retirer l'étape actuelle, car si le navigateur prend en charge le contenu à l'avenir , méthode de mise en œuvre supplémentaire). Notre protagoniste est, vous devez l'avoir deviné, en position d'arrière-plan. En ajustant la valeur de background-position, l’image d’arrière-plan peut apparaître devant vous sous différentes apparences. En fait, l’apparence générale de l’image n’a pas changé. En raison du changement de position de l’image, vous ne voyez que ce que vous devriez voir. C'est comme la date sur une montre. Vous la voyez comme 21 aujourd'hui et 22 demain parce que sa position a augmenté d'un espace. Vous savez donc probablement que les CSS Sprites ne peuvent généralement être utilisés que dans une boîte (box) de taille fixe, afin que les parties qui ne doivent pas être vues puissent être bloquées.

Utilisons le sprite.png de YUI comme exemple. Si nous avons un tel morceau de code, max représente la maximisation et min représente la minimisation. Nous devons les faire correspondre avec de belles images correspondantes (afin que notre site Web soit attrayant) :

Les deux classes utilisent la même image :

Nous voyons un nuage de gris, oui, car nous n'avons pas spécifié la position de l'arrière-plan, qui est par défaut 0 0. Vous pouvez regarder sprite.png Cette position est le bloc gris. D'accord, nous devons trouver les positions du signe plus qui représente la maximisation et du signe moins qui représente la minimisation. Après la mesure, le bouton d'agrandissement est situé à 350 px sur l'axe Y et le bouton de réduction est situé à 400 px sur l'axe Y. Pensez à la façon dont nous pouvons les afficher. Évidemment, nous devons mettre à jour sprite.png, et le code est le suivant :

Cette fois, nous avons réussi !

Avantages des sprites CSS

Nous avons appris auparavant que la raison pour laquelle les CSS Sprites s’essoufflent soudainement est liée à leur capacité à améliorer les performances des sites Web. C’est évidemment l’un de ses grands avantages. Un grand nombre d'images selon la méthode de production ordinaire sont désormais fusionnées en une seule image, ce qui réduit considérablement le nombre de connexions HTTP. Le nombre de connexions HTTP a un impact important sur les performances de chargement du site Internet.

Inconvénients des sprites CSS

Quant à la maintenabilité, c’est généralement une arme à double tranchant. Certaines personnes peuvent l'apprécier et d'autres non, car chaque fois que l'image est modifiée, vous devez supprimer ou ajouter du contenu à l'image, ce qui semble un peu fastidieux. Et calculer la position des images (en particulier des images comportant des milliers de pixels) est également assez désagréable. Bien entendu, sous le slogan de la performance, tout cela peut être surmonté.

Puisque la position de l’image doit être fixée à une valeur absolue, la flexibilité telle que le centre est perdue.

Comme nous l'avons mentionné précédemment, la taille de la boîte doit être limitée avant de pouvoir utiliser les Sprites CSS, sinon cela pourrait interférer avec l'image. Autrement dit, les Sprites CSS ne conviennent pas dans certaines situations où des arrière-plans en mosaïque non unidirectionnels et une mise à l'échelle des pages Web sont requis. La solution de YUI consiste à augmenter la distance entre les images afin de maintenir une mise à l'échelle limitée.

Résumé des sprites CSS

La performance l’emporte sur tout le reste. Les CSS Sprites sont une technologie qui mérite d'être encouragée. Il est particulièrement adapté au FIR, tel que le remplacement d'icônes de taille fixe. Pour maintenir la compatibilité, c'est une bonne idée de garder les parties de l'image à une certaine distance les unes des autres.