Friday, October 31, 2008

background-position-x & background-position-y

I sent the following to the w3c CSS Group:

The background-position-x and background-position-y properties have been in Internet Explorer for a long time now. However they haven't made it into the CSS spec, despite their usefulness. While you can say that the regular background-position property is suitable, without being able to specify the x and y positions separately usage can get excessively verbose when using sprites.

Take the following example:

#tabs li a{background: url(tabs_sprite.png);}

li#slide_2 a{background-position: -122px 0;}
li#slide_3 a{background-position: -244px 0;}
li#slide_4 a{background-position: -366px 0;}
li#slide_1.current a{background-position: 0 -41px;}
li#slide_2.current a{background-position: -122px -41px;}
li#slide_3.current a{background-position: -244px -41px;}
li#slide_4.current a{background-position: -366px -41px;}
li#slide_1 a:hover{background-position: 0 -82px;}

li#slide_2 a:hover{background-position: -122px -82px;}
li#slide_3 a:hover{background-position: -244px -82px;}
li#slide_4 a:hover{background-position: -366px -82px;}

Could be simplified to:

#tabs li a{background: url(tabs_sprite.png);}

li#slide_2 a{background-position-x: -122px;}
li#slide_3 a{background-position-x: -244px;}
li#slide_4 a{background-position-x: -366px;}
#tabs li.current a{background-position-y: -41px;}

#tabs li a:hover{background-position-y: -82px;}

I feel that one of the big goals for CSS3 would be to ease the use of sprites as they can improve performance of pages by a lot. Being able to load up all the UI images into a single file would decrease download time significantly and re-skinning a site would be as simple as changing a single reference and modifying a single image file.

I was actually surprised to learn it's not in the CSS3 spec as it eases spriting by quite a bit.

Browser Implementation This should be trivial since the property pretty straight-forward and two browsers already support it: IE5+ & Safari 1.2+


fantasai said...

I don't remember receiving this comment. Did you post it to www-style, as requested in ?

Jethro Larson said...

@fantasai: I sent it to the mailing list. I got a reply saying "message has been forwarded to the list maintainer for manual processing"

HighCa said...

suck w3c.
we need background-position-x and -y!!