Re: [css3-background] New use case for background-position-x (&y!)

On Mon, Nov 8, 2010 at 1:24 PM, Brian Manthos <brianman@microsoft.com> wrote:
>> I give my playing card elements class names like "diamonds rank-10", I want
>> to apply background-y depending on suit and background-x depending on
>> rank, using _different_ class names.
>>
>> If I could do this, I'd only need to define 17 rules in my CSS file, instead of a
>> rule for all 52 cards (I've already done this, I just think the 17 rules would look
>> a lot better).
>
> The question/issue is fuzzy to me.  Can you provide a sample showing what you'd like to do, but are prohibited from doing by the spec?

The idea is that, by using an appropriately laid-out spriting image,
you can deliver appropriate backgrounds to elements using less rules.
For example:

.card {
  background-image: url(http://www.example.com/cards.jpg);
  /* cards.jpg is an image containing all 52 card images,
     laid out in a 4x13 grid */
  width: 100px;
  height: 200px;
}

.card.heart { background-position-x: 0; }
.card.diamond { background-position-x: -100px; }
[snip 2 more rules]
.card.ace { background-position-y: 0; }
.card.two { background-position-y: -200px; }
[snip 11 more rules]

Thus, a total of 17 rules are needed to position the backgrounds
appropriately on all 52 types of cards.

Using current CSS, you need 52 different rules, looking like this:

.card.heart.ace { background-position: 0 0; }
.card.heart.two { background-position: 0 -200px; }
[snip 11 more rules]
.card.diamond.ace { background-position: -100px 0; }
.card.diamond.two { background-position: -100px -200px; }
[snip 37 more rules]

So, splitting background-position into -x and -y subproperties doesn't
give you any new abilities, it just makes certain patterns of
background-image spriting require somewhat less code in the
stylesheet.

~TJ

Received on Monday, 8 November 2010 21:44:40 UTC