 Les css sprites? me direz-vous! filiale de sprite? Non, juste une pratique pas très connu des css, langages de mise en page associée au xhtml (lui-même langage de balise web). Si les sprites sont une technique pas tout à fait nouvelle, elles sont néanmoins assez innovantes et permettent d'alléger vos pages et de réduire le nombre de requêtes.
Historique et utilité
Apparues pour la première fois avec les premiers jeux vidéos, Un sprite est dans le jeu vidéo un élément graphique qui peut se déplacer sur l'écran. En principe, un sprite est en partie transparent, et il peut être animé (c’est-à-dire qu'il est formé de plusieurs bitmaps qui s'affichent les uns après les autres). Le fond de l'écran constitue généralement le décor et les sprites sont les personnages et les objets qui se superposent au fond d'écran et qui se déplacent. Un sprite peut parfois aussi passer derrière un élément du fond d'écran.
Transposée dans le web, la technique est presque pareille. En somme, elle consiste à ranger tous les éléments graphiques (images, bouton, fond et arrière plan...) sur un même fichier, et à faire appel grâce à la propriété css: background-position.
Supposons que nous avons mis sur un même fichier un bonhomme, et une balle de foot. Pour afficher la balle de foot sur notre site, il faudra ajuster la partie de l'image où se trouve la balle de foot en jouant sur les dimensions de l'image avec background-position
Fini le découpage?
Le découpage de fichier, qui lui consiste, à partir d'un .psd (fichier photoshop) en général, à obtenir une page html/css en effectuant différents découpages, reste de loin la technique la plus répandue en matière d'intégration web. En effet, malgré l'innovation des sprites, les développeurs sont confrontés, pour les fichiers complexes, à des problèmes de mesure de dimensions. On ne peut donc prédire la fin immédiate du découpage html...
( 616 lecteurs) |
