Re: Image sprites use cases

On Aug 30, 2009, at 2:10 PM, Alex Kaminski wrote:

> 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)}

No, I think you misunderstood. I am saying that the file part only be  
specified once, and that the hash part changes which portion of the  
image is shown. Just as an HTML file is loaded once, and a hash Anchor  
(<A> tag) does not reload the file but just scrolls to a different  
portion.

So the above would be written this way:

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

That is, the hash part (#xywh=25,0,10,10) only changes the area within  
the image, it does not change which file is loaded from the server.  
The second rule, above, would be equivalent to this:

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



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

Here is how I would write the same rules:

/* value/state combined */
.true.normal .marker { background-image: url(#xywh=0,0,10,10); }
.true.hover  .marker { background-image: url(#xywh=0,25,10,10); }
.true.pressed .marker { background-image: url(#xywh=0,50,10,10); }
.true.disabled .marker { background-image: url(#xywh=0,75,10,10); }

.false.normal .marker { background-image: url(#xywh=25,0,10,10); }
.false.hover  .marker { background-image: url(#xywh=25,25,10,10); }
.false.pressed .marker { background-image: url(#xywh=25,50,10,10); }
.false.disabled .marker { background-image: url(#xywh=25,75,10,10); }

.mixed.normal .marker { background-image: url(#xywh=50,0,10,10); }
.mixed.hover  .marker { background-image: url(#xywh=50,25,10,10); }
.mixed.pressed .marker { background-image: url(#xywh=50,50,10,10); }
.mixed.disabled .marker { background-image: url(#xywh=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)}

So, in a sense it is like having two different properties (a later or  
more specific ur() functions with a file name would not overwrite a  
url() function that only contained the hash value), it could still be  
used wherever url() is used, without adding new properties to each  
url()-using property.

Received on Sunday, 30 August 2009 23:55:53 UTC