W3C home > Mailing lists > Public > www-style@w3.org > November 2010

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 8 Nov 2010 13:43:41 -0800
Message-ID: <AANLkTinqLf66P25Bu-vHjw3BRsvJHX__rPJ7r_WCHOY3@mail.gmail.com>
To: Brian Manthos <brianman@microsoft.com>
Cc: Lee Kowalkowski <lee.kowalkowski@googlemail.com>, "www-style@w3.org" <www-style@w3.org>
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

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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:40 UTC