- From: fantasai <fantasai.lists@inkedblade.net>
- Date: Thu, 21 Jun 2012 15:32:14 -0700
- To: Florian Rivoal <florianr@opera.com>
- CC: "www-style@w3.org" <www-style@w3.org>
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.
~fantasai
Received on Thursday, 21 June 2012 22:32:45 UTC