Re: Image sprites use cases

On Sun, Aug 30, 2009 at 9:26 PM, Brad Kemper<brad.kemper@gmail.com> wrote:
>
> On Aug 30, 2009, at 11:38 AM, Alex Kaminski wrote:
>
>> Maybe splitting the properties is not that bad? I agree that having
>> list-style-image-position-x is an overkill but maybe
>> background-image-region: x,y,w,h could be acceptable?
>
> So, is the advantage there that you don't have to include the image path and
> file name each time? For example, the following possible equivalent would be
> too long?
>
> "background-image:
> url(/path/to/where/images/are/stored/image.png#xywh=0,40,20,20);"
>

No, my concern is about how many rules you need to write,
not about the length of a single rule. Here is a checkbox/radio example,
which we can do with 23 rules now, assuming that all image files have
the same layout (sprite positions) -

<html>
<head>
<style>

/* value */
.true  .marker {background-position-x: 0}
.false .marker {background-position-x: -25px}
.mixed .marker {background-position-x: -50px}

/* state */
.normal .marker {background-position-y: 0}
.hover  .marker {background-position-y: -25px}
.pressed .marker {background-position-y: -50px}
.disabled .marker {background-position-y: -75px}

/* image variants */
.xp .checkbox .small {background-image: url(xp/checkbox/small.png)}
.xp .checkbox .large {background-image: url(xp/checkbox/large.png)}
.xp .radio .small {background-image: url(xp/radio/small.png)}
.xp .radio .large {background-image: url(xp/radio/large.png)}

.vista .checkbox .small {background-image: url(vista/checkbox/small.png)}
.vista .checkbox .large {background-image: url(vista/checkbox/large.png)}
.vista .radio .small {background-image: url(vista/radio/small.png)}
.vista .radio .large {background-image: url(vista/radio/large.png)}

.osx .checkbox .small {background-image: url(osx/checkbox/small.png)}
.osx .checkbox .large {background-image: url(osx/checkbox/large.png)}
.osx .radio .small {background-image: url(osx/radio/small.png)}
.osx .radio .large {background-image: url(osx/radio/large.png)}

.classic .checkbox .small {background-image: url(classic/checkbox/small.png)}
.classic .checkbox .large {background-image: url(classic/checkbox/large.png)}
.classic .radio .small {background-image: url(classic/radio/small.png)}
.classic .radio .large {background-image: url(classic/radio/large.png)}

</style>
</head>
<body class='xp'>
<div class="checkbox true disabled">
	<div class="marker small"></div>
	Checkbox1
</div>
</body>
</html>



Now using your syntax we would need 192 rules like these -

.xp .checkbox.true.normal .small {background-image:
url(xp/checkbox/small.png#0,0,10,10)}
.xp .checkbox.false.normal .small {background-image:
url(xp/checkbox/small.png#25,0,10,10)}
...

Problem here is that we must explicitly specify the sprite region for _each_
combination of parameters. With url shorthand we still need 192 rules.

However if we split image-region into the separate property - we can reduce
the number of rules to 28 (still more than original 23 but much better
than 192 :-)


/* value/state combined */
.true.normal .marker {background-region: 0, 0, 10, 10}
.true.hover  .marker {background-region: 0, 25, 10, 10}
.true.pressed .marker {background-region: 0, 50, 10, 10}
.true.disabled .marker {background-region: 0, 75, 10, 10}

.false.normal .marker {background-region: 25, 0, 10, 10}
.false.hover  .marker {background-region: 25, 25, 10, 10}
.false.pressed .marker {background-region: 25, 50, 10, 10}
.false.disabled .marker {background-region: 25, 75, 10, 10}

.mixed.normal .marker {background-region: 50, 0, 10, 10}
.mixed.hover  .marker {background-region: 50, 25, 10, 10}
.mixed.pressed .marker {background-region: 50, 50, 10, 10}
.mixed.disabled .marker {background-region: 50, 75, 10, 10}

/* image variants */
.xp .checkbox .small {background-image: url(xp/checkbox/small.png)}
.xp .checkbox .large {background-image: url(xp/checkbox/large.png)}
.xp .radio .small {background-image: url(xp/radio/small.png)}
.xp .radio .large {background-image: url(xp/radio/large.png)}

.vista .checkbox .small {background-image: url(xp/checkbox/small.png)}
.vista .checkbox .large {background-image: url(xp/checkbox/large.png)}
.vista .radio .small {background-image: url(xp/radio/small.png)}
.vista .radio .large {background-image: url(xp/radio/large.png)}

.osx .checkbox .small {background-image: url(xp/checkbox/small.png)}
.osx .checkbox .large {background-image: url(xp/checkbox/large.png)}
.osx .radio .small {background-image: url(xp/radio/small.png)}
.osx .radio .large {background-image: url(xp/radio/large.png)}

.classic .checkbox .small {background-image: url(xp/checkbox/small.png)}
.classic .checkbox .large {background-image: url(xp/checkbox/large.png)}
.classic .radio .small {background-image: url(xp/radio/small.png)}
.classic .radio .large {background-image: url(xp/radio/large.png)}


-- 
Alex Kaminski
http://www.activewidgets.com

Received on Sunday, 30 August 2009 21:11:25 UTC