W3C home > Mailing lists > Public > www-style@w3.org > August 2011

Splitting background-position in two different attributes

From: Christian Sciberras <uuf6429@gmail.com>
Date: Thu, 4 Aug 2011 10:40:56 +0200
Message-ID: <CAD6s_XsOU0K3Eefkk+Ezrfsw2yEML2jUrgfrySYeZXneQDi-CA@mail.gmail.com>
To: www-style@w3.org
========= Introduction =========

This issue has been previously covered here:

http://www.w3.org/Style/CSS/Tracker/issues/9

I believe the example used does not highlight the importance of such a feature.

While this feature will most certainly be useful, Another reason it
should be add is for the sake of completeness.

Without further ado, I'd like to show a specific example where this
would excel (and an example on how it would work in the current
situation).

Note: The image in question looks like:
http://dragoninteractive.com/lib/i/navigation/sprite.jpg

========= Example with background-position[x|y] =========

/* button states */

..menu a {
    background: no-repeat url('menu.png') top;
}

..menu a:hover {
    background-position-y: -70px;
}

..menu a:active {
    background-position-y: -140px;
}

/* button images */

..menu a.home {
    background-position-x: 0;
}

..menu a.services {
    background-position-x: -102px;
}

..menu a.portfolio {
    background-position-x: -204px;
}

/* ... */


========= Same example but with background-position =========

/* button states */

..menu a {
    background: no-repeat url('menu.png');
}

/* button images+states */

..menu a.home {
    background-position: 0 0;
}

..menu a.home:hover {
    background-position: 0 -70px;
}

..menu a.home:active {
    background-position: 0 -140px;
}

..menu a.services {
    background-position: -102px 0;
}

..menu a.services:hover {
    background-position: -102px -70px;
}

..menu a.services:active {
    background-position: -102px -140px;
}

..menu a.portfolio {
    background-position: -204px 0;
}

..menu a.portfolio:hover {
    background-position: -204px -70px;
}

..menu a.portfolio:active {
    background-position: -204px -140px;
}

/* ... */


========= Conclusion =========

- Without background-position-[x|y], there is a lot more code and more
room for error.
- State positions cannot be separated from type/subject positions.
- Code is significantly larger to replace this feature.

I sincerely believe this should be added to the spec. That said, I do
acknowledge this is very late.
Such a thing should have been supported since the dawn of time.
While considering this message, please, be a little bit practical.
Received on Thursday, 4 August 2011 14:57:58 GMT

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