Le billet d'un geek by Cédric rey

Ne l’ayant quasiment jamais utilisé, j’étais persuadé que les sous valeur x et y de la propriété background-position existait partout, et surtout valides W3C.
En fait, il n’en est rien. Et sur ce coup, c’est Firefox qui ne les prend pas en compte. Je sais que ces propriétés sont le fruit d’IE, qui aurait mieux fait de se grouiller à implémenter CSS2 plus vite, mais elles m’auraient permis :
1/ de faciliter grandement l’écriture de mon projet top secret au niveau CSS
2/ de m’éviter 1h de boulot sous photoshop pour l’alignement de sprite… pour rien.

On ne le voit pas comme ça, mais elles peuvent être utile dans le cas de sprites. Admettons que vous utilisez le même positionnement horizontale pour plusieurs classes dans différents cas (sprite alignée verticalement). Il vous suffit donc d’aligner sur Y selon la classe, et sur X selon le cas (enfin, quand je dis cas, c’est aussi une classe…).
Ok, j’explique cela aussi bien qu’IE6 gérait le PNG transparent…

Pour comprendre, un exemple plus parlant :
.papa, .maman, .enfant {background: transparent url(famille.png) no-repeat left top;}
.papa { background-position-y : 0;
}
.maman { background-position-y : -50px;
}
.enfant { background-position-y : -100px;
}

.debout { background-position-x : 0;
}
.assis { background-position-x : -50px;
}
.couche { background-position-x : -100px;
}

En 6 déclarations légères, vous gérez déjà 9 cas possible (3²). Et cela augmente exponentiellement.
Sans cela, ce qui est la cas aujourd’hui, vous allez devoir vous taper chaque cas possible : .papa.debout (avec les 2 valeurs X et Y), .papa.assis, ainsi de suite…

Aller, je vais donc multiplier ma CSS par 3, puis ensuite 4,5 etc. au fur de mon avancement… Bref, super pour la bande passante…