est CSS-Sprite bonne technique? J'ai lu ses pros à http://spriteme.org/ et j'ai aussi vu beaucoup de questions sur les sprites CSS ici à Stackoverflow.
quels sont ses inconvénients?
fonctionnera-t-il dans tous les navigateurs comme revendiqué sur leur site?
6 Réponses :
C'est une excellente technique, mais vous devez être vraiment soigné car vous le faites afin que cela fonctionne correctement dans chaque navigateur.
Cela peut être fait et constitue une bonne optimisation de la pointe, mais comme toujours, faites attention à ce que cela fonctionne dans IE, Firefox et Chrome pendant que vous le faites.
Les inconvénients sont qu'il ne peut pas être utilisé toujours et vous devez vous en tenir au dénominateur le moins commun pour le support CSS de navigateur croisé.
Oui, c'est une bonne technique.
Vous pouvez réduire le nombre de demandes HTTP et il s'agit d'une technique d'optimisation de la page.
la première règle de
Meilleures pratiques pour accélérer les sites Web de Yahoo
est
Réduire les demandes HTTP
80% du temps de réponse de l'utilisateur final est passé sur le front-end. La plupart de cela le temps est lié au téléchargement de tous les Composants dans la page: Images, feuilles de style, scripts, flash, etc. Réduire le nombre de composants dans tour réduit le nombre d'http Demandes requises pour rendre la page. C'est la clé de pages plus rapides.
sprites CSS sont la méthode préférée Pour réduire le nombre d'images Demandes. Combinez votre fond images en une seule image et utilisez le CSS arrière-plan-image et propriétés de position de fond à Afficher le segment d'image souhaité.
Un moyen de réduire le nombre de Les composants de la page consistent à simplifier la conception de la page. Mais y a-t-il un moyen construire des pages avec un contenu plus riche tout en réalisant une réponse rapide fois? Voici quelques techniques pour réduire le nombre de demandes HTTP, Tout en soutenant toujours une page riche designs.
Lorsque vous devez modifier les dimensions des images à l'intérieur du sprite, vous devez recalculer les décalages des images. Mais je ne pense pas que ce soit un énorme fardeau.
Il est soutenu par presque tous les navigateurs modernes.
C'est aussi un bon article sur les sprites CSS
CSS Sprites: Qu'est-ce qu'ils sont, pourquoi ils sont cool et comment les utiliser
Terminé à droite, cela devrait fonctionner correctement dans tous les navigateurs (même IE6).
Le plus gros conié que je puisse penser, c'est que si vous avez trop d'images dans un sprite et que vous devez modifier les dimensions de l'un d'entre eux, cela peut vous empêcher de changer beaucoup de CSS (depuis les compensations Pour d'autres images changera aussi bien)
Oui, c'est plus difficile à maintenir. Pour quelque chose qui ne change pas beaucoup c'est bon.
Cela a fonctionné pour IE 6 Safari Opera 8+ et FF2 +. Vous devriez lire ceci:
Il explique comment gif (et autres fichiers d'image) sont compressés. Par exemple, affichant les mêmes données dans "lignes" au lieu de "colonnes" réduit considérablement l'utilisation de l'espace.
En outre, vous préchargez toutes les images et il n'y a pas de retard si vous échangez des images.
Autre Plus est que vous pouvez utiliser un sprite pour une conception "rouge" et un autre sprite pour un design "bleu".
Cependant, il y a un désavantage :
La plupart des navigateurs cachent les sprites d'image.
Donc, vous pourriez rencontrer des problèmes lorsqu'il s'agit de mettre à jour le sprite.
La mise en cache sera un problème avec une image et non seulement des sprites d'image.
Vous pouvez changer le nom de fichier (la version it?) Pour vaincre ce problème de mise en cache.
Mais dans certaines images de navigateur sont rechargées sur les images de rafraîchissement, mais ne sont pas. Un moyen simple d'obtenir un obstacle ceci utilise URL (my_sprite.png? V1). Donc, vous n'avez pas à renommer le fichier et que le navigateur est obligé de le recharger.
Un inconvénient que j'ai rencontré est que les sprites CSS ne semblent pas imprimer correctement dans de nombreux navigateurs
Bien sûr, car cela permet d'économiser beaucoup de demande HTTP, qui est très important pour votre temps de chargement de votre site Web.
Consultez cette page:
http://www.tatutorialrepublic.com/css-torial/css- sprites.php
Il a une excellente explication et tout ce que vous devez savoir sur le Sprite CSS.
Je veux ajouter une question: est-ce difficile à mettre en œuvre et comment de la maintenabilité?
La mise en œuvre et la maintenance seront plus difficiles par rapport aux images normales, car vous devez calculer les compensations manuellement. Mais je pense qu'il y a des générateurs Sprite CSS pour réduire les frais généraux de le faire manuellement.