28172 sujets

CSS et mise en forme, CSS3

Salut tout le monde, je viens de découvrir les sprites (monstrueux pour l'optimisation des sites et le référencements sans compter la diminution des requêtes au serveur, ...) mias voila j'ai un petit souci:

J'aimerai savoir si le sprite peut se jumelé avec l'attribut repeat?

ex: #nav-menu {
background:url(../images/sprite.png) 0px 500px repeat; /* ou repeat-x d'ailleur */
width:550px;
height:55px;
float: left;

Car sa ne fonctionne absolument pas chez moi.

ps: sprite.png comporte une vingtaine d'images les 1 à la suite des autres, et celle que je souhaite utilisé est en faite 1 image ( largeur : 4px X hauteur : 55px) mais répéter.

Merci de vos réponse ^^
Modifié par Nici (25 Apr 2010 - 13:23)
Ca n'est pas encore possible, pour autant que je sache. Ca viendra peut-être, grâce aux masques (déjà implémentés par le moteur webkit), mais pour le moment, rien d'officiel, disons.
ok merci de la réponse aussi rapide, je vais la re-transférer dans 1 autre *.png, dommage c'est la seule qui ne fonctionne pas rofl 2 requêtes serveurs
Si vraiment ça te préoccupe, tu peux utiliser le cache de ton navigateur pour éviter que ces requêtes ne soient renvoyées à chaque fois. J'avais moi-même parlé de ça dans ce sujet.
Après il existe aussi les connexions persistantes, qui permet d'effectuer plusieurs requêtes pendant une même connexion avec le serveur. Renseigne-toi là-dessus.
Nici a écrit :
monstrueux pour l'optimisation des sites et le référencements sans compter la diminution des requêtes au serveur, ...)

La diminution des requêtes au serveur, c'est ça justement le principal gain pour les performances client. Je sais pas à quoi d'autre tu fais référence quand tu dis «optimisation des sites».
Quant au référencement, strictement aucun rapport avec les Sprites CSS. Smiley ohwell

Nici a écrit :
J'aimerai savoir si le sprite peut se jumelé avec l'attribut repeat?

Oui, c'est une image, donc tu peux l'utiliser en background avec la background-repeat de ton choix.
Le problème, c'est que comme l'image contient différents éléments que tu ne souhaites pas montrer, un background-repeat risque de poser problème.
Si tu fais un repeat dans une seule direction, par exemple un repeat-x, tu peux par exemple faire une image de sprite avec toutes les images de fond que tu utilise répétées en horizontal. Ça peut te donner une image de 20px de large pour 2000px de haut, par exemple.

En passant, deux évidences que je rappelle à tout hasard (les trous de mémoire, ça arrive):
1. http://www.arespritesaccessible.net/
2. Les hauteurs fixes c'est le mal. Pourquoi ne pas prévoir que ton conteneur puisse faire plus de 55px de haut, ne pas figer la hauteur (utiliser min-height plutôt que height), et prévoir une image de fond suffisamment haute, ou combinée à un background-color?
phpdoesnotcare a écrit :
Ca n'est pas encore possible, pour autant que je sache. Ca viendra peut-être, grâce aux masques (déjà implémentés par le moteur webkit), mais pour le moment, rien d'officiel, disons.

Combiner sprites et masques pour répéter des portions en background-repeat... d'une, je suis pas sûr que ça puisse marcher comme ça, de deux c'est une solution un poil complexe.

Plus simple et déjà supporté par tous les navigateurs actuels (sauf IE7), il y a les data URI. Ça permet d'embarquer les données des images directement comme du texte dans le HTML ou le CSS (ou JavaScript), ce qui rend les sprites CSS plus ou moins obsolètes.