Sprite et no-repeat

Bonjour à tous,

Je vois souvent que les utilisations de sprite sont effectués avec un no-repeat :

.mon_image {
    background: url(monSprite.png) no-repeat top left;
    height: 20px;
    width: 20px;
}

Mais je me demandais si le "no-repeat" était bien nécessaire ? Etant donné que la zone d'affichage de l'image est définie, mettre un no-repeat ou non affichera exactement la même chose (à part dans certains cas évidents, si on est à la bordure du sprite, ou autre).

Serait-il donc inutile, et donc à enlever pour gagner quelques octets et une petite seconde pour l'intégrateur ?
Ou bien la présence du no-repeat, même s'il elle n'est pas visible, joue au niveau des ressources / temps d'éxécution ?

Merci d'avance pour vos réponses !

Les height et width ne font que donner une taille/limite à l'image monSprite.png qui se répètera dans tous les cas, sauf si il y a un no-repeat.
Modifié par darktemplar (09 Mar 2010 - 11:18)

Les height et les width donnent une taille, mais justement le background, avec ou sans no-repeat, va remplir uniquement cette taille, donc je ne trouve pas ça évident que l'image se répète invisiblement sur toute la page !

Si ce que tu dis est vrai, ça veut dire que si on remplit un petit div d'un background, ce background est chargé sur la taille de toute la page en entière, mais est affiché juste à l'emplacement du div? Cela me parait pas très logique...

La taille définie est la taille du motif qui se répétera si on met pas de no-repeat.

"MallaxOZ" a écrit :
Si ce que tu dis est vrai, ça veut dire que si on remplit un petit div d'un background, ce background est chargé sur la taille de toute la page en entière, mais est affiché juste à l'emplacement du div?

La répétition se fera selon la limite du div parent.

Je te conseil de faire toi même un test pour mieux comprendre.

Comment tester la présence d'un background invisible ???

Comment ça ? je t'ai conseiller de reprendre ce code, de mettre une image de ton choix en background et de faire un test dans le but de mieux comprendre.

Salut,

Vouloir savoir si le background se répète de façon invisible équivaut à peut près à se demander si la lumière reste allumé dans le frigo lorsque la porte est fermée.

Si tu teste et que ton background ne remplit que le carré de 20px par 20px, l'objectif est atteint, c'est tout.

S'agissant d'un sprite, l'image est bien plus grand que 20x20, donc avec no-repeat ou sans, cela affiche exactement la même chose. On s'est surement mal compris quelque part...

Mikachu a écrit :
Salut,

Vouloir savoir si le background se répète de façon invisible équivaut à peut près à se demander si la lumière reste allumé dans le frigo lorsque la porte est fermée.

Si tu teste et que ton background ne remplit que le carré de 20px par 20px, l'objectif est atteint, c'est tout.

Très juste, c'est comme un frigo. Bien sur de l'extérieur, c'est pareil. Mais si la lumière ne s'éteignait pas lorsque l'on ferme notre frigo, ça poserait un problème ! De l'électricité utilisé pour rien. C'est ça que je demande ici : est-ce que mettre un no-repeat c'est éteindre la lumière du frigo et donc faire des économies de ressources ?

Certes il s'agit surement d'une optimisation très mineure, mais de petites chose en petites choses...
Modifié par MallaxOZ (09 Mar 2010 - 14:04)

le no-repeat sert a compensé les defaut d'un block qui deviendrait plus grand que prévu ... Ie6 par exemple applique les heights et widths comme des valeurs minimales , le font-size peut aussi impliqué chez IE6 une hauteur minimale possible de l'element superieur a celle indiqué via la feuille de style , un element de style inline dans le flux ne peut etre dimensionné et s'adapte a son contenu , etc ...
Il y a de nombreux cas de figure ou le no-repeat ne sert que d'assurance c'est toi qui voit ...
ou pas , et pour ton frigo , désolé ça marchera pas

GC

gc-nomade a écrit :

Il y a de nombreux cas de figure ou le no-repeat ne sert que d'assurance c'est toi qui voit ...

En tout cas, ça ne change rien en terme de performances ?

non , ton image n'est chargé qu'une fois de toute façon ...

Merci !