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
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 :
- IE6 / XP : pas d'interpolation du tout
- IE7 / XP : pas d'interpolation du tout
- Chrome / Mac : interpolation pas terrible, désactivable
- Chrome / XP : interpolation très réussie, désactivable
- IE8 / XP : interpolation très réussie, désactivable
- Firefox / XP : interpolation très réussie, désactivable
- Firefox / Mac : interpolation pas terrible, désactivable
- Safari / Mac : interpolation pas terrible, désactivable
- IE9 / Vista : interpolation très réussie, désactivable
- IE10 / Windows 8 : interpolation parfaite, désactivable
- Firefox / Windows 8 : interpolation parfaite, désactivable
- Chrome / Windows 8 : interpolation très réussie, pas désactivable
- 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 ?)
Partager