Re: Background position

On Wed, Jun 17, 2009 at 8:16 AM, Sophie<sophie.gousset@laposte.net> wrote:
>
>
> Bert Bos wrote:
>> On Monday 18 May 2009, Henrik Hansen wrote:
>>> Correct me if I'm wrong, but didn't we discuss this recently. If so
>>> what was the conclusion.
>>
>> It's issue-9 in the database:
>> http://www.w3.org/Style/CSS/Tracker/issues/9
>>
>> The WG agreed to close the issue. The use case of making "sprites"
>> easier wasn't considered enough to complicate CSS for. The benefit of
>>
>>     background-position-y: -30px
>>
>> over
>>
>>     background-position: 0 -30px
>>
>> isn't huge.
>
> Hello,
>
> I was thinking of the benefit of :
>
> #subNav li a {
>        background:url("../images/about.gif") no-repeat 0 0;
> }
> #subNav li#sub2Link a {
>        background-position-x:-165px;
> }
> #subNav li#sub3Link a {
>        background-position-x:-330px;
> }
> #subNav li#sub4Link a {
>        background-position-x:-495px;
> }
> #subNav li a:hover, #subNav li a:focus {
>        background-position-y:-50px;
> }
> #subNav li a:active {
>        background-position-y:-100px;
> }
>
>
> over
>
> #subNav li a {
>        background:url("../images/about.gif") no-repeat 0 0;
> }
> #subNav li#sub2Link a {
>        background-position:-165px 0;
> }
> #subNav li#sub3Link a {
>        background-position:-330px 0;
> }
> #subNav li#sub4Link a {
>        background-position:-495px 0;
> }
> #subNav li#sub1Link a:hover, #subNav li#sub1Link a:focus {
>        background-position:0 -50px;
> }
> #subNav li#sub2Link a:hover, #subNav li#sub2Link a:focus {
>        background-position:-165px -50px;
> }
> #subNav li#sub3Link a:hover, #subNav li#sub3Link a:focus {
>        background-position:-330px -50px;
> }
> #subNav li#sub4Link a:hover, #subNav li#sub4Link a:focus {
>        background-position:-495px -50px;
> }
> #subNav li#sub1Link a:active {
>        background-position:0 -100px;
> }
> #subNav li#sub2Link a:active {
>        background-position:-165px -100px;
> }
> #subNav li#sub3Link a:active {
>        background-position:-330px -100px;
> }
> #subNav li#sub4Link a:active {
>        background-position:-495px -100px;
> }
>
> Which gets huger and huger as you add menu elements.
>
> The first seems also easier to read and maintain to me (no multiple
> values to edit to change one state position everywhere in the menu).

You still have to deal with all of those states if you, frex, wanted
to specify substantially different images for each.  Multiplicative
explosion is always a bit of an issue in something like this, but
you've got only a limited number of useful states to deal with, so
it's not too bad.

Plus, there's talk elsethread on getting a proper Media Fragment
syntax for sprites, which would also involve specifying this for each
element/state combo.

Dealing with lots of backgrounds at once is a bit of a pain, but I
don't think that sprites are an important enough case to justify
splitting this out.

~TJ

Received on Wednesday, 17 June 2009 15:56:59 UTC