- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 25 Jun 2012 14:41:33 -0700
- 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 UTC