Sprites CSS, c'est fini ?

[Sergejack]

Bonjour.

Vous savez sans doute ce que sont les sprites css mais pour rappel, c'est le fait de réunir plusieurs images en une seule afin de n'avoir à charger que cette image plutôt que toutes (un peut comme une bobinne de film qui contient toutes les images est mise en place plus facillement que X Diapositives).
Le problème qui apparait aujourd'hui, c'est que de plus en plus de navigateur dans leur grand soucis d'être zoulis font de l'antialasing sur les images (entendez par là que les images sont rendues plus floues) et ce principallement lorsque l'image est affichée dans un format plus grand que celui d'origine.
Le résultat est que vos images d'origines peuvent se "baver" les unes sur les autres.

Pour moi, cette "amélioration" de la zoulitude est une énorme boulette qui met de la pagaille dans l'approche Sprite CSS pourtant toujours louangée (Google, Yahoo, etc...).

Qu'en pensez-vous ?

[transgohan]

Aurais-tu une liste de navigateur faisant ou ne faisant pas l'anti-aliasing ? Car pour ma part j'utilise les sprites de temps à autres mais je n'ai encore jamais constaté ce souci que tu souhaites mettre en évidence.

[jpvincent]

il faut que tu nous expliques cette idée d'antialising : je comprends qu'il faille gommer les pixels d'une image aggrandie, et j'imagine que chaque combinaison OS / navigateur / moteur de rendu d'image doit avoir sa propre sauce, mais :

1. ça ne m'a jamais gêné, à tout le moins je ne l'ai jamais remarqué
2. les sprites CSS s'utilisent en images de background CSS, ce qui veut dire qu'elles ne sont pas zoomable. Comment tu te débrouilles pour voir tes sprites plus gros ?

si tu peux fournir un exemple et nous dire quels OS / Navigateur /image tu utilises pour voir ça

[Sergejack]

Envoyé par jpvincent

il faut que tu nous expliques cette idée d'antialising : je comprends qu'il faille gommer les pixels d'une image aggrandie, et j'imagine que chaque combinaison OS / navigateur / moteur de rendu d'image doit avoir sa propre sauce,

J'ai fait des tests sur IE9, FF6 et Chrome (je ne oeux plus jurer avoir testé Safari 5) et les résultats étaient (semblaient ?) les même.
J'imagine qu'il y a une méthode d'interpolation (bicubique ?) qui s'impose comme un standard.

Envoyé par jpvincent

mais :

1. ça ne m'a jamais gêné, à tout le moins je ne l'ai jamais remarqué
2. les sprites CSS s'utilisent en images de background CSS, ce qui veut dire qu'elles ne sont pas zoomable. Comment tu te débrouilles pour voir tes sprites plus gros ?

2. Moi je travail souvent en flexible layout où chaque taille est relative.
Il suffit d'utiliser IMG avec top, left, clip pour faire du sprite CSS en attendant que CSS3 soit le standard (background dimensionnable).
1. Ce n'est effectivement pas visible à échelle 1/1.


Par ailleurs, certains navigateurs ont prévus la possibilité de désactiver le filtrage (la bonne pratique serait l'inverse).

IE: ms-interpolation-mode: nearest-neighbor;
FF : image-rendering: -moz-crisp-edges;

Il n'y en a pas (que je connaisse) pour chrome.

Je vais voir si je peux faire une page de démo rapide.

EDIT: voici un lien vers une Demo

[transgohan]

Ah effectivement je vois le souci (FF 7.0).
Cependant ça me choque de voir qu'en fait tu colles tes éléments. On ne devrait pas retrouver le problème en séparant les différents éléments du sprite d'une certaine distance. Voilà peut être pourquoi je ne suis jamais tombé sur le problème jusqu'à maintenant.
Cela dit, je n'ai jamais utilisé les sprites dans des layouts extensibles... Ne peux-tu pas jouer sur le background repeat plutôt que son extensibilité ?

[Sergejack]

Envoyé par transgohan

Ah effectivement je vois le souci (FF 7.0).
Cependant ça me choque de voir qu'en fait tu colles tes éléments. On ne devrait pas retrouver le problème en séparant les différents éléments du sprite d'une certaine distance.

Non, en fait la distance n'a rien à voir.
D'ailleurs, encore heureux car ce serait la fin (sic !) si en fonction de l'emplacement d'une image (clipée ou non) elle apparaisse différement.

Si tu fais allusion à de la transparence, celle-ci aussi participe et contribue à l'interpolation (ce qui est par ailleurs normal voire inéluctible).

Envoyé par transgohan

Voilà peut être pourquoi je ne suis jamais tombé sur le problème jusqu'à maintenant.
Cela dit, je n'ai jamais utilisé les sprites dans des layouts extensibles... Ne peux-tu pas jouer sur le background repeat plutôt que son extensibilité ?

À moins d'utiliser CSS dans ce qu'il a de plus récent (et donc de peu supporté), les propriétés du background ne permette pas le zoom en quelque manière que ce soit.

[jpvincent]

Envoyé par Sergejack

2. Moi je travail souvent en flexible layout où chaque taille est relative.
Il suffit d'utiliser IMG avec top, left, clip pour faire du sprite CSS en attendant que CSS3 soit le standard (background dimensionnable).

Je n'avais jamais pensé à utiliser clip car je croyais que ça ne marchait qu'à partir de IE8, mais je me rends compte que le support est bon à partir de IE6. Le désavantage de clip, c'est qu'il faut que l'élément soit positionné en absolu, mais j'imagine que c'est une habitude à prendre. L'autre désavantage, c'est pour l'accessibilité : tu ré-introduies plein d'images en balise img qui ne sont là que pour la déco, idéalement il faudrait les laisser dans CSS ou au moins mettre l'attribut alt vide.
Ca c'est pour répondre à ta première remarque sur le fait que le spriting est recommandé alors que c'est moche : c'est parce le spriting s'entendait avec des background-images, qui ne posent pas ce problème

Sinon à propos du support navigateur :

Envoyé par Sergejack

FF : image-rendering: -moz-crisp-edges;
Il n'y en a pas (que je connaisse) pour chrome.

Ta démo marche avec Chrome, il interprète la version

Code :

image-rendering: -moz-crisp-edges

Il existe aussi un autre mode pour IE, c'est bicubic.

Envoyé par Sergejack

voici un lien vers une Demo

Merci pour cette démo, très utile. Du coup j'ai lancé toutes mes machines virtuelles pour tester les environnements :

1. IE6 / XP : pas d'interpolation du tout
2. IE7 / XP : pas d'interpolation du tout
3. Chrome / Mac : interpolation pas terrible, désactivable
4. Chrome / XP : interpolation très réussie, désactivable
5. IE8 / XP : interpolation très réussie, désactivable
6. Firefox / XP : interpolation très réussie, désactivable
7. Firefox / Mac : interpolation pas terrible, désactivable
8. Safari / Mac : interpolation pas terrible, désactivable
9. IE9 / Vista : interpolation très réussie, désactivable
10. IE10 / Windows 8 : interpolation parfaite, désactivable
11. Firefox / Windows 8 : interpolation parfaite, désactivable
12. Chrome / Windows 8 : interpolation très réussie, pas désactivable
13. Safari / iOS : interpolation pas mal, pas désactivable

Bref, cela semble dépendre de l'OS :
- c'est mauvais sur Mac,
- bon sur tous les Windows depuis XP, tous navigateurs, et sur iOS
- parfait sur Windows 8, sauf pour Chrome
- pas géré du tout par IE6 et IE7 (essaye avec bicubic ?)

[Sergejack]

Je suis sur 7 (64bits) et ma version de Chrome est à jour (15.0.874.106).
Contrairement à vous, quand je clique sur le boutton "Crisp" chrome ne fait rien.
Auriez-vous une idée ?

Sinon, je ne vois pas le problème à utiliser des balises IMG plutôt qu'une autre.
Le seul soucis (important, certes) c'est que l'url de l'image est au niveau balise et non CSS.
Mais ce n'est pas une cata (à défaut de mieux on fait avec ce qu'on a).

Si quelqu'un a une autre méthode pour faire du Sprite CSS flexible, il a toute mon attention.

En attendant, cette méthode sinon efficace est belle et bien compromise par l'interpolation.

[transgohan]

Envoyé par Sergejack

Sinon, je ne vois pas le problème à utiliser des balises IMG plutôt qu'une autre.

L'accessibilité, un mal-voyant aura une information inutile au travers de son logiciel (peut être pas si le alt est vide ?) alors que si c'était une div avec background cela ne le gênerai pas.
La balise img est censée être utilisée pour apporter une information, chose que tu ne fais pas dans ton utilisation puisque tu l'utilises pour la structuration graphique de ton site.

[Sergejack]

Envoyé par transgohan

L'accessibilité, un mal-voyant aura une information inutile au travers de son logiciel (peut être pas si le alt est vide ?) alors que si c'était une div avec background cela ne le gênerai pas.
La balise img est censée être utilisée pour apporter une information, chose que tu ne fais pas dans ton utilisation puisque tu l'utilises pour la structuration graphique de ton site.

Une icône est une information.
Donc si vous avez cette considération pour la navigation par des aveugles (c'est louable) "ma" méthode doit vous intéresser (libre à vous d'en exclure les usages purement esthétiques).

Personnellement, je ne pense pas mes sites pour garantir leur accessibilité auprès des non-voyants (par contre je les fais généralement bilingue au minimum).

[jpvincent]

Envoyé par transgohan

peut être pas si le alt est vide ?

Oui, dans les recommandations d'accessibilité, il suffit de mettre un alt="" pour signifier qu'on peut ignorer cette image. Lorsqu'il n'y a pas d'alt défini, certains lecteurs lisent le nom de l'image.

Envoyé par Sergejack

Je suis sur 7 (64bits) et ma version de Chrome est à jour (15.0.874.106).
Contrairement à vous, quand je clique sur le boutton "Crisp" chrome ne fait rien.

Je n'ai pas testé ce couple car je n'avais pas de Seven sous la main, mais même comportement avec Chrome sur Windows 8, la balle est dans leur camps, il ne te reste plus qu'à leur ouvrir un bug

[Sergejack]

Envoyé par jpvincent

Je n'ai pas testé ce couple car je n'avais pas de Seven sous la main, mais même comportement avec Chrome sur Windows 8, la balle est dans leur camps, il ne te reste plus qu'à leur ouvrir un bug

Tu es sûr ?
Le comportement dont moi je parle (celui qui m'intéresse) c'est le non flou (ou filtrage bilinéaire).

[jpvincent]

d'après mes tests sur chrome windows 8 et safari iOS, le flou n'est pas désactivable. Je n'ai pas de Seven pour tester