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

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

From: Markus Ernst <derernst@gmx.ch>
Date: Wed, 10 Nov 2010 17:35:38 +0100
Cc: www-style@w3.org, lee.kowalkowski@googlemail.com
Message-ID: <20101110163538.142740@gmx.net>
To: "Tab Atkins Jr." <jackalmage@gmail.com>

-------- Original-Nachricht --------
> Datum: Mon, 8 Nov 2010 13:43:41 -0800
> Von: "Tab Atkins Jr." <jackalmage@gmail.com>

> 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.

Besides the discussion on image spriting being an appropriate use case or not, I think that Lee's actual request is actually not silly. I share his point that it would be consistent to have the possibility to set background position values separately, but I would consider background-position-top, -right, -bottom, and -left properties more appropriate than -x and -y properties, just as for element position, border and whatever.

I do not know whether there are explicit use cases for this, but the background-position property as a shorthand is not really intuitive; I myself have to check a manual every time I need this property, because I always forget the order of the values. So, for some authors, separate properties would make a little thing a little bit easier. 

Thus, in this discussion I would be rather interested in issues like implementation cost, backwards-compatibility and whatever, than in a discussion about the appropriateness of image spriting.
-- 
Neu: GMX De-Mail - Einfach wie E-Mail, sicher wie ein Brief!  
Jetzt De-Mail-Adresse reservieren: http://portal.gmx.net/de/go/demail
Received on Wednesday, 10 November 2010 16:36:28 GMT

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