- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 8 Nov 2010 13:43:41 -0800
- 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 stylesheet. ~TJ
Received on Monday, 8 November 2010 21:44:40 UTC