W3C home > Mailing lists > Public > www-style@w3.org > June 2012

Re: [css4-background] background-position-x and background-position-y or logical directions

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 25 Jun 2012 14:41:33 -0700
Message-ID: <CAAWBYDCH0uE+3DU4aSMmYLsWh2X-=-A-U-ntCOkuW9FCOKwq0g@mail.gmail.com>
To: fantasai <fantasai.lists@inkedblade.net>
Cc: Florian Rivoal <florianr@opera.com>, "www-style@w3.org" <www-style@w3.org>
On Thu, Jun 21, 2012 at 3:32 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
> On 06/21/2012 07:55 AM, Florian Rivoal wrote:
>> For instance, here is a typical example of how they are used:
>> .icon { background: url(sprite.png) 0 0 no-repeat; }
>> #a { background-position-y: 0; }
>> #b { background-position-y: -30px; }
>> #c { background-position-y: -60px; }
>> .icon:hover { background-position-x: -30px; }
>> .icon:active { background-position-x: -60px; }
>>
>> This can be rewritten with variables:
>> .icon { background: url(sprite.png) var(bg-x, 0) var(bg-y, 0) no-repeat;}
>> #a { var-bg-y: 0; }
>> #b { var-bg-y: -30px; }
>> #c { var-bg-y: -60px; }
>> .icon:hover { var-bg-x: -30px; }
>> .icon:active { var-bg-x: -60px; }
>
>
> If the plan is to solve this use case (spriting), we should do a better job
> than
> using background-position hacks.

I'm with fantasai.  The only use-case I've ever seen for
background-position-x/y is image spriting, but bg-pos is really shitty
for spriting.  The right way is to either use Media Fragments, or come
up with something else in CSS that accomplishes the same thing.

~TJ
Received on Monday, 25 June 2012 21:42:24 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:55 GMT