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: fantasai <fantasai.lists@inkedblade.net>
Date: Thu, 21 Jun 2012 15:32:14 -0700
Message-ID: <4FE3A0EE.9000406@inkedblade.net>
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 GMT

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